html 2 canvasスクリーンショットの解像度の問題
1722 ワード
まずは公式更新に注目してください.——————————————————————————————————————————————html 2 canvasというものの役割は、ページ全体、さらには単一のdivにかかわらず、元の画風に従ってcanvasを生成することができ、toDataURLという方法でこのページやdivの画像を生成することができます.
著者が前回更新したのは今年だったが、このような方法で生成されたcanvasの画質がはっきりしているかどうかという問題には注目していない.デバイスのdevicePixelRatioがcanvasの解像度を決定することを知っています.この問題を解決する核心的な方法はcanvasを拡大して元の割合に縮小することです.そこでhtml 2 canvas.jsで次のように変更しました.
私は描く要素の幅と高さに2を乗じただけです.そしてこの設定はすべてのサブ要素に再帰的に有効になります.そこで、すべての描画対象要素を2倍に拡大したcanvasを得ました.次はcanvasも拡大しなければならないに違いない.
そしてパクリで私の問題を解決しました.しかし、次の問題も発生しました.サブエレメントの左右の余白が非対称であればどうしますか?これはoffsetXを変更し続けることができます. サブエレメントがtranslateをしたらどうしますか?私はこの問題を正面から解決するのではなく、canvasを生成する前にこの要素のtranslate値を2倍に増やしました.今後、より優雅なソリューションが見られることを期待しています.
炎尾反復の文章が私を啓発してくれたことに感謝します.
著者が前回更新したのは今年だったが、このような方法で生成されたcanvasの画質がはっきりしているかどうかという問題には注目していない.デバイスのdevicePixelRatioがcanvasの解像度を決定することを知っています.この問題を解決する核心的な方法はcanvasを拡大して元の割合に縮小することです.そこでhtml 2 canvas.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を乗じただけです.そしてこの設定はすべてのサブ要素に再帰的に有効になります.そこで、すべての描画対象要素を2倍に拡大したcanvasを得ました.次はcanvasも拡大しなければならないに違いない.
var width = $('#earsContainer').width() ; // div
var height = $('#earsContainer').height() ;
html2canvas($('.earsContainer'), {
onrendered: function(canvas) {
// canvas
}, width : width*2 , height : height*2
});
そしてパクリで私の問題を解決しました.しかし、次の問題も発生しました.
炎尾反復の文章が私を啓発してくれたことに感謝します.