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

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

HTMLコンテンツ

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

html2canvasが生成した画像:

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

それを修正する方法はありますか、それともHTML形式の画像を取得するためのより良いオプションはありますか?

ありがとう

7
これがすべてのWebブラウザに関係するのかどうかを確認しましたか
追加された 著者 Mikko Ohtamaa,
私はfalseにimageSmoothingEnabledを設定しようとするでしょう(ベンダープレフィックスに注意してください)
追加された 著者 GameAlchemist,

5 答え

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

6
追加された
この修正にどのバージョンのhtml2canvasライブラリを使用していますか?
追加された 著者 gyochum,
これは本来の方法ではありません。私は702サイズを800の幅にしていますが、画像が生成されると小さく表示され、画像の上下から切り取られます。
追加された 著者 saadk,
@ crclayton: "canvas.width"と "canvas.style.width"の違いは何ですか?
追加された 著者 saadk,
私はsaadkと同じ問題を抱えています。
追加された 著者 Caleb Pitman,

あなたは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
});
3
追加された

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

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

がんばろう!

3
追加された
html2canvasがすでに低品質のイメージを生成している場合、Canvas2Imageはイメージ品質を向上させることができません。これがそもそもの問題です。
追加された 著者 Martin Peter,

私は自分の問題を見つけました。私のスクリーンはRetinaディスプレイであることが起こるので、canvas2htmlがHTMLをレンダリングするとき、網膜スクリーン上のピクセル密度の違いのために、イメージはぼやけてレンダリングされます。

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

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

3
追加された
私はあまりにもこのぼやけた画像の問題に直面していますが、私はあなたの答えが巧妙になることができる得なかった
追加された 著者 Mohammad Faizan khan,
@ kashesandr:あなたはこの解決策を得ましたか?それとも他の解決策?
追加された 著者 Yo Yo,
解決策をより明確にしてください。
追加された 著者 kashesandr,
@よよ実際にはありません。フロントエンドスタックだけであらゆる種類のHTML + SVGからPDFを印刷するための適切な解決策はありません。しかし、いくつかの単純なWebページで機能するように設定することもできます。あなたはおそらくPDF印刷機能のためにPhantomjsを使うべきです、それはずっと安定していますが追加のサーバーを必要とします。また、公開URLを提供してpdfを取り戻すことができるオンラインサービスもあります。また、フロントエンド用のpdf-printing libを書いても構いません:)
追加された 著者 kashesandr,

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

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 {};
    }
1
追加された
それはそれがそれがあったものよりそれを良くするけれどもそれはまだそれを完全に完璧にするわけではないことに注意してください。
追加された 著者 foreyez,
JavaScript - 日本のコミュニティ
JavaScript - 日本のコミュニティ
2 参加者の

日本人コミュニティのjavascript