Html2canvas: クロスドメイン画像がレンダリングされない（CORSまたはプロキシなし）

たぶん、 useCORS ptopertyをtrueとして使用する必要があります。これは、クロスドメイン化されたWebコンテンツを対象としています。

useCORSを使用すると、画像の取得に失敗します。 私が抱えている問題は、外部ドメインからの画像の取得に失敗せず、キャプチャでレンダリングされないため、奇妙です。

私の修正を試しましたか？ https://github.com/niklasvh/html2canvas/pull/554

おそらくallowTaintをtrueに設定する必要がありますが、レンダリングされた結果をエクスポートすることはできません。

userCORSまたはproxy使用しない理由がわかりません...これらはこのような問題のために作成されたものです。

@brcontainer最新バージョンでは機能しないため、私の修正を参照してください： //github.com/niklasvh/html2canvas/pull/554

@ Cristy94もちろんです!! 素晴らしい修正です！ ありがとう！

こんにちは@ Cristy94 、

HTMLでCMS（Contentful）から画像を取得し、そのHTMLのPDFを生成しようとしています。
ただし、生成されたPDFには、画像がありません（クロスオリジンの問題のようです）。
この問題を解決する方法を教えてください。
以下は私のコードです-：

関数downloadPDF（）{
var canvasToImage = function（canvas）{
var img = new Image（）;
var dataURL = canvas.toDataURL（ 'image / png'）;
img.crossOrigin = "匿名";
img.src = dataURL;
imgを返す;
};

var canvasShiftImage = function（oldCanvas、shiftAmt）{
shiftAmt = parseInt（shiftAmt）|| 0;
if（！shiftAmt）{return oldCanvas; }

var newCanvas = document.createElement（ 'canvas'）;
newCanvas.height = oldCanvas.height-shiftAmt;
newCanvas.width = oldCanvas.width;
var ctx = newCanvas.getContext（ '2d'）;
ctx.mozImageSmoothingEnabled = false;
ctx.webkitImageSmoothingEnabled = false;
ctx.msImageSmoothingEnabled = false;
ctx.imageSmoothingEnabled = false;

var img = canvasToImage（oldCanvas）;
ctx.drawImage（img、0、shiftAmt、img.width、img.height、0、0、img.width、img.height）;

newCanvasを返します。
};

var canvasToImageSuccess = function（canvas）{
var pdf = new jsPDF（ 'l'、 'px'）、
pdfInternals = pdf.internal、
pdfPageSize = pdfInternals.pageSize、
pdfScaleFactor = pdfInternals.scaleFactor、
pdfPageWidth = pdfPageSize.width、
pdfPageHeight = pdfPageSize.height、
totalPdfHeight = 0、
htmlPageHeight = canvas.height、
htmlScaleFactor = canvas.width /（pdfPageWidth * pdfScaleFactor）、
SafetyNet = 0;

while（totalPdfHeight <htmlPageHeight && SafetyNet <15）{
var newCanvas = canvasShiftImage（canvas、totalPdfHeight）;
pdf.addImage（newCanvas、 'png'、0、0、pdfPageWidth、0、null、 'NONE'）;
// var alias = Math.random（）。toString（35）;
// pdf.addImage（newCanvas、0、0、pdfPageWidth、0、 'png'、alias、 'NONE'）;

totalPdfHeight + =（pdfPageHeight * pdfScaleFactor * htmlScaleFactor）;

if（totalPdfHeight <htmlPageHeight）{
pdf.addPage（）;
}
SafetyNet ++;
}

var pageName = document.location.pathname.match（/ [^ /] + $ /）[0];
pdf.save（pageName + '。pdf'）;
};

html2canvas（$（ 'body'）[0]、
{{
onrendered：function（canvas）{
canvasToImageSuccess（canvas）;
}
}）;
}

ねえ、それに対する修正はありますか？ ここでもレンダリングされていないCORS画像:(

こんにちはルーケフ、

これを行うには、html2canvas関数のオプションの1つを渡します。 そして、これは確かに機能するだろうと私を信じてください:)

html2canvas（$（ '＃div_pdf'）[0]、
{{
useCORS：true、//関数でこのオプションを渡すことにより、ダウンロードされたバージョンのPDFでクロスオリジン画像が適切にレンダリングされます
onrendered：function（canvas）{
canvasToImageSuccess（canvas）;
}
}）;
詳細については、以下のURLにあるhtml2canvasライブラリのドキュメントを参照してください。
https://html2canvas.hertzen.com/documentation.html

こんにちは@ gauravmishra24 、残念ながらこれは機能しません。 問題は、サーバーにフラグが設定されているサーバーからの画像を含めたいことです。

Access-Control-Allow-Origin: *

設定されていません

:(

こんにちはルーケフ、

コードスニペットを投稿していただけませんか？

私が同じものをよりよく見ることができるように.....

やあ、

これに対する修正はありますか？ useCORSをtrueに設定しても、画像はダウンロードされません。 それでも、上記のようにクロスオリジンエラーが発生します。

また、配布されたhtml2Canvas.jsファイルのCristy94のソリューションについてもよくわかりません。 https://github.com/niklasvh/html2canvas/pull/554/commits/87d44359be73075ba4d5f36d6e1c8b88b7444402のように、分散ファイルのコードを変更した後でも機能しません。

プロキシ設定を使用する他の代替手段として、Angular 2アプリケーションの解決策はありますか？
現在のサイト（https://github.com/niklasvh/html2canvas/wiki/Proxies）リストにはありません！

これはまだv1.0.0の問題ですか？ もしそうなら、 jsfiddleで例を共有して

この問題は、元の作成者からの詳細情報の要求に対する応答がなかったため、自動的にクローズされました。 現在問題になっている情報だけでは、行動を起こすのに十分な情報がありません。 さらに調査できるように、必要な回答がある場合はご連絡ください。

@niklasvhこれは、v1.0.0を使用したcodepenでの私の例です。
https://codepen.io/Onlylonger/pen/ppjPKX
同じ質問。 thxあなた

誰かが知っている他のプラグインはありますか？ これは、別のサーバー要求では機能しませんでした。 プロキシの適切な例はありません。

@vinayistarあなたは私の変更を試すことができますリンクhttps://github.com/niklasvh/html2canvas/issues/1544#issuecomment-435640901を参照して

useCORS 、img属性crossOrigin:anonymousを設定します

{ useCORS: false, allowTaint: true }これは私のために働いています

この問題に対する私の解決策は、画像srcをBase64に変換することです

const img = document.querySelector('#img')
fetch(img.src)
  .then(res => res.blob())
  .then(blob => new Promise((resolve, reject) => {
      const reader = new FileReader;
      reader.onerror = reject;
      reader.onload = () => {
        resolve(reader.result);
      };
      reader.readAsDataURL(blob);
    })
  )
  .then(dataURL => {
    img.src = dataURL
    return html2canvas(element)
  } )

@todoiこのサンプルをjspdfで提供できますか。

@ nishanta454
これは私が書いた例です。 html2canvasはクロスオリジン画像をレンダリングします。
この例では、 cors-anywhereを使用して、プロキシイメージリクエストにCORSヘッダーを追加します。

最初に必要なのは、画像ファイルへのクロスオリジンアクセスを許可するように構成されたAccess-Control-Allow-Originヘッダーを使用して画像をホストするように構成されたサーバーです。
CORS_enabled_imageから