html2canvas是否截图成功状态值,html2canvas截图的清晰度问题

首先请关注官方更新。

——————————————————————————————————————

html2canvas这个东西的作用是，可以在页面里截图，无论是整张页面，乃至单个的div，都可以依照原本的画风生成canvas，然后我们使用toDataURL这个方法就可以生成这个页面或者div的图片了。

作者上次更新就在今年，但并没有关注到一个问题：使用这样的方法生成的canvas，画质是否清晰？我们知道设备的devicePixelRatio决定了canvas的清晰度, 文中解决这个问题的核心方法是放大canvas然后缩小显示到原比例。于是我在html2canvas.js中做了如下改动：

var node = ((nodeList === undefined) ? [document.documentElement] : ((nodeList.length) ? nodeList : [nodeList]))[0];

node.setAttribute(html2canvasNodeAttribute + index, index);

return renderDocument(node.ownerDocument, options, node.ownerDocument.defaultView.innerWidth*2, node.ownerDocument.defaultView.innerHeight*2, index).then(function(canvas) {

if (typeof(options.onrendered) === "function") {

log("options.onrendered is deprecated, html2canvas returns a Promise containing the canvas");

options.onrendered(canvas);

}

return canvas;

});

我只是将待画元素的宽度与高度都乘以2。然后这个设定对所有子元素都递归有效了。于是我们得到了一个所有待画元素都放大一倍的canvas。

接下来肯定是要把canvas也放大才行。

var width = $('#earsContainer').width() ; //这是我们准备画的div

var height = $('#earsContainer').height() ;

html2canvas($('.earsContainer'), {

onrendered: function(canvas) {

//这里返回了一个canvas

}, width : width*2 , height : height*2

});

然后很山寨的就把我的问题解决了。

但也带来了后续的问题：

如果子元素的左右边距不对称怎么办？这个可以继续改offsetX。

如果子元素做了translate该怎么办？我没正面解决这个问题，而是在生成canvas前把这个元素的translate值增大了两倍。

期待日后可以看到更优雅的解决方案。

感谢焰尾迭的文章启发了我。