首先請關注官方更新。
——————————————————————————————————————
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
});
然后很山寨的就把我的問題解決了。
但也帶來了后續(xù)的問題：
- 如果子元素的左右邊距不對稱怎么辦伞辛？這個可以繼續(xù)改offsetX烂翰。
- 如果子元素做了translate該怎么辦？我沒正面解決這個問題蚤氏，而是在生成canvas前把這個元素的translate值增大了兩倍甘耿。
期待日后可以看到更優(yōu)雅的解決方案。
