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

私は網膜ディスプレイ上にいたので、私はこの問題を抱えていました。私は 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

スケーリングを伴うHTMLとPNG

あなたはhtml2canvasである[スケールのオプションを使用することができます。

最新のリリース、v1.0.0-alpha.1では、スケールオプションを使って解像度を上げることができます（scale：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
});

Canvas2Imageライブラリを試してみてください、それは少なくとも私にとってはより良い品質の画像を提供します イメージに分割（フィドル）。

    html2canvas($("#widget"), {
        onrendered: function(canvas) {
            theCanvas = canvas;
            Canvas2Image.saveAsPNG(canvas); //Convert and download as image with a prmompt. 
        }
    });

がんばろう！

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

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 {};
    }