关于html2canvas用法的总结

html-css016

关于html2canvas用法的总结,第1张

最近H5项目有个功能需求:长按微信网页保存为截图。本人使用了html2canvas.js实现,感觉效果还不错,有几个注意点和大家分享一下。

html2canvas官网: https://html2canvas.hertzen.com/

使用的版本是最新版本:^1.0.0-alpha.12

html2canvas 可以将一个元素渲染为canvas。需要注意的是,Vue使用v-if和v-show的时候html2canvas无法将元素渲染为canvas。在我的项目之中存在一个骨架屏,这里我的解决方案是对要渲染的网页采用position:absolute为其增加一个蒙层。

生成canvas之后可以采用canvas.toDataURL("image/png")将canvas转化为base64。

关于清晰度问题:在Android手机上,生成的图片会存在模糊。图片的清晰度取决于生成的canvas的清晰度,在html2canvas之中存在一个参数scale,这里设置生成canvas的大小设置为图片大小的两倍保障清晰度。

最后,如果网页之中存在较大的图片,可能导致html2canvas生成canvas的时候图片还没有加载完,从而致使排版错乱。可以判断一下图片是否加载完。

1.引入html2canvas

2.

html2canvas(document.body, {

onrendered: function(canvas){

document.body.appendChild(canvas)

},

width:300,

height:200

})

然后就在document.body中append了一个canvas.

3.如果想要实现生成一个图片,可以这样实现:

html2canvas(document.body, {

onrendered: function(canvas){

//document.body.appendChild(canvas)

var img = canvas.toDataURL()

console.log(img)//在console中会输出图片的路径,然后复制在浏览器一粘贴,就可以看到。

},

width:300,

height:200

})