景

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

Cssbox

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

官網(wǎng)地址：http://cssbox.sourceforge.net/

使用

1引入maven依賴

<!--網(wǎng)站轉(zhuǎn)換為圖片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();
        //網(wǎng)絡(luò)鏈接的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結(jié)果

樣式可能出現(xiàn)問題，中文有時(shí)候亂碼

Selenium

1引入依賴

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

2相關(guān)準(zhǔn)備

selenium+chromedriver谷歌驅(qū)動(dòng)+chrome瀏覽器

1.注意谷歌驅(qū)動(dòng)的版本要和谷歌瀏覽器的版本一樣或者版本最相近

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

3.需要安裝谷歌瀏覽器

谷歌驅(qū)動(dòng)下載地址：https://registry.npmmirror.com/binary.html?path=chromedriver/

3使用

@Slf4j
public class Html2ImageUtil {
/**
* 將HTML轉(zhuǎn)為圖片，并保存至指定位置
* @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("截圖失敗！缺少必填項(xiàng)");
  }
  // 休眠時(shí)長
  Integer sleepTime=3 * 1000;
  // 無頭模式
  System.setProperty("java.awt.headless", "true");
  //獲取谷歌配置信息
  ChromeOptions chromeOptions=getChromeOptions();
  // 配置信息中有默認(rèn)窗口大小，也可以單獨(dú)設(shè)置窗口大小
  chromeOptions.addArguments("--window-size=1920,6000");
  //創(chuàng)建webdriver 谷歌驅(qū)動(dòng)
  WebDriver driver=new ChromeDriver(chromeOptions);
  //也可以通過如下方式設(shè)置窗口大小
  // 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谷歌驅(qū)動(dòng)需要放在jdk安裝目錄下，具體路徑為xxx/bin/chromedriver.exe ，在linux和window中操作一樣
* @return
*/
public static ChromeOptions getChromeOptions() {
    ChromeOptions options=new ChromeOptions();
    //獲取當(dāng)前操作系統(tǒng)
    String os=System.getProperty("os.name");
    //獲取jdk安裝目錄，需要提前將谷歌驅(qū)動(dòng)放進(jìn)jdk的bin目錄下，在linux和window中操作一樣
    String sysPath=System.getProperty("java.home").replace("jre", "bin");
    String chromeDriver=sysPath + File.separator+"chromedriver.exe";
    options.addArguments("disable-infobars");
    //設(shè)置為 headless 模式，不需要真實(shí)啟動(dòng)瀏覽器
    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"); // 窗口默認(rèn)大小
    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);
    // 設(shè)置chrome二進(jìn)制文件
    options.setPageLoadStrategy(PageLoadStrategy.EAGER);
    // 設(shè)置驅(qū)動(dòng)
    System.setProperty("webdriver.chrome.driver", chromeDriver);
    log.debug("結(jié)束獲取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");
}

效果十分完美

總結(jié)

最完美的方案就是selenium+chromedriver谷歌驅(qū)動(dòng)+chrome瀏覽器，無需多說，用吧。

您的贊和關(guān)注是對我創(chuàng)作的最大肯定謝謝大家！

前我曾寫過如何將canvas圖形轉(zhuǎn)換成圖片和下載canvas圖像的方法，這些都是在為這個(gè)插件做技術(shù)準(zhǔn)備。

技術(shù)路線很清晰，將網(wǎng)頁的某個(gè)區(qū)域的內(nèi)容生成圖像，保持到canvas里，然后將canvas內(nèi)容轉(zhuǎn)換成圖片，保存到本地，最后上傳到微博。

我在網(wǎng)上搜尋到html2canvas這個(gè)能將指定網(wǎng)頁元素內(nèi)容生成canvas圖像的javascript工具。這個(gè)js工具的用法很簡單，你只需要將它的js文件引入到頁面里，然后調(diào)用html2canvas()函數(shù)：

 html2canvas(document.body, {
     onrendered: function(canvas) {
         /* canvas is the actual canvas element,
            to append it to the page call for example
            document.body.appendChild( canvas );
         */
     }
 });

這個(gè)html2canvas()函數(shù)有個(gè)參數(shù)，上面的例子里傳入的參數(shù)是document.body，這會(huì)截取整個(gè)頁面的圖像。如果你想只截取一個(gè)區(qū)域，比如對某個(gè)p或某個(gè)table截圖，你就將這個(gè)p或某個(gè)table當(dāng)做參數(shù)傳進(jìn)去。

我最終并沒有選用html2canvas這個(gè)js工具，因?yàn)樵谖业膶?shí)驗(yàn)過程中發(fā)現(xiàn)它有幾個(gè)問題。

首先，跨域問題。我舉個(gè)例子說明這個(gè)問題，比如我的網(wǎng)頁網(wǎng)址是http://www.webhek.com/about/，而我在這個(gè)頁面上有個(gè)張圖片，這個(gè)圖片并不是來自www.webhek.com域，而是來自CDN圖片服務(wù)器www.webhek-cdn.com/images/about.jpg，那么，這張圖片就和這個(gè)網(wǎng)頁不是同域，那么html2canvas就無法對這種圖片進(jìn)行截圖，如果你的網(wǎng)站的所有圖片都放在單獨(dú)的圖片服務(wù)器上，那么用html2canvas對整個(gè)網(wǎng)頁進(jìn)行截圖是就會(huì)發(fā)現(xiàn)所有圖片的地方都是空白。

這個(gè)問題也有補(bǔ)救的方法，就是用代理：

 <!DOCTYPE html>
 <html>
     <head>
         <meta charset="utf-8">
         <title>html2canvas php proxy</title>
         <script src="html2canvas.js"></script>
         <script>
         //<![CDATA[
         (function() {
             window.onload=function(){
                 html2canvas(document.body, {
                     "logging": true, //Enable log (use Web Console for get Errors and Warnings)
                     "proxy":"html2canvasproxy.php",
                     "onrendered": function(canvas) {
                         var img=new Image();
                         img.onload=function() {
                             img.onload=null;
                             document.body.appendChild(img);
                         };
                         img.onerror=function() {
                             img.onerror=null;
                             if(window.console.log) {
                                 window.console.log("Not loaded image from canvas.toDataURL");
                             } else {
                                 alert("Not loaded image from canvas.toDataURL");
                             }
                         };
                         img.src=canvas.toDataURL("image/png");
                     }
                 });
             };
         })();
         //]]>
         </script>
     </head>
     <body>
         <p>
             <img alt="google maps static" src="http://maps.googleapis.com/maps/api/staticmap?center=40.714728,-73.998672&zoom=12&size=800x600&maptype=roadmap&sensor=false">
         </p>
     </body>
 </html>

這個(gè)方法只能用在你自己的服務(wù)器里，如果是對別人的網(wǎng)頁截圖，還是不行。

試驗(yàn)的過程中還發(fā)現(xiàn)用html2canvas截屏出來的圖像有時(shí)會(huì)出現(xiàn)文字重疊的現(xiàn)象。我估計(jì)是因?yàn)閔tml2canvas在解析頁面內(nèi)容、處理css時(shí)不是很完美的原因。

最后，我在火狐瀏覽器的官方網(wǎng)站上找到了drawWindow()這個(gè)方法，這個(gè)方法和上面提到html2canvas不同之處在于，它不分析頁面元素，它只針對區(qū)域，也就是說，它接受的參數(shù)是四個(gè)數(shù)字標(biāo)志的區(qū)域，不論這個(gè)區(qū)域中什么地方，有沒有頁面內(nèi)容。

 void drawWindow(
   in nsIDOMWindow window,
   in float x, 
   in float y,
   in float w,
   in float h,
   in DOMString bgColor,
   in unsigned long flags [optional]
 );

這個(gè)原生的JavaScript方法看起來非常的完美，正是我需要的，但這個(gè)方法不能使用在普通網(wǎng)頁中，因?yàn)榛鸷俜桨l(fā)現(xiàn)這個(gè)方法會(huì)引起有安全漏洞，在這個(gè)bug修復(fù)之前，只有具有“Chrome privileges”的代碼才能使用這個(gè)drawWindow()函數(shù)。

雖然有很大的限制，但周折一下還是可以用的，在我開發(fā)的火狐addon插件中，main.js就是具有“Chrome privileges”的代碼。我在網(wǎng)上發(fā)現(xiàn)了一段火狐插件SDK里自帶代碼樣例：

 var window=require('window/utils').getMostRecentBrowserWindow();
 var tab=require('tabs/utils').getActiveTab(window);
 var thumbnail=window.document.createElementNS("http://www.w3.org/1999/xhtml", "canvas");
 thumbnail.mozOpaque=true;
 window=tab.linkedBrowser.contentWindow;
 thumbnail.width=Math.ceil(window.screen.availWidth / 5.75);
 var aspectRatio=0.5625; // 16:9
 thumbnail.height=Math.round(thumbnail.width * aspectRatio);
 var ctx=thumbnail.getContext("2d");
 var snippetWidth=window.innerWidth * .6;
 var scale=thumbnail.width / snippetWidth;
 ctx.scale(scale, scale);
 ctx.drawWindow(window, window.scrollX, window.scrollY, snippetWidth, snippetWidth * aspectRatio, "rgb(255,255,255)");
 // thumbnail now represents a thumbnail of the tab

這段代碼寫的非常清楚，只需要依據(jù)它做稍微的修改就能適應(yīng)自己的需求。

這里小編是一個(gè)有著10年工作經(jīng)驗(yàn)的前端高級工程師，關(guān)于web前端有許多的技術(shù)干貨，包括但不限于各大廠的最新面試題系列、前端項(xiàng)目、最新前端路線等。需要的伙伴可以私信我

發(fā)送【前端資料】

就可以獲取領(lǐng)取地址，免費(fèi)送給大家。對于學(xué)習(xí)web前端有任何問題（學(xué)習(xí)方法，學(xué)習(xí)效率，如何就業(yè)）都可以問我。希望你也能憑自己的努力，成為下一個(gè)優(yōu)秀的程序員