キャンバスを画像に保存したい。私はこの機能を持っています：

function save() {
    document.getElementById("canvasimg").style.border = "2px solid";
    var dataURL = canvas.toDataURL();
    document.getElementById("canvasimg").src = dataURL;
    document.getElementById("canvasimg").style.display = "inline";
}

それは私にエラーを与えます：

Uncaught SecurityError： 'HTMLCanvasElement'で 'toDataURL'を実行できませんでした：汚染されたキャンバスはエクスポートされない可能性があります。

私は何をすべきか？

セキュリティ上の理由から、ローカルドライブは「その他のドメイン」であると宣言され、キャンバスを汚染します。

（これは、最も機密性の高い情報がローカルドライブにある可能性が高いためです。）

テスト中に次の回避策を試してください。

• ページに関連するすべてのファイル（.html、.jpg、.js、.cssなど）をデスクトップ（サブフォルダーではなく）に置きます。

• クロスドメイン共有をサポートするサイト（dropbox.comなど）に画像を投稿します。ドロップボックスのパブリックフォルダーに画像を配置し、画像をダウンロードするときにクロスオリジンフラグも設定してください（var img = new Image（）; img.crossOrigin = "anonymous" ...）

• 開発用コンピューターにWebサーバーをインストールします（IISサーバーとPHP Webサーバーには、ローカルコンピューターで問題なく動作する無料版があります）。

imgタグで、crossoriginをAnonymousに設定します。

<img crossorigin="anonymous"></img>

誰かが私の答えを見た場合、あなたはおそらくこの状態にあります：

1. openlayers（バージョン> = 3）を使用してキャンバスでマップスクリーンショットを取得しようとします
2. マップをエクスポートする例を表示しました
3. ol.source.XYZを使用してマップレイヤーをレンダリングします

ビンゴ！

ol.source.XYZ.crossOrigin = 'Anonymous'を使用して混乱を解決します。または次のコードのように：

     var baseLayer = new ol.layer.Tile({
         name: 'basic',
         source: new ol.source.XYZ({
             url: options.baseMap.basic,
             crossOrigin: "Anonymous"
         })
     });

ctx.drawImage()関数を使用している場合は、次のことができます。

var img = loadImage('../yourimage.png', callback);

function loadImage(src, callback) {
    var img = new Image();

    img.onload = callback;
    img.setAttribute('crossorigin', 'anonymous'); // works for me

    img.src = src;

    return img;
}

そして、コールバックでは、使用ctx.drawImageしてエクスポートできるようになりましたtoDataURL

私の場合、ビデオからキャンバスタグに描画していました。汚染されたキャンバスエラーに対処するには、2つのことを行う必要がありました。

<video id="video_source" crossorigin="anonymous">
    <source src="http://crossdomain.example.com/myfile.mp4">
</video>

• Access-Control-Allow-Originヘッダーがビデオソースレスポンスに設定されていることを確認します（crossdomain.example.comの適切な設定）
• 動画タグにcrossorigin = "anonymous"を設定します

正しいAccess-Control-Allow-Originヘッダーが設定されていないURLの画像を使用しているため、問題が発生しているようです。サーバーからその画像をフェッチし、サーバーから取得して、CORSの問題を回避できます。

useCORS: trueオプションを使用して問題を解決しました

 html2canvas(document.getElementsByClassName("droppable-area")[0], { useCORS:true}).then(function (canvas){
        var imgBase64 = canvas.toDataURL();
        // console.log("imgBase64:", imgBase64);
        var imgURL = "data:image/" + imgBase64;
        var triggerDownload = $("<a>").attr("href", imgURL).attr("download", "layout_"+new Date().getTime()+".jpeg").appendTo("body");
        triggerDownload[0].click();
        triggerDownload.remove();
    });

MDNの[CORS enabled image] [1]をご覧ください。基本的には、適切なAccess-Control-Allow-Originヘッダーを持つ画像をホストするサーバーが必要です。

<IfModule mod_setenvif.c>
    <IfModule mod_headers.c>
        <FilesMatch "\.(cur|gif|ico|jpe?g|png|svgz?|webp)$">
            SetEnvIf Origin ":" IS_CORS
            Header set Access-Control-Allow-Origin "*" env=IS_CORS
        </FilesMatch>
    </IfModule>
</IfModule>

これらの画像は、ドメインから提供されているかのようにDOMストレージに保存できます。そうしないと、セキュリティの問題が発生します。

var img = new Image,
    canvas = document.createElement("canvas"),
    ctx = canvas.getContext("2d"),
    src = "https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png"; // insert image url here

img.crossOrigin = "Anonymous";

img.onload = function() {
    canvas.width = img.width;
    canvas.height = img.height;
    ctx.drawImage( img, 0, 0 );
    localStorage.setItem( "savedImageData", canvas.toDataURL("image/png") );
}
img.src = src;
// make sure the load event fires for cached images too
if ( img.complete || img.complete === undefined ) {
    img.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==";
    img.src = src;
}

ローカルサーバーを作成する場合は、@ markEの答えに基づいて構築します。ローカルサーバーではこのエラーは発生しません。

コンピュータにPHPがインストールされている場合：

1. ターミナル/ cmdを開きます
2. ウェブサイトのファイルがあるフォルダーに移動します
3. このフォルダ内でコマンドを実行しますphp -S localhost:3000←大文字の 'S'に注意してください
4. ブラウザを開き、URLバーでlocalhost：3000に移動します。あなたのウェブサイトはそこで実行されているはずです。

または

コンピュータにNode.jsがインストールされている場合：

1. ターミナル/ cmdを開きます
2. ウェブサイトのファイルがあるフォルダーに移動します
3. このフォルダ内で、次のコマンドを実行します npm init -y
4. ファイル名を指定して実行npm install live-server -gまたはsudo npm install live-server -gMac上
5. 実行するlive-serverと、ウェブサイトが開いた状態でブラウザに新しいタブが自動的に開きます。

注：フォルダーのルートにindex.htmlファイルがあることを忘れないでください。そうしないと、問題が発生する可能性があります。

私もこのuseCORS : true,ようなコードを追加してこのエラーを解決しました-

html2canvas($("#chart-section")[0], {
        useCORS : true,
        allowTaint : true,
        scale : 0.98,
        dpi : 500,
        width: 1400, height: 900
    }).then();