Html2canvas: toDataURLを介して生成された画像の解像度を上げる方法

他の問題/リクエストのある時点でこれについての話があり、誰かがプルリクエストを送信したことは知っていますが、プルリクエストがマージされるのを見たことがありません。

デバイスのピクセル密度をチェックするために使用する作業方法があります。 しかし、これはパフォーマンスに影響を与える可能性があります。 代わりに、より高いdpiでレンダリングするように指示するパラメーターが必要ですか？

@missingええ、DPIを指定するパラメータは素晴らしいでしょう。

また、デバイスのピクセル密度の作業方法を共有してもかまわない場合は、それはすばらしいことです。 私の主なアプリケーションは、最大50語の単語クラウドのpngをエクスポートすることです。 だから私はこれに打撃を与えるパフォーマンスにはあまり関心がありません。

あなたの問題は画像の品質ですか、それともぼやけた効果ですか（場合によっては、いくつかの画像はぼやけた効果を持つhtml2canvasによって生成されます）？

@brcontainer画像の品質が問題だと思います。 私が思うに。 たとえば、100％ズームでは、写真はまともなように見えます。 しかし、5％でもズームすると、写真の品質が著しく低下することがわかります。 添付画像をご覧ください。

私は実行時に問題の例を見ている何かを確信することができるだけです。

http://jsfiddle.net/を使用して同じ場所を試し、ここにリンクを投稿してください。

[編集]
html2canvasによって生成されたキャンバスに_zoom_を適用しようとしている可能性がある場合は、（画像として保存する前に）次を使用してみてください。

ctx.webkitImageSmoothingEnabled = false;
ctx.mozImageSmoothingEnabled = false;
ctx.imageSmoothingEnabled = false;

幸運を

やあ、

96DPIよりも高い解像度が必要です。 300DPIのようなものが必要です。

これはhtml2canvasと関係があるのでしょうか？

画像のぼやけについても同じ問題があります。 ぼやけを取り除き、見栄えの良いDPIを提供するソリューションが必要です。

これがどのように行われるかについての考え/提案、または同じ効果を達成するための代替方法はありますか？

ありがとう

@brcontainer私は今あなたの編集だけです。 私はあなたが提案したことをしましたが、それでも画質はうまくいきませんでした。 これが私がしたことです-

                var ctx = canvas.getContext('2d');

                ctx.webkitImageSmoothingEnabled = false;
                ctx.mozImageSmoothingEnabled = false;
                ctx.imageSmoothingEnabled = false;

                var rawData = canvas.toDataURL("image/png");

順序が間違っている場合は、画像のサイズを変更する前に「ImageSmoothingEnabled」を適用する必要があります。

コードのサンプルをhttp://jsfiddle.netに入れて、編集してみます

こんにちは、みんな、

toDataURLの96dpi制約なしで高解像度の画像をアップロードしたいと思います。 toDataURLHDはまだ利用できないので、どうすれば私の夢を実現できますか？ :-)

ヒントを事前に感謝します

@brcontainer画像のサイズをまったく変更していないため、サイズを変更する前にスムージングを適用することの意味がわかりません。 いずれにせよ、私はあなたがhttp://jsfiddle.net/tankchintan/92mra/4/を見るためにjsfiddleを作成しました

これが解決されるのを本当に楽しみにしています！ :)

あなたが混乱している友人、サイズ変更しなければならないtoDataURLがあります、あなたはCANVASサイズを変更しなければなりません。
例を作成しようとしていますが、それでも機能しません。

やあ、

私はより良い画質のためにこれらの提案に従おうとしていますが、それも私にはわかりません。

brcontainer、あなたが話しているアイデアで、tankchintanが作成したJSフィドルを明確にしたり、変更/作成したりすることは可能ですか？ これは私には意味がありません。2倍のサイズで画像を作成しても、画像を192 DPIに変換した後も、画像のピクシレーションは残ります。

こんにちは皆さん、この問題について他にフィードバックはありますか？ 品質/解像度を上げるためにzoomFactor設定できるPhantomJSのようなものと比較して、html2canvasで非常にプロの画質を体験しています。

同様の問題があります。 WebページのスナップショットをPDFドキュメントに取得する必要があります。このドキュメントでは、html2canvasを使用してdivを画像に変換してから、iTextsharpを使用して画像をPDFに追加します。 ただし、生成された画像は少しぼやけているように見え、目で常に見ることが困難になります。 html2canvasで作成時に指定した解像度の画像を作成できるかどうか知りたいです。

やあ、
上記とまったく同じ要件があります。 と同じ問題が直面しています。
「WebページのスナップショットをPDFドキュメントに取得します。このドキュメントでは、html2canvasを使用してdivを画像に変換してから、画像をPDFに追加します。」
ただし、生成された画像は少しぼやけているように見えます。

上記の提案に従いましたが、それでもぼやけた画像が表示されます。
ここに私のコードで：html2canvasはシステムの解像度に基づいてウェブページのスナップショットを生成します。
Iamは、システムの解像度に基づいて、異なるサイズで同じWebページの「スナップショット」を取得しています。

例 ：
画像サイズ：816x422
画像サイズ：1193x437
画像サイズ：1275x437
ここで私の期待は：2000 x1784寸法以上です。

この画像の寸法を取得することは可能ですか。
貴重なご提案をいただき、貴重な時間をありがとうございました。

このために+1。 PDFに挿入するhtml2canvasを含む画像を取得しようとしていますが、品質がぼやけています。

より高い解像度でエクスポートしたい要素に対して、parentNodeでCSS変換行列を使用してみましたか？ これは私にとってはうまくいきます。 例：「transform：scale（2、2）」

@mudcubeは私のために部分的に

@brcontainerそれは私のためにうまく働いています

解決策はありますか？ ぼやけた画像の解像度を高める方法を共有してください私はそれのPDFを作成する必要があります

+1これに対する解決策/ガイドラインはまだありますか？

解決策が見つかりましたか？

みんな、それがうまくいくtransform: scale(2, 2)使用してください。

詳細を教えていただけますか？

スクリーンショットを作成する直前の@matiasinsaurraldeは、 cssルールを含むcssクラス.x2を要素に追加し、 html2canvasコールバックでそのクラスを削除します。 ダブルサイズの要素とダブルサイズのスクリーンショットも表示されます。 また、シームレスであるため、サイズ変更が発生しない可能性があります。

私があなたの提案

スケールは私にとって解像度を上げませんでした。 JSで解決しなければなりませんでした-
https://github.com/niklasvh/html2canvas/issues/379

運がいい人はいますか？

transform: scale(2, 2);もdygraph.jsのソリューションではありません

@premerddyn 、リンクされた問題の私の解決策を参照してください。
うまく機能していますが、スクリーンショットの前に拡大する必要があります。
コメントが明確でない場合は、さらに説明を追加します

私がやったことは、2倍のサイズのdivを作成して可視性を崩壊させ、ここにあるすべてのコンテンツをそのdivに投稿してスクリーンショットを撮ったことです。そうすれば、画像の鮮明さが失われることはなく、フォントサイズのコードを微調整して作成しました。私はこれをうまく機能させますが、私の問題はテキストストロークと複数行のテキスト背景にあります。

2によるスケーリングは私にとってはうまくいきますが、レンダリングはウィンドウの解像度/サイズによって制限されることがわかりました。 スケーリングされたdivがウィンドウよりも広い場合、その一部が切り取られます

それで、画面よりも大きいキャンバスをキャプチャする方法はありませんか？

ああ、このスレッドから：

var h = $(element)[0].ownerDocument.defaultView.innerHeight;
    $(element)[0].ownerDocument.defaultView.innerHeight = $(element).height();
    html2canvas($(element)).then(function(canvas) {
        $(element)[0].ownerDocument.defaultView.innerHeight = h;
        //Do whatever you want with your canvas
    }

https://jsfiddle.net/enjoythedaycsk/9L966sdd/1/

この例で高解像度のものを実現しようとしましたが、うまくいきませんでした...

ダウンロードpngx2ボタンをクリックします。

ボタンをクリックするとキャンバスが2倍のサイズになり、写真がキャプチャされてから再びキャンバスが通常のサイズに戻るなど、バックエンドで操作を実行することはできますか？

確かに、あなたはそれを行うことができます。 使用したいサイズのキャンバスをトリガーします
提供されるコード。 値の取得が不正確になる可能性があることがわかったので、
幅/高さを直接設定します。

2016年5月7日（土曜日）には、enjoytheday [email protected]は書きました：

https://jsfiddle.net/enjoythedaycsk/9L966sdd/1/

この例で高解像度のものを達成しようとしましたが、得られませんでした
それ...

ダウンロードpngx2ボタンをクリックします。

ボタンがクリックされたときのようにバックエンドで操作を行うことは可能ですか？
キャンバスはそのサイズの2倍になり、写真がキャプチャされてから再び
キャンバスは通常のサイズに戻されます。

—
あなたがコメントしたのであなたはこれを受け取っています。
このメールに直接返信するか、GitHubで表示してください
https://github.com/niklasvh/html2canvas/issues/241#issuecomment -217634634

世界最長の継続的なイラスト
ForeverScape.com http://www.foreverscape.com/ | @foreverscape
https://twitter.com/foreverscape | Githubで
https://github.com/vance/foreverscapecore | ニュースで
http://www.foreverscape.com/art/reviews/

@vanceこれをjsfiddleの例で設定できますか？

https://jsfiddle.net/enjoythedaycsk/9L966sdd/1/

私は試しましたが、それは私によって設定されていません。

完全に編集することも、新しいものを作成することもできます。

それは多くの：dancerに役立ちます：

すぐにモックアップしようとしましたが、テストdivを修正する時間がありませんでした。 transform:scale()何かをキャプチャしても、divの内部の高さは影響を受けないため、何も起こりません。 それが変革である理由です。 これは、プロパティが（内部的に）変更されていないため、 getBoundingClientRect()取得することでテストできます。 親のコンテキストで表示した場合、幅/高さは_実際に_変更されるだけです。 スケーリングした後、コンテナdivを取得する必要があります。

https://jsfiddle.net/jano9ao4/1/

同じ問題に直面していますが、実行可能な解決策はありますか？ヾ（ ´・・｀｡）ノ」

ウィンドウよりも大きな要素をキャプチャするために、それを機能させることができました。 変換された要素から単純に「より大きな」画像を取得することはできません。これは、（それ自体に対して）同じサイズのままであるためです。

私はiframeで自分のことをし、base64データをメッセージとして送り返す必要がありました...次のことを行うとウィンドウのサイズ変更イベントが中断するためです。

再びコメント付き：

   //store the original size
    var h = $(element)[0].ownerDocument.defaultView.innerHeight;
    var w = $(element)[0].ownerDocument.defaultView.innerWidth;

   //set the document to the element's size
    $(element)[0].ownerDocument.defaultView.innerHeight = $(element).height();
    $(element)[0].ownerDocument.defaultView.innerWidth = $(element).width();

    html2canvas($(element)).then(function(canvas) {
        //restore the document size
        $(element)[0].ownerDocument.defaultView.innerHeight = h;
        $(element)[0].ownerDocument.defaultView.innerWidth = w;
        //Do whatever you want with your canvas
    }

html2canvasを使用してHTML要素から高DPIスクリーンショットを簡単に取得するために、次の関数を作成しました。

• 高さまたは幅が制約されている場合（たとえば、固定されたボディ幅がある場合）、処理中に制約を削除する必要があります-ソース要素は、目的のスケールまで成長できる必要があります
• srcElは既存の要素である必要があります
• destIMGは既存の（空の）画像要素である必要があります
• dpiは96の倍数である必要があります

var makeHighResScreenshot = function(srcEl, destIMG, dpi) {
    var scaleFactor = Math.floor(dpi / 96);
    // Save original size of element
    var originalWidth = srcEl.offsetWidth;
    var originalHeight = srcEl.offsetHeight;
    // Save original document size
    var originalBodyWidth = document.body.offsetWidth;
    var originalBodyHeight = document.body.offsetHeight;

    // Add style: transform: scale() to srcEl
    srcEl.style.transform = "scale(" + scaleFactor + ", " + scaleFactor + ")";
    srcEl.style.transformOrigin = "left top";

    // create wrapper for srcEl to add hardcoded height/width
    var srcElWrapper = document.createElement('div');
    srcElWrapper.id = srcEl.id + '-wrapper';
    srcElWrapper.style.height = originalHeight*scaleFactor + 'px';
    srcElWrapper.style.width = originalWidth*scaleFactor + 'px';
    // insert wrapper before srcEl in the DOM tree
    srcEl.parentNode.insertBefore(srcElWrapper, srcEl);
    // move srcEl into wrapper
    srcElWrapper.appendChild(srcEl);

    // Temporarily remove height/width constraints as necessary
    document.body.style.width = originalBodyWidth*scaleFactor +"px";
    document.body.style.height = originalBodyHeight*scaleFactor +"px";

    window.scrollTo(0, 0); // html2canvas breaks when we're not at the top of the doc, see html2canvas#820
    html2canvas(srcElWrapper, {
        onrendered: function(canvas) {
            destIMG.src = canvas.toDataURL("image/png");
            srcElWrapper.style.display = "none";
            // Reset height/width constraints
            document.body.style.width = originalBodyWidth + "px";
            document.body.style.height = originalBodyHeight + "px";
        }
    });
};

使用法：

var src = document.getElementById("screenshot-source");
var img = document.getElementById("screenshot-img");
makeHighResScreenshot(src, img, 192); // DPI of 192 is 4x resolution (2x normal DPI for both width and height)

これを行うと、window.onresizeイベントハンドラーも破損することがわかりましたか？ このため、これらすべてをiframe内で実行し、parent.window.postMessage（data）を使用して結果をポストバックしてコンテンツを返す必要がありました。 これはモバイルアプリであるため、私にとってのみ重要であり、サイズを大きくすることが重要です。

@vance ：私の場合、これらのものは必要ないか、使用していません。実際には、HTMLからPDFへのレンダラーのバグを回避するためにこれを使用しています。 私はあなたの方法の完全な例を見たいと思います、それはより柔軟に思えます。

ボディのサイズを変更する必要のない高解像度の画像を取得する別の方法を考え出しました。 ただし、html2canvasのバグ（＃790、＃820、＃893、＃922など）のため、ソース要素を絶対的に配置する必要があります。 @MisterLambの網膜コードに基づいてい

function takeHighResScreenshot(srcEl, destIMG, scaleFactor) {
    // Save original size of element
    var originalWidth = srcEl.offsetWidth;
    var originalHeight = srcEl.offsetHeight;
    // Force px size (no %, EMs, etc)
    srcEl.style.width = originalWidth + "px";
    srcEl.style.height = originalHeight + "px";

    // Position the element at the top left of the document because of bugs in html2canvas. The bug exists when supplying a custom canvas, and offsets the rendering on the custom canvas based on the offset of the source element on the page; thus the source element MUST be at 0, 0.
    // See html2canvas issues #790, #820, #893, #922
    srcEl.style.position = "absolute";
    srcEl.style.top = "0";
    srcEl.style.left = "0";

    // Create scaled canvas
    var scaledCanvas = document.createElement("canvas");
    scaledCanvas.width = originalWidth * scaleFactor;
    scaledCanvas.height = originalHeight * scaleFactor;
    scaledCanvas.style.width = originalWidth + "px";
    scaledCanvas.style.height = originalHeight + "px";
    var scaledContext = scaledCanvas.getContext("2d");
    scaledContext.scale(scaleFactor, scaleFactor);

    html2canvas(srcEl, { canvas: scaledCanvas })
    .then(function(canvas) {
        destIMG.src = canvas.toDataURL("image/png");
        srcEl.style.display = "none";
    });
};

使用法：

var src = document.getElementById("screenshot-src");
var img = document.getElementById("screenshot-img");
takeHighResScreenshot(src, img, 2); // This time we provide desired scale factor directly, no more messing with DPI

編集：提案のための@ jason-o-maticのおかげで、実際に要素を移動してマージンを調整する代わりに、絶対位置を使用してハッキングを減らしました。

これは最新バージョン（0.5.0-alpha）で動作します。 0.4.1ではありません

0.4.1でこの問題を解決したい場合は、キャンバスのサイズを試してみる必要があります。

@airdrummingfoolの修正を使用している人への簡単なメモ（これはうまく機能します）...

xtreeのどれだけ上にあるかに関係なく、スクリーンダンプする要素をラップする「相対」要素を持つことはできません。 スクリーンダンプの期間中は静的に切り替える必要があるため、必要な要素は、周囲のDIVではなく、ウィンドウに対して実際に0,0で表示されます。

これを解決するのに数時間かかったので、誰かが同じ問題を回避するのに役立つことを願っています。

こんにちはみんな、
誰かが@airdrummingfoolソリューションのjsfiddleを持っていますか、私は運がなくて私のプロジェクトにそれを実装しようとしています。 実用的な例は、これがどのように機能するかを理解するのに役立ち、プロジェクトに実装しようとする際に非常に役立ちます。

提供できる支援をありがとうございました。

皆さんこんにちは！ @airdrummingfoolソリューションを使用しようとしています。 しかし、私は1つの厄介なエラーを受け取ります。 画像を取得したい要素の中には、 要素であり、手順を実行すると、img要素は空白になり、srcは無視されます。 どうすればこれを解決できるか知っていますか？ html2canvasで以前にこの問題に直面した人はいますか？

このスレッドに事前に感謝します！ それは私を救っています！ ：NS

編集：画像の半分しかレンダリングされていません。 しかし、解像度は完璧に見えますxD

画像の問題を修正しました!! useCORSが有効になっていませんでした！ しかし、まだ半分の画像しかレンダリングされていません。

素晴らしい！ ハーフイメージは、キャンバス外のレンダリングの問題が原因である可能性があります。 また、 html2canvasに解像度/スケーリングを@ airdrummingfoolソリューションよりも使いやすい場合があります。

それらがhtml2canvasにマージされるまで、これらの両方と他のいくつかのバグ修正を含むカスタムビルドをここで入手でき

こんにちは@eKoopmans。 ご回答有難うございます。 高さを2倍にして、なんとか修正できました。でも、上下に空白のある大きな画像が表示されていると思います...だから...試してみて、数分後に報告します。 ！！

OM（F）G @eKoopmans ..あなたは箱から出して働いた。 どうもありがとう。 そのプルリクエスト...彼らは今それを受け入れるべきです。 html2canvas用のこのdpiオプションを望んでいる人はたくさんいます。

＃1087を支持して閉会

@airdrummingfool ...ありがとうございます。 それは完璧に機能します。

https://github.com/cburgmer/rasterizeHTML.jsを使用でき

最新バージョンのhtml2canvasには、スケーリングのオプションがあります。 本当にうまくいきます。

html2canvas（element、{
スケール：2
}）;

HTMLおよび画像コンテンツからの複数ページのPDFレンダリングの場合、 scale: 1設定すると、解像度の問題が修正されると同時に、画像がPDFの境界を超えないようにすることができます。

私はこれが役立つと思います、私はhtml2canvasを使用しました

downloadpdf（）{
var doc = new jsPDF（{
形式：「a4」
}）;

html2canvas（document.getElementById（ "pdf-doc"）、{
スケール：「5」
}）。then（canvas => {
this.imgFile =キャンバス;
doc.addImage（this.imgFile、 "JPEG"、5、5、200、285）;
doc.save（ "ファイル名" + ".pdf"）;
}）;
}