Canvas にクロスドメイン画像を導入する際の toDataURL() エラーの問題を解決する方法

この記事は主に、Canvas でのクロスドメイン画像の導入によって発生する toDataURL() エラーの問題を解決する方法に関する関連情報を紹介します。編集者はそれが非常に優れていると考えたので、ここで共有します。参考としてあげてください。エディタをフォローして見てみましょう

推奨マニュアル : HTML5 最新版リファレンスマニュアル

この記事では、 の導入結果を紹介します。 Canvas のクロスドメイン画像 toDataURL() によって報告されたエラーの解決策の詳細は次のとおりです。

[シナリオ]

ユーザーはウェブページを開き、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";
                //增加这一行：
                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 サーバーにも同じことが当てはまります)

HTML5 キャンバス タグの役割とキャンバス タグの歴史的起源の紹介2.
3 分間の HTML5 キャンバス (Canvas) アニメーション チュートリアル
関連ビデオ チュートリアル: 1.Dugu Jiijian (1)_HTML5 ビデオ チュートリアル

上記がこの記事の全内容です。みんなの学習に役立ちます！

以上がCanvas にクロスドメイン画像を導入する際の toDataURL() エラーの問題を解決する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。