html2canvas將代碼轉為圖片的方法

小編給大家分享一下html2canvas將代碼轉為圖片的方法，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

截屏的問題

利用操作系統自帶的截屏或者其他工具的截屏功能來截取代碼當然是可行的。只是，不管是系統默認截屏還是通過截屏工具，都不是特別好用，尤其當代碼超過一屏的時候，還得分屏截取，而當你決定修改代碼的一部分的時候，有可能又要調整和重新截屏，這對于一大段一大段代碼的文章編輯來說是個噩夢一樣的體驗，而且截成一段段的代碼，對讀者也不友好。

另外一個截屏的問題是，截屏效果依賴于我們使用的 IDE，有可能寫不同的代碼使用不同的 IDE，比如我喜歡用 vim 寫 json 配置和 nginx 配置，但我用 Sublime Text 3 編輯 HTML、CSS 和 JS，如果要寫 Android Native 代碼，我用 Android Studio，寫其他一些編程語言，我可能會使用 XCode。不同的 IDE 界面截出來的代碼風格看起來不同，這樣就會造成文章之間風格不統一或者甚至一篇文章中的代碼風格也五花八門，這對于希望自己的文章被完美呈現的作者來說，簡直不能忍。

用工具將代碼轉圖片

為了解決截屏的這些問題，我寫了一個在線代碼轉圖片的工具（github 代碼倉庫 ），將代碼粘貼進輸入框，點擊左上角的相機圖標或者用鍵盤快捷鍵 Ctrl+D ，就可以自動將代碼轉成語法高亮的圖片。

代碼段即使很長，超過屏幕高度，也能輕松截取下來：

語法高亮基于 Code Prettify ，支持超過 40 種編程語言的語法高亮。主流編程語言自動識別，不需要選擇語言類型就可以自動識別“Java、JS、HTML、C、C++、Python、PHP”等主流編程語言。

轉換代碼到圖片使用 html2canvas ，這是一個非常著名的從瀏覽器網頁截圖的開源庫，使用很方便，功能也很強大。

使用 html2canvas

html2canvas 的使用非常簡單，簡單到只需要傳入一個 DOM 元素，然后通過回調拿到 canvas：

html2canvas(element, {   
onrendered: function(canvas) {        
// canvas is the final renderedelement    
}});

在實際使用的時候，有兩個注意點：

1. html2canvas 通過解析元素實際的樣式來生成 canvas 圖片內容，因此它對元素實際的布局和視覺顯示有要求。如果要完整截圖，最好將元素從文檔流中獨立出來（例如 position:absolute）

2. 默認生成的 canvas 圖片在 retina 設備上顯示很模糊，處理成 2 倍圖能解決這個問題：

var w = $("#code").width();
var h = $("#code").height();//要將 canvas 的寬高設置成容器寬高的 2 倍
var canvas = document.createElement("canvas");
canvas.width = w * 2;
canvas.height = h * 2;
canvas.style.width = w + "px";
canvas.style.height = h + "px";
var context = canvas.getContext("2d");//然后將畫布縮放，將圖像放大兩倍畫到畫布上
context.scale(2,2);
html2canvas(document.querySelector("#code"), {    
canvas: canvas,    onrendered: function(canvas) {        ...    }});

對多語言的支持

Code Prettify 默認支持多種語言，所以一開始的時候，沒有設計成讓用戶能夠手動切換語言，但是發現這樣做，在展示 CSS 的時候效果不好：

上面的代碼里，CSS 的 ID 選擇器被識別成代碼注釋了，查看 Code Prettify 的 官方文檔 發現，它默認支持的語言中不包括 CSS，CSS 和其他一些語言的語法高亮需要通過擴展來實現。

使用擴展

我使用 URL 的 hash 來標記擴展，例如要使用 CSS 擴展，可以使用 http://code2img.test.h6jun.com/#css 。

使用 hash 的好處是，我在頁面頂部放了一些常用語言的擴展鏈接，切換這些鏈接的時候由于是改變 hash，不會刷新頁面。

在 第一次 切換到某個擴展的語言時，需要加載相應的 js 文件：

var srcMap = {  "apollo": "lang-apollo.js?7.1.34",  
"basic": "lang-basic.js?7.1.34",  
"clojure": "lang-clj.js?7.1.34",  
"css": "lang-css.js?7.1.34",  
"dart": "lang-dart.js?7.1.34",  
"erlang": "lang-erlang.js?7.1.34",  
"go": "lang-go.js?7.1.34",  
"haskell": "lang-hs.js?7.1.34",  
"lasso": "lang-lasso.js?7.1.34",  
"lisp": "lang-lisp.js?7.1.34",  
"scheme": "lang-lisp.js?7.1.34",  
"llvm": "lang-llvm.js?7.1.34",  
"logtalk": "lang-logtalk.js?7.1.34",  
"lua": "lang-lua.js?7.1.34",  
"matlab": "lang-matlab.js?7.1.34",  
"ml": "lang-ml.js?7.1.34",  
"mumps": "lang-mumps",  
"nemerle": "lang-n.js?7.1.34",  
"pascal": "lang-pascal.js?7.1.34",  
"protocol": "lang-proto.js?7.1.34",  
"r": "lang-r.js?7.1.34",  
"rd": "lang-rd.js?7.1.34",  
"rust": "lang-rust.js?7.1.34",  
"scala": "lang-scala.js?7.1.34",  
"sql": "lang-sql.js?7.1.34",  
"swift": "lang-swift.js?7.1.34",  
"tcl": "lang-tcl.js?7.1.34",  
"latek": "lang-tex.js?7.1.34",  
"vb": "lang-vb.js?7.1.34",  
"vhdl": "lang-vhdl.js?7.1.34",  
"wiki": "lang-wiki.js?7.1.34",  
"xq": "lang-xq.js?7.1.34", 
 "yaml": "lang-yaml.js?7.1.34"
 };
 function loadPlugin(lang)
 {  
 var js = srcMap[lang.toLowerCase()];    
 if(typeof js === "string")
 {    
 var script = document.createElement("script");    
 script.src = "/static/js/" + js;    
 document.body.appendChild(script);  
 }   
 /srcMap[lang] 設為 true，表示已經加載過，下次切換就不會再加載  
 srcMap[lang] = true;    
 }

許可協議

由于 Code Prettify 采用 Apache License 2.0 ，而 html2canvas 采用一個 非商業授權 的 協議 ，因此，本項目采用雙重許可協議，使用、修改和分發本項目代碼需要遵守兩個協議。

總結

由于一些平臺對文本代碼支持不友好，因此我使用 html2canvas 和 Code Prettify 來實現一個將代碼轉為圖片的工具，它的特點如下：

• 在線轉換代碼為 jpeg base64 圖片

• 支持 40+ 種不同語言的語法高亮

• 支持多屏的長代碼轉成一張圖片

以上是“html2canvas將代碼轉為圖片的方法”這篇文章的所有內容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內容對大家有所幫助，如果還想學習更多知識，歡迎關注億速云行業資訊頻道！