何把網頁上的內容用javascript來實現截圖?今天分享的html2canvas就可以。
在微信項目中經常會遇到動態生成海報的需求,Web前端合成圖片往往會使用canvas。canvas雖然強大,但用來合成海報非常繁瑣,一不小心就幾百行代碼了。而html2canvas.js是一款輕松地將HTML+CSS寫成的布局直接轉換成canvas,生成可保存分享的圖片。
html2canvas.js官網截圖
這是一個把HTML的DOM結構根據所支持的CSS樣式生成canvas的js開源庫,CSS的寫法千變萬化,不同的布局有很多不同的寫法,因此html2canvas是不能100%還原網頁的樣式,因此不用用于像電腦屏幕截圖這樣的需求中。
官網關于支持css的說明
使用的時候要注意查看所支持的CSS屬性,盡量使用這些屬性來寫布局,不支持的效果可以嘗試用圖片來實現。只要產品經理腦子在線,目測幾乎沒有什么海報需求是實現不了的。
官網是英文的,寫得很專業,谷歌翻譯閱讀無壓力。
html2canvas 由開發者 Niklas von Hertzen 創建,基于MIT許可開源,可以免費使用在任何項目。
關注我,持續分享高質量的免費開源、免費商用的資源。
↓↓點【了解更多】查看本次分享的相關網址。
0230112星期四:
現文檔在線預覽的方式除了上篇文章《文檔在線預覽(一)通過將txt、word、pdf轉成圖片實現在線預覽功能》說的將文檔轉成圖片的實現方式外,還有轉成pdf,前端通過pdf.js、pdfobject.js等插件來實現在線預覽,以及本文將要說到的將文檔轉成html的方式來實現在線預覽。代碼基于 aspose-words(用于word轉html),pdfbox(用于pdf轉html),所以事先需要在項目里下面兩個依賴:
<dependency>
<groupId>com.luhuiguo</groupId>
<artifactId>aspose-words</artifactId>
<version>23.1</version></dependency>
<dependency>
<groupId>org.apache.pdfbox</groupId>
<artifactId>pdfbox</artifactId>
<version>2.0.4</version>
</dependency>
public static String wordToHtmlStr(String wordPath) {
try {
Document doc=new Document(wordPath); // Address是將要被轉化的word文檔
String htmlStr=doc.toString();
return htmlStr;
} catch (Exception e) {
e.printStackTrace();
}
return null;
}
驗證結果:
public static String pdfToHtmlStr(String pdfPath) throws IOException, ParserConfigurationException {
PDDocument document=PDDocument.load(new File(pdfPath));
Writer writer=new StringWriter();
new PDFDomTree().writeText(document, writer);
writer.close();
document.close();
return writer.toString();
}
驗證結果:
有時我們是需要的不僅僅返回html字符串,而是需要生成一個html文件這時應該怎么做呢?一個改動量小的做法就是使用org.apache.commons.io包下的FileUtils工具類寫入目標地址:
首先需要引入pom:
<dependency>
<groupId>commons-io</groupId>
<artifactId>commons-io</artifactId>
<version>2.8.0</version>
</dependency>
相關代碼:
String htmlStr=FileConvertUtil.pdfToHtmlStr("D:\\書籍\\電子書\\小說\\歷史小說\\最后的可汗.doc");
FileUtils.write(new File("D:\\test\\doc.html"), htmlStr, "utf-8");
除此之外,還可以對上面的代碼進行一些調整,已實現生成html文件,代碼調整如下:
public static void wordToHtml(String wordPath, String htmlPath) {
try {
File sourceFile=new File(wordPath);
String path=htmlPath + File.separator + sourceFile.getName().substring(0, sourceFile.getName().lastIndexOf(".")) + ".html";
File file=new File(path); // 新建一個空白pdf文檔
FileOutputStream os=new FileOutputStream(file);
Document doc=new Document(wordPath); // Address是將要被轉化的word文檔
HtmlSaveOptions options=new HtmlSaveOptions();
options.setExportImagesAsBase64(true);
options.setExportRelativeFontSize(true);
doc.save(os, options);
} catch (Exception e) {
e.printStackTrace();
}
}
驗證結果:
public static void pdfToHtml(String pdfPath, String htmlPath) throws IOException, ParserConfigurationException {
File file=new File(pdfPath);
String path=htmlPath + File.separator + file.getName().substring(0, file.getName().lastIndexOf(".")) + ".html";
PDDocument document=PDDocument.load(new File(pdfPath));
Writer writer=new PrintWriter(path, "UTF-8");
new PDFDomTree().writeText(document, writer);
writer.close();
document.close();
}
圖片版PDF文件驗證結果:
文字版PDF文件驗證結果:
*請認真填寫需求信息,我們會在24小時內與您取得聯系。