首先请关注官方更新。
——————————————————————————————————————
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值增大了两倍。
期待日后可以看到更优雅的解决方案。
