この記事では、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; : 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サーバーも同様です)
再度テストします。画像は正常に表示され、画像は正常にアップロードされます。
以上がこの記事の全内容です。皆様の学習のお役に立てれば幸いです。また、VeVb Wulin Network をご支援いただければ幸いです。