web-dev-qa-db-ja.com

toDataURLの前に画像を拡大縮小する-html2canvas

これが重複した質問であると言う前に、私が検索したことを知っておいてくださいすべて単一の同様の質問となしそれらのいずれかの回答が私のために働いています。

html2canvasを使用してdivのスナップショットを取得します。必要なのは、canvas.toDataURL()を介してpngに保存する前に、750x105にスケールアップすることです。 。

私が得た最も近いものは、次のコードでした。

html2canvas(document.getElementById('div_id'), {
   onrendered: function(canvas) {

      var extra_canvas = document.createElement("canvas");

        extra_canvas.setAttribute('width', 750);
        extra_canvas.setAttribute('height', 1050);

        var ctx = extra_canvas.getContext('2d');
        ctx.drawImage(canvas, 0, 0, 750, 1050);
        var dataURL = extra_canvas.toDataURL();

        window.open(dataURL);
   }
});

画像のサイズは適切でしたが、画像内のテキストは、サイズが変更されたかのように非常に質が低くなりましたafter pngになりました。

私が何か間違ったことをしているのですか、それともこのようにスケールアップできないのですか？

ありとあらゆる提案/回避策は大歓迎です！

javascripthtmlcssresizehtml2canvas
6
shaneparsons

高解像度の印刷に値するコンテンツをhtmlから取得する方法を疑問に思っている人のために： PhantomJS および wkhtmltopdf/wkhtmltoimage は、これらのことをより適切に処理する優れた代替手段です。

3
shaneparsons

私は少し似たような問題を抱えていました、そしてこれは私がやったことです

html2canvas($('#div_id'), {width: 750, height: 1050}).then(
    function(canvas) {
       window.open(canvas.toDataURL("image/png"));
    }
)

これでも画像がぼやけます（特にテキストの場合）が、これはブラウザのデフォルトのズームが110％に設定されていたため、window.devicePixelRatioが1.1000になりました...ユーザーに警告を表示するだけで整理しました（私がそれを必要とする目的のために働いた）、しかし明らかにそれを解決するより良い方法があります https://stackoverflow.com/a/22819006/460586

2
Antti Vikman

事前に設定された幅と高さに収まるコンテンツがたくさんあると、私の画像でさえピクセル化され、時には窮屈になりました。何時間も検索した後、これから良い解決策を見つけました post 。ズームや目に見えるピクセル化がない場合でも、解像度を十分に維持します。

html2canvas(document.getElementById('div_id'), {
onrendered: function(canvas) {
        var ctx = canvas.getContext('2d');
        ctx.webkitImageSmoothingEnabled = false;
        ctx.mozImageSmoothingEnabled = false;
        ctx.imageSmoothingEnabled = false;
        var myImage = canvas.toDataURL("image/jpeg,1.0");  
       }
 });
0
javatogo