Canvas がクロスドメイン画像を導入し、toDataURL() エラーが発生する。

この記事では、Canvasがクロスドメイン画像を導入するとtoDataURL()エラーが発生する問題の解決策を説明し、以下のように共有します。

[シーン】です。］

ユーザーがWebページを開き、Tencent COS（画像サーバー）に画像を要求する。キャンバスを使って描画する。

その後、ユーザーは画像を再選択し、トリミングして、アップロードすることができます。

[質問】です。］

初めて画像を読み込み、新規画像選択後のトリミング、描画は問題ありません。しかし、アップロードに失敗し、以下のエラーが報告されます。

HTMLCanvasElement'で'toDataURL'の実行に失敗しました。汚染されたキャンバスはエクスポートされない可能性があります。

画像を最初に参照したときにcrossOriginフィールドを設定する必要があることを理解した上で。

                var c=document.getElementById("cover_show");
                var img=new Image();
                img.src="http://vsqx-cover-xxxxxx.coscd.myqcloud.com/"+this.vsqx_uid+".jpg";
                // Add this line.
                img.setAttribute("crossOrigin",'anonymous');
                img.onload = function(){
                    var cxt=c.getContext("2d");
                    cxt.drawImage(img,0,0,300,150,0,0,200,126);
                }

そして、もう一度実行してみてください。最初に読み込んだときに画像が表示されないことを発見。

コンソールで以下のエラーが報告されます。

[ファイナルソリューション】。］

Tencent Cloud COSにログインし、このストレージバケットを見つけ、"クロスドメインアクセスCORS"を設定します。(他のPHP/JAVAサーバーでも同じ)

再度テスト：画像は正常に表示され、画像のアップロードも成功しました。

今回は以上ですが、皆様の学習のお役に立てれば幸いです。また、スクリプトハウスを応援していただければ幸いです。