解決ios15系統的手機使用html2canvas截圖頁面空白崩潰

近ios15系統推出了，公司的app開始測試ios15的兼容，然后就出現了有截圖的頁面卡頓白屏的問題。

業務場景是這樣，我們的每個頁面都會有多個截圖，截圖使用的方式是html2canvas這個插件，

1、截圖方法如下：

// 截圖方法
 function convertToPoster() {
   var $poster = $('#poster-content');
   html2canvas($poster[0], {useCORS: true})
     .then(
     function (canvas) {
       var oImage = new Image();
       oImage.src = canvas.toDataURL('image/png', 1);
       $(oImage)
         .addClass('poster');
       $poster.parent()
         .after(oImage)
         .hide();
     }
   );
 };

2、調用方法如下：

$(window).load(function() {
  convertToPoster();
})

3、問題現象：

當頁面先截一張圖之后，再去截第二張圖時，頁面就會出現卡頓白屏的問題，這個問題時必現，且在ios的瀏覽器中走也是這樣。

4、解決方案：

經過很多輪的調試之后，依然找不出原因，因為既無報錯也不確定頁面是在哪行代碼卡住的，最終只能采用笨辦法，去屏蔽頁面的html結構，只留下兩個截圖的結構，突然好運降臨，頁面不卡了，截圖成功了，那是不是就能證明是頁面的某個dom結構導致的呢？

因為頁面較為復雜，最終經過10多輪的屏蔽組合，終于確定在了button這里，那么這個button按鈕的樣式會有什么影響呢？

一步一步挨個去屏蔽屬性，結果并沒有預料中的變好，正在疑惑之時，突然看到了用戶代理樣式里面有三個屬性是沒有替換的，其中有個font-family:system-ui這個樣式在chrome瀏覽器中是沒有的，會不會是這個影響的呢？果然屏蔽了它之后就可以了，頁面操作無比絲滑。

我們先來看看這個樣式究竟是什么意思？

system-ui是一種通用字體系列，它選擇當前操作系統下的默認系統字體，它的優勢在于和當前系統使用的字體相匹配，可以讓Web頁面和App風格看起來更統一。

話說它雖然出現得比較晚，但是在can i use上顯示的兼容性還是很好的，為啥會出現在ios15的手機系統上呢？目前ios15的資料還少之又少查不到,有待于深究。

記錄下目前的處理方案：

//兼容ios15手機系統字體導致的問題
var isiOS = !!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios終端
if (isiOS) {
  var ios_ver = parseInt(navigator.userAgent.toLowerCase().match(/cpu iphone os (.*?) like mac os/)[1].replace(/\_/g, '.'));
  if (ios_ver >= 15) {
    if ($('button')) {
      $('button').css('font-family', 'PingFangSC-Regular');
    }
  }
}

版權聲明
本文為[青咕咕]所創，轉載請帶上原文鏈接，感謝
https://juejin.im/post/7006119499216715783

尋找熱愛表達的你#

"一鍵將網頁截圖制作成HTML網頁"是指一種技術，它允許用戶通過簡單的操作，將網頁的截圖轉換成HTML代碼的網頁。這通常涉及到自動布局、樣式提取和代碼生成。以下是實現這一功能的相關技術和步驟：

1. 截圖捕捉：首先，需要有一個方法來捕捉網頁的截圖，這可以通過瀏覽器插件、屏幕捕獲工具或專門的應用程序來完成。

2. 圖像處理：捕捉到的截圖可能需要進行預處理，比如裁剪、壓縮或調整分辨率，以確保圖像的質量。

3. 元素識別：使用圖像識別技術來分析截圖，識別網頁中的元素，比如文本、按鈕、圖片等。

4. 布局分析：基于識別出的元素，分析頁面的布局信息，包括元素的大小、位置和層級。

5. 樣式解析：提取頁面的樣式信息，包括顏色、字體、間距等，并將它們轉換為CSS代碼。

6. HTML生成：根據布局和樣式信息，生成HTML結構代碼，將截圖中的元素轉換為HTML標簽。

7. 代碼優化：對生成的HTML代碼進行優化，確保代碼的可讀性、維護性和性能。

8. 響應式設計：確保生成的網頁代碼能夠適應不同的屏幕尺寸和設備，實現響應式布局。

9. 交互性實現：如果截圖中的頁面包含交互元素，需要添加相應的JavaScript代碼來實現這些交互。

10. 一鍵操作：提供一個簡單的用戶界面，用戶只需點擊一個按鈕，就可以完成截圖到HTML的轉換。

11. 預覽功能：在轉換過程中提供實時預覽，讓用戶可以實時看到轉換效果。

12. 自定義選項：允許用戶對生成的HTML代碼進行自定義，比如修改布局、添加額外的樣式或功能。

13. 保存和導出：用戶可以保存或導出生成的HTML代碼，以便進一步使用或分享。

14. 錯誤處理：在轉換過程中識別和處理潛在的錯誤，比如布局沖突或樣式問題。

15. 兼容性測試：確保生成的網頁在不同的瀏覽器和設備上都能正常顯示和工作。

16. 安全性考慮：生成的代碼應遵循安全最佳實踐，避免潛在的安全風險。

17. 用戶反饋：收集用戶反饋，不斷改進轉換算法和用戶體驗。

18. 開源和社區支持：作為開源項目，鼓勵社區參與貢獻代碼和改進功能。

這種一鍵轉換技術可以大大提高網頁開發的效率，尤其是對于快速原型設計和演示目的。然而，需要注意的是，自動生成的代碼可能需要進一步的人工審查和調整，以確保最終產品的質量和性能。此外，一些復雜的網頁效果和動態交互可能需要手動編寫代碼來實現。

景

需求一直有，今年比較多，如題，工作中遇到網頁截圖這樣的需求，本著效果好，功能全又穩定的意圖，去網上搜索相關技術，像HTML2Image、cssbox、selenium等，還有很多其他的技術，這篇文章主要說說我測試使用并能滿足需求的cssbox,selenium。

Cssbox

CSSBox是一個用純Java編寫的（X）HTML/CSS渲染引擎。它的主要目的是提供關于呈現的頁面內容和布局的完整和進一步可處理的信息。但是，它也可以用于瀏覽Java Swing應用程序中呈現的文檔。核心CSSBox庫還可以用于獲得所呈現的文檔的位圖或矢量（SVG）圖像。使用SwingBox包，CSSBox可以用作Java Swing應用程序中的交互式Web瀏覽器組件。

官網地址：http://cssbox.sourceforge.net/

使用

1引入maven依賴

<!--網站轉換為圖片cssbox-->
<dependency>
<groupId>net.sf.cssbox</groupId>
<artifactId>cssbox</artifactId>
<version>5.0.0</version>
</dependency>

2使用

@Test
public void cssboxTest(){
    try {
        ImageRenderer render = new ImageRenderer();
        //網絡鏈接的html
        String url = "https://www.zhangbj.com/p/524.html";
        //文件保存路徑
        String path = "C:\\Users\\Administrator\\Desktop"+File.separator+"html.png";
        FileOutputStream out = new FileOutputStream(new File(FilenameUtils.normalize(path)));
        //開始截屏
        render.renderURL(url, out);
    } catch (Exception e) {
    e.printStackTrace();
    }
}

3結果

樣式可能出現問題，中文有時候亂碼

Selenium

1引入依賴

<dependency>
<groupId>org.seleniumhq.selenium</groupId>
<artifactId>selenium-java</artifactId>
<version>3.141.59</version>
</dependency>

2相關準備

selenium+chromedriver谷歌驅動+chrome瀏覽器

1.注意谷歌驅動的版本要和谷歌瀏覽器的版本一樣或者版本最相近

2.注意chromedriver谷歌驅動需要放在jdk安裝目錄下，具體路徑為xxx/bin/chromedriver.exe，在linux和window中操作一樣，這樣切換系統是就無需改代碼。

3.需要安裝谷歌瀏覽器

谷歌驅動下載地址：https://registry.npmmirror.com/binary.html?path=chromedriver/

3使用

@Slf4j
public class Html2ImageUtil {
/**
* 將HTML轉為圖片，并保存至指定位置
* @param url 頁面地址
* @param targetPath 保存地址（包含圖片名，如 /images/test.png）
* @return
*/
public static String htmlToImage(String url, String targetPath) {
  if (StringUtils.isEmpty(url) || StringUtils.isEmpty(targetPath)) {
  throw new RuntimeException("截圖失敗！缺少必填項");
  }
  // 休眠時長
  Integer sleepTime = 3 * 1000;
  // 無頭模式
  System.setProperty("java.awt.headless", "true");
  //獲取谷歌配置信息
  ChromeOptions chromeOptions = getChromeOptions();
  // 配置信息中有默認窗口大小，也可以單獨設置窗口大小
  chromeOptions.addArguments("--window-size=1920,6000");
  //創建webdriver 谷歌驅動
  WebDriver driver = new ChromeDriver(chromeOptions);
  //也可以通過如下方式設置窗口大小
  // Dimension dimension = new Dimension(1000, 30);
  // driver.manage().window().setSize(dimension);
  try {
    //加載頁面
    driver.get(url);
    //等待加載頁面
    Thread.sleep(sleepTime);
    //截屏
    File srcFile = ((TakesScreenshot) driver).getScreenshotAs(OutputType.FILE);
    //保存到指定位置
    FileUtils.copyFile(srcFile, new File(FilenameUtils.normalize(targetPath)));
  } catch (InterruptedException | IOException e) {
  e.printStackTrace();
  throw new RuntimeException(e.getMessage());
  } finally {
  driver.quit();
  }
  log.info("截圖成功！");
  return targetPath;
}
/**
* 獲取chrome配置信息
* 注意 chromedriver谷歌驅動需要放在jdk安裝目錄下，具體路徑為xxx/bin/chromedriver.exe ，在linux和window中操作一樣
* @return
*/
public static ChromeOptions getChromeOptions() {
    ChromeOptions options = new ChromeOptions();
    //獲取當前操作系統
    String os = System.getProperty("os.name");
    //獲取jdk安裝目錄，需要提前將谷歌驅動放進jdk的bin目錄下，在linux和window中操作一樣
    String sysPath = System.getProperty("java.home").replace("jre", "bin");
    String chromeDriver = sysPath + File.separator+"chromedriver.exe";
    options.addArguments("disable-infobars");
    //設置為 headless 模式，不需要真實啟動瀏覽器
    options.setHeadless(true);
    //options.addArguments("--headless");
    options.addArguments("--dns-prefetch-disable");
    options.addArguments("--no-referrers");
    options.addArguments("--disable-gpu");
    options.addArguments("--disable-audio");
    options.addArguments("--no-sandbox");
    options.addArguments("--ignore-certificate-errors");
    options.addArguments("--allow-insecure-localhost");
    options.addArguments("--window-size=1920,6000"); // 窗口默認大小
    String userAgent = "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/109.0.0.0 Safari/537.36";
    userAgent = "user-agent=" + userAgent;
    options.addArguments(userAgent);
    // 設置chrome二進制文件
    options.setPageLoadStrategy(PageLoadStrategy.EAGER);
    // 設置驅動
    System.setProperty("webdriver.chrome.driver", chromeDriver);
    log.debug("結束獲取chrome配置信息");
    return options;
}

測試

public static void main(String[] args) {
		htmlToImage("https://www.cnblogs.com/tester-ggf/p/12602211.html","C:\\Users\\Administrator\\Desktop\\aaa.png");
}

效果十分完美

總結

最完美的方案就是selenium+chromedriver谷歌驅動+chrome瀏覽器，無需多說，用吧。

您的贊和關注是對我創作的最大肯定謝謝大家！

在線咨詢

上一篇：在HTML頁面中嵌入其他頁面的方法-零基礎自學網頁制作
下一篇：16個超牛逼的HTML5和JavaScript特效

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商