<p>html2canvasは、要素にある画像をレンダリングしません</p>

やあ。
私はまったく同じ問題を抱えています。

ここで同じ問題。
ツイートを撮ろうとしていますが、添付画像が届きません。
画像添付。

他のサイトの画像は「HTML5キャンバスを汚染する」ため、デフォルトでブロックされていると思います。 レンダラーを呼び出すときに使用する必要のあるオプションは次のとおりです。

属性：allowTaint
タイプ：ブール値
デフォルト：false
説明：クロスオリジン画像がキャンバスを汚染することを許可するかどうか

ここでそれを見つけました： https：//html2canvas.hertzen.com/documentation.html。

同じ問題...
と私の画像は同じ元から来ています

同じ問題に直面しました。問題を解決する最善の方法は、サーバーでプロジェクトを実行して結果を確認することです。
私の場合、以前はサーバーなしでhtmlファイルを直接実行していましたが、少しグーグルした後、サーバーで試すための解決策が得られました。
Visual Studioを使用してプロジェクトを試しましたが、プロジェクトは完全に実行されていました。divタグ内の画像もコピーされていました。

オプションallowTaintを挿入して、すべての画像をスクリーンショットに表示します

html2canvas(document.getElementById('invoice-panel'), { letterRendering: 1, allowTaint : true, onrendered : function (canvas) { } });

にdiv要素のリストがあります。
各divをidでキャプチャしようとすると、divの半分の部分がキャプチャされ、divのキャプチャ画像の一部が空白になります。
何が問題なのか、どうすれば修正できるのか教えていただけますか。 @

同じ問題。解決策をありがとう。

html2canvasは、srcで指定されたimgesをbase64形式で変換しません。 ログを印刷しました。 親切に助けて

1283ms html2canvas：複製されたドキュメントhtml2canvas.js：1487
3936ms html2canvas：サイズ601 x965の初期化されたCanvasRendererhtml2canvas.js：1487
3937ms html2canvas：NodeParserの開始html2canvas.js：1487
4014ms html2canvas：フェッチされたノード、合計：10 html2canvas.js：1487
4015ms html2canvas：オーバーフロークリップを計算しますhtml2canvas.js：1487
4034ms html2canvas：画像の取得を開始しますhtml2canvas.js：1487
4044ms html2canvas：画像＃1を追加data：image / jpeg; base64 、/ 9j / 4AAQSkZJRgABAQAAAQABAAD / 2wBDAA0JCgsKCA0LCgsODg0PEyAVExISEyccHhcgLikxMC4pL html2canvas.js：1487
4047ms html2canvas：画像＃2を追加data：image / jpeg; base64 、/ 9j / 4AAQSkZJRgABAQAAAQABAAD / 2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aH html2canvas.js：1487
4051ms html2canvas：画像の検索が終了しましたhtml2canvas.js：1487
4052ms html2canvas：正常に読み込まれた画像＃1
ImageContainer {src： " data：image / jpeg; base64 、/ 9j/4AAQSkZJRgABAQAAAQABAAD…AKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigD/2Q =="、image：img、tainted：null、promise：h}
html2canvas.js：1487
4056ms html2canvas：正常に読み込まれた画像＃2
ImageContainer {src： " data：image / jpeg; base64 、/ 9j/4AAQSkZJRgABAQAAAQABAAD…4PXOaUMB0/GlrcdiYtkcc / WkzjqfwqMPxzxRvAz3oSCx // 9k ="、image：img、tainted：null、promise：h}
html2canvas.js：1487
4059ms html2canvas：画像が読み込まれ、html2canvas.js：1487の解析が開始されました
4060ms html2canvas：スタッキングコンテキストの作成html2canvas.js：1487
4064ms html2canvas：スタッキングコンテキストの並べ替えhtml2canvas.js：1487
4066ms html2canvas：9つのアイテムで作成されたレンダリングキューhtml2canvas.js：1487
4104ms html2canvas：レンダリングが終了しましたhtml2canvas.js：1487
4109ms html2canvas：キャンバスのトリミング：左：28上：529幅：545高さ：0 html2canvas.js：1487
4111ms html2canvas：幅545、高さ0、x28およびy529の結果の作物

html2canvsasはbase64srcで指定された画像をレンダリングせず、呼び出しは「onrendered」に戻りません
関数。 親切に助けて

1283ms html2canvas：複製されたドキュメントhtml2canvas.js：1487
3936ms html2canvas：サイズ601 x965の初期化されたCanvasRendererhtml2canvas.js：1487
3937ms html2canvas：NodeParserの開始html2canvas.js：1487
4014ms html2canvas：フェッチされたノード、合計：10 html2canvas.js：1487
4015ms html2canvas：オーバーフロークリップを計算しますhtml2canvas.js：1487
4034ms html2canvas：画像の取得を開始しますhtml2canvas.js：1487
4044ms html2canvas：画像＃1を追加data：image / jpeg; base64 、/ 9j / 4AAQSkZJRgABAQAAAQABAAD / 2wBDAA0JCgsKCA0LCgsODg0PEyAVExISEyccHhcgLikxMC4pL html2canvas.js：1487
4047ms html2canvas：画像＃2を追加data：image / jpeg; base64 、/ 9j / 4AAQSkZJRgABAQAAAQABAAD / 2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aH html2canvas.js：1487
4051ms html2canvas：画像の検索が終了しましたhtml2canvas.js：1487
4052ms html2canvas：正常に読み込まれた画像＃1
ImageContainer {src： " data：image / jpeg; base64 、/ 9j/4AAQSkZJRgABAQAAAQABAAD…AKKKKACiiigAooooAKKKKACiiigAooooAKKKKACiiigD/2Q =="、image：img、tainted：null、promise：h}
html2canvas.js：1487
4056ms html2canvas：正常に読み込まれた画像＃2
ImageContainer {src： " data：image / jpeg; base64 、/ 9j/4AAQSkZJRgABAQAAAQABAAD…4PXOaUMB0/GlrcdiYtkcc / WkzjqfwqMPxzxRvAz3oSCx // 9k ="、image：img、tainted：null、promise：h}
html2canvas.js：1487
4059ms html2canvas：画像が読み込まれ、html2canvas.js：1487の解析が開始されました
4060ms html2canvas：スタッキングコンテキストの作成html2canvas.js：1487
4064ms html2canvas：スタッキングコンテキストの並べ替えhtml2canvas.js：1487
4066ms html2canvas：9つのアイテムで作成されたレンダリングキューhtml2canvas.js：1487
4104ms html2canvas：レンダリングが終了しましたhtml2canvas.js：1487
4109ms html2canvas：キャンバスのトリミング：左：28上：529幅：545高さ：0 html2canvas.js：1487
4111ms html2canvas：幅545、高さ0、x28およびy529の結果の作物

@SebasAlvarez - allowTaintオプションは機能しなくなりました。 それはまだあなたのために働きますか？

@SebasAlvarez 、 @ sandeepnagra ：
新しいタブの画像のスクリーンショットにこのコードを使用していますが、画像はレンダリングされていません。また、「 llowTaint：true 」で疲れています。同じウィンドウ内でのみ機能し、新しいタブでは機能しません。
これは私のコードです：
関数render（）{
html2canvas（document.body、{allowTaint：true、
onrendered：function（canvas）{
document.body.appendChild（canvas）;
window.open（canvas.toDataURL（））;
}
}）;
}
何が問題なのか教えていただけますか、どうすればこれを修正できますか？

@venkateshduddu-スクリーンショットを撮る前に、まずフォーカスを新しいタブに移していますか？

@sandeepnagra -sandeepはなく、クリックイベントを使用しているだけです。 ローカル画像パスを使用しているが、サーバーパスが新しいタブで機能しない場合、もう1つスクリーンショットが機能します。

@venkateshduddu-クリックイベントはフォーカスを新しいタブに自動的にシフトしません。それをトリガーする必要があります。 それで、最初にそれを試してください、私はそれがあなたの問題を解決すると100％確信しています。

サーバーパスに関して、そのネットワークドライブは認証されていますか？ はいの場合、ファイルをネットワークドライブにアップロードする前に認証していますか？ それらをS3バケットにアップロードする場合は、まったく別の話になります。

こんにちは、内部IPカメラでiframeをスクリーニングしようとすると、無効な画像が返されます。手伝ってもらえますか？

allowTaintを使用した場合、ダウンロードオプションが機能しませんでした。 助けてください

同じ問題...
と私の画像は同じ元から来ています

この問題を修正しました。
plsはオプション「useCORS」を「true」に有効にします
以下のコード：
html2canvas( document.querySelector(".preview_area"), { logging: true, letterRendering: 1, // allowTaint: false useCORS: true } ).then(canvas => { })

@Sotyoyoさん、どうもありがとうございました。私のバグは上記のコードで修正されました。 ありがとうありがとう

@Sotyoyoどうもありがとう、神はあなたを祝福します<3

@Sotyoyoどうもありがとうございました、私のためにその仕事:)

画像がレンダリングされない私のコードに問題はありますか？

html2canvas（document.getElementById（ "html-2-pdfwrapper"）、{
ロギング：true、
letterRendering：1
allowTaint：false、
useCORS：true、
onrendered：function（canvas）{
var img = canvas.toDataURL（'image / png'）;
var doc = new jsPDF（）;
doc.addImage（img、'JPEG'、20、20）;
doc.save（'test2.pdf'）;
}
}）;

同じ問題...
と私の画像は同じ元から来ています

この問題を修正しました。
plsはオプション「useCORS」を「true」に有効にします
以下のコード：
html2canvas( document.querySelector(".preview_area"), { logging: true, letterRendering: 1, // allowTaint: false useCORS: true } ).then(canvas => { })

その仕事！ どうも！

同じ問題...
と私の画像は同じ元から来ています

この問題を修正しました。
plsはオプション「useCORS」を「true」に有効にします
以下のコード：
html2canvas( document.querySelector(".preview_area"), { logging: true, letterRendering: 1, // allowTaint: false useCORS: true } ).then(canvas => { })

そうです/

html2canvas（document.querySelector（ "＃id-of-element"）、{logging：true、letterRendering：1、allowTaint：false、useCORS：true}）。then（canvas => {
var imgData = canvas.toDataURL（'image / jpeg'）;
}）;

オプションallowTaintを挿入して、すべての画像をスクリーンショットに表示します

html2canvas(document.getElementById('invoice-panel'), { letterRendering: 1, allowTaint : true, onrendered : function (canvas) { } });

ありがとう。 それはうまくいきます。

しかし、画像スタイルをキャンバスに複製することはできません

上記のオプションを使用した後でも、同じ問題に直面しています。以下は私のコードです。
var element = document.querySelector（ "＃map-image-id"）;
html2canvas（element、{
ロギング：true、
letterRendering：1
allowTaint：false、
useCORS：true
}）。then（canvasElm => {
var imageType = "image / png";
var imageData = canvasElm.toDataURL（imageType）;
var src = encodeURI（imageData）;
console.log（ "src"、src）;
console.log（ "画像データ"、imageData）;

上記のオプションを使用した後でも、同じ問題に直面しています。以下は私のコードです。
var element = document.querySelector（ "＃map-image-id"）;
html2canvas（element、{
ロギング：true、
letterRendering：1
allowTaint：false、
useCORS：true
}）。then（canvasElm => {
var imageType = "image / png";
var imageData = canvasElm.toDataURL（imageType）;
var src = encodeURI（imageData）;
console.log（ "src"、src）;
console.log（ "画像データ"、imageData）;

あなたもね。 あなたはそれを解決しましたか？

上記のオプションを使用した後でも、同じ問題に直面しています。以下は私のコードです。
var element = document.querySelector（ "＃map-image-id"）;
html2canvas（element、{
ロギング：true、
letterRendering：1
allowTaint：false、
useCORS：true
}）。then（canvasElm => {
var imageType = "image / png";
var imageData = canvasElm.toDataURL（imageType）;
var src = encodeURI（imageData）;
console.log（ "src"、src）;
console.log（ "画像データ"、imageData）;

私と同じ問題

同じ問題が発生しています。 私は何が間違っているのですか？

html2canvas(document.getElementById(<id>), {
    logging: true,
    letterRendering: 1,
    allowTaint: false,
    useCORS: true
}).then(result => {
    var img = result.toDataURL("image/png");
    savePng(img);
});

<img src-"..." />を含めたい場合は、以下も機能します。

html2canvas(report, {letterRendering: 1, allowTaint: true, useCORS: true})
            .then((canvas) => {      
                const imgData = canvas.toDataURL('image/png');
               // const pdf = new jsPDF();
               // pdf.addImage(imgData, 'PNG', 10, 10);
                //pdf.save("foo.pdf");  
            });

私のコンテンツには、Aws.s3（）からの画像が含まれています。 上記のコメントは私の場合は機能しません。

html2canvas（content、{letterRendering：1、allowTaint：false、useCORS：true}）
.then（canvas => {
const imgData = canvas.toDataURL（'image / png'）;
console.log（imgData）;
const pdf = new jsPDF（）;
pdf.addImage（imgData、'PNG'、10、10、canvas.width、canvas.height）;
pdf.save（'download.pdf'）;
}）;

出力キャンバスには、画像ではなく空白のボックスのみが含まれます。 誰かが私の場合の解決策を持っていますか？

私のコンテンツには、Aws.s3（）からの画像が含まれています。 上記のコメントは私の場合は機能しません。

html2canvas（content、{letterRendering：1、allowTaint：false、useCORS：true}）
.then（canvas => {
const imgData = canvas.toDataURL（'image / png'）;
console.log（imgData）;
const pdf = new jsPDF（）;
pdf.addImage（imgData、'PNG'、10、10、canvas.width、canvas.height）;
pdf.save（'download.pdf'）;
}）;

出力キャンバスには、画像ではなく空白のボックスのみが含まれます。 誰かが私の場合の解決策を持っていますか？

ここで同じ問題。 S3バケットからの画像

同じ問題...
と私の画像は同じ元から来ています

この問題を修正しました。
plsはオプション「useCORS」を「true」に有効にします
以下のコード：
html2canvas( document.querySelector(".preview_area"), { logging: true, letterRendering: 1, // allowTaint: false useCORS: true } ).then(canvas => { })

ありがとう
それは私のために働きます❤❤

起点' http：// localhost ：3000'からの' https：// image / logo link'での画像へのアクセスは、CORSポリシーによってブロックされています：'Access-Control-Allow-Origin'ヘッダーが要求されたリソースに存在しません。
これが私のロゴがPDFファイルに表示されない理由です。
cssを適用してすべてのテキストを休ませると、静的フォルダーにあるブランドロゴが表示されます。
2週間以上からこれを試しているこのIamの助けが必要な答えをしてください。

ここに来る人にとって、多くのことを試した後、外部リソース（S3バケットなど）から画像を取得するには、html2canvasに対してuseCORS = trueを有効にし、S3から提供される画像に対してCORSポリシーを有効にする必要があることがわかりました。

html2canvasプロキシを使用して解決しました。 使用法とテストの詳細については、こちらをご覧ください。
https://github.com/zeusstl/html2canvas-proxy-nodejs