Html2canvas: Retinaディスプレイでキャンバスのレンダリングがぼやけている

このライブラリは素晴らしいですが、それも体験しています。 これは＃379、＃373、＃340、＃203、＃312、＃158と同じ問題で、＃390で言及されていると思います。

これに関する更新はありますか？

https://github.com/niklasvh/html2canvas/pull/127ぼやけを修正

未修理

：+1：

+1修正してください

+1のスケーリングとズームのCSSスタイルが正しく機能していませんか？ スクリーンショットを撮ってhtmlをズームすることで解決でき、より鮮明に見えるはずです

+1修正してください

+1修正

@zqcloveping
ブロ、この設定を試してください。100％解決するのではなく、品質を向上させます

html2canvas（document.getElementById（ 'flag'）、{
useCORS：true、
allowTaint：true、
letterRendering：true、
onrendered：function（canvas）{
var ctx = canvas.getContext（ '2d'）;
ctx.webkitImageSmoothingEnabled = false;
ctx.mozImageSmoothingEnabled = false;
ctx.imageSmoothingEnabled = false;
}、
}）;

@breim
Bro、3Qよろしくお願いします。しかし、それはあまり明白ではないようです。網膜デバイスのレンダリングの問題

直してください！

+1修正してください

Plzはそれを修正します、Orz

+1

どうやら、レンダリングに既存のキャンバスを使用できます（網膜に表示されるように事前設定できます）。

例：

var w = 1000;
var h = 1000;
var div = document.querySelector('#divtoconvert');
var canvas = document.createElement('canvas');
canvas.width = w*2;
canvas.height = h*2;
canvas.style.width = w + 'px';
canvas.style.height = h + 'px';
var context = canvas.getContext('2d');
context.scale(2,2);
html2canvas(div, { canvas: canvas }).then(function(canvas) {
    // do what you want
});

@MisterLambソリューションは見事に機能します。

これも直して欲しいです

+1

+1修正

@MisterLamb私はあなたの解決策を試していますが、それを機能させることができないようです。 私は何もしないように見えるあなたの修正でこのフィドルを作成しました-あなたは私が間違っていることを知っていますか？ フィドルのボタンをクリックして、複数のファイルをダウンロードしてテストし、この実装でそれらが同一であることを確認できます。

@MisterLamb ahが0.5.0-alpha1に変更され、より適切に

+1

@MisterLamb et alは、今日試したばかりですが、このスニペットは0.5.0 b4では機能しなくなりました（空のキャンバスを取得します）。独自のキャンバスを使用しない場合は正しくレンダリングされます。

編集：おそらく私のバグ、変更されたフィドルは大丈夫です。

編集2：それを絞り込むことができず、このように再実装されました。

編集3：はい、オフセットを取り除くためにそれをdocument.bodyに移動する必要がありました。

@MisterLambあなたは本当の天才です、共有してくれてありがとう...それは私の日を救った

@MisterLambあなたは最高です👍

@makc私も！ 空のキャンバスを取得します-独自のキャンバスを使用していない場合は正しくレンダリングされます。

参考までに- https ：

＃1087を支持して閉会

@MisterLambしかし、画像の解像度を向上させる方法は??
この画像を96dpiで保存しようとすると、300dpi以上の画像が必要になります。 どのように私はこれを行うことができますか？

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

// html2canvasを呼び出す前に、90％にズームインしてから、100％にズームバックします。

document.body.style.zoom = '99％ ';
html2canvas（document.querySelector（ "＃content"）、{allowTaint：false、widht：_width、height：_height}）。then（function（canvas）{

    // var pdf = new jsPDF('p','pt','a4');
    // pdf.addImage(canvas.toDataURL("image/png"), 'PNG', 10, 10, 580, 0)                            
    // pdf.save('Grafico.pdf');        
    var link = document.createElement('a');
    link.href = canvas.toDataURL("image/png");
    link.download = 'Dashboard.png';
    document.body.appendChild(link);
    link.click();
    link.style.display = 'none';
    document.body.removeChild(link)        
    document.body.style.zoom = '100%';        
    $('.preloader-wrapper').hide();
});

@MisterLamb上記のソリューションは、htmlページのテキストに対して機能します。 テキストを表示している間、それは画像のテキストを見事に変換します。 しかし、htmlページの画像コンテンツ（画像）はまだぼやけて表示されています。 どうすれば修正できるか教えてください。

私にとっても画像はまだぼやけています。

window.devicePixelRatio = 2;

私はhtml2canvasをする前にこれを置きました、そしてそれは私のために働きました

こんにちは、ペルシア語のテキストutf8を入力したいのですが、フォントが失敗します
この問題を解決する方法

http://jsfiddle.net/o0a8pbwd/1/コードを使用

なぜこの絵は知らないのですか？