web-dev-qa-db-ja.com

HTML2canvasはぼやけた画像を生成します

私はjsPDFを使用していますが、html2canvasを使用していくつかのhtml要素から画像を生成し、.pdfファイルに挿入します。しかし、html2canvasには問題があり、htmlからぼやけた画像を生成します。以下の例を参照してください。

HTMLコンテンツ：

http://puu.sh/7SZz4.png

html2canvasが生成した画像：

http://puu.sh/7SZAT.png

それを修正する方法はありますか、または画像フォームhtmlを取得するより良いオプションがありますか？

ありがとう！

javascripthtmlcanvashtml2canvasjspdf
16
jgabrielfaria

私は問題を発見しました。私の画面はRetinaディスプレイであるため、canvas2htmlがHTMLをレンダリングすると、Retina画面のピクセル密度の違いにより、画像がぼやけて表示されます。

ここで解決策を見つけました：

https://github.com/cburgmer/rasterizeHTML.js/blob/master/examples/retina.html

3
jgabrielfaria

html2canvasでscaleオプションを使用できます。

最新リリースのv1.0.0-alpha.1では、スケールオプションを使用して解像度を上げることができます（スケール：2はデフォルトの96dpiから解像度を2倍にします）。

// Create a canvas with double-resolution.
html2canvas(element, {
    scale: 2,
    onrendered: myRenderFunction
});
// Create a canvas with 144 dpi (1.5x resolution).
html2canvas(element, {
    dpi: 144,
    onrendered: myRenderFunction
});
19
Ricky sharma

網膜ディスプレイを使用していたため、この問題が発生しました。 MisterLambのソリューションはこちら を使用して解決しました。

$(window).load(function () {

    var scaleBy = 5;
    var w = 1000;
    var h = 1000;
    var div = document.querySelector('#screen');
    var canvas = document.createElement('canvas');
    canvas.width = w * scaleBy;
    canvas.height = h * scaleBy;
    canvas.style.width = w + 'px';
    canvas.style.height = h + 'px';
    var context = canvas.getContext('2d');
    context.scale(scaleBy, scaleBy);

    html2canvas(div, {
        canvas:canvas,
        onrendered: function (canvas) {
            theCanvas = canvas;
            document.body.appendChild(canvas);

            Canvas2Image.saveAsPNG(canvas);
            $(body).append(canvas);
        }
    });
});

スケーリングなしのHTMLおよびPNG

enter image description here

スケーリング付きのHTMLおよびPNG

enter image description here

9
Charles Clayton

これは私のためにそれを修正したものです。それは、網膜ディスプレイを使用していたからではありませんでした（私は持っていないので）：

https://github.com/niklasvh/html2canvas/issues/576

Html2canvas.jsのgetBounds（）メソッドを次のように変更するだけです：

 function getBounds (node) {
        if (node.getBoundingClientRect) {
            var clientRect = node.getBoundingClientRect();
            var width = node.offsetWidth == null ? clientRect.width : node.offsetWidth;
            return {
                top   : Math.floor(clientRect.top),
                bottom: Math.floor(clientRect.bottom || (clientRect.top + clientRect.height)),
                right : Math.floor(clientRect.left + width),
                left  : Math.floor(clientRect.left),
                width : width,
                height: node.offsetHeight == null ? clientRect.height : node.offsetHeight
            };
        }
        return {};
    }
2
foreyez