html2canvas将代码转为图片的方法

　　介绍

小编给大家分享一下html2canvas将代码转为图片的方法,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获、下面让我们一起去了解一下吧!

截屏的问题

利用操作系统自带的截屏或者其他工具的截屏功能来截取代码当然是可行的。只是,不管是系统默认截屏还是通过截屏工具,都不是特别好用,尤其当代码超过一屏的时候,还得分屏截取,而当你决定修改代码的一部分的时候,有可能又要调整和重新截屏,这对于一大段一大段代码的文章编辑来说是个噩梦一样的体验,而且截成一段段的代码,对读者也不友好。

另外一个截屏的问题是,截屏效果依赖于我们使用的IDE,有可能写不同的代码使用不同的IDE,比如我喜欢用vim写json配置和nginx配置,但我用崇高的文本3编辑HTML、CSS和javascript,如果要写Android原生代码,我用Android工作室,写其他一些编程语言,我可能会使用XCode。不同的IDE界面截出来的代码风格看起来不同,这样就会造成文章之间风格不统一或者甚至一篇文章中的代码风格也五花八门,这对于希望自己的文章被完美呈现的作者来说,简直不能忍。

用工具将代码转图片

为了解决截屏的这些问题,我写了一个在线代码转图片的工具(github代码仓库),将代码粘贴进输入框,点击左上角的相机图标或者用键盘快捷键Ctrl + D,就可以自动将代码转成语法高亮的图片。

代码段即使很长,超过屏幕高度,也能轻松截取下来:

语法高亮基修饰于代码,支持超过40种编程语言的语法高亮。主流编程语言自动识别,不需要选择语言类型就可以自动识别“Java、javascript、HTML、C、c++、Python、PHP”等主流编程语言。

转换代码到图片使用html2canvas,这是一个非常著名的从浏览器网页截图的开源库,使用很方便,功能也很强大。

使用html2canvas

html2canvas的使用非常简单,简单到只需要传入一个DOM元素,然后通过回调拿到画布:

html2canvas(元素,,{,, 　　onrender:函数(画布),{,,,,,,,//,canvas  is 从而final  renderedelement ,,, 　　}});

在实际使用的时候,有两个注意点:

<李>

html2canvas通过解析元素实际的样式来生成画布图片内容,因此它对元素实际的布局和视觉显示有要求。如果要完整截的图,最好将元素从文档流中独立出来(例如位置:绝对)

<李>

默认生成的帆布图片在视网膜设备上显示很模糊,处理成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 (“2 d");//然后将画布缩放,将图像放大两倍画到画布上 　　context.scale (2, 2); 　　html2canvas (document.querySelector (“# code"), {,,, 　　帆布:画布,,,,,onrender:,函数(画布),{,,,,,,,,,,,,}});

对多语言的支持

代码美化默认支持多种语言,所以一开始的时候,没有设计成让用户能够手动切换语言,但是发现这样做,在展示CSS的时候效果不好:

上面的代码里,CSS的ID选择器被识别成代码注释了,查看代码美化的官方文档发现,它默认支持的语言中不包括CSS, CSS和其他一些语言的语法高亮需要通过扩展来实现。

使用扩展

我使用URL的散列来标记扩展,例如要使用CSS扩展,可以使用http://code2img.test.h6jun.com/CSS。

使用哈希的好处是,我在页面顶部放了一些常用语言的扩展链接,切换这些链接的时候由于是改变散列,不会刷新页面。

在<强>第一次强切换到某个扩展的语言时,需要加载相应的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",, 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null 　　null

html2canvas将代码转为图片的方法