N種類のキャンバスエクスポートイメージのクロスドメインポーズサマリーのロックを解除する

この記事では、ドメインをまたいだキャンバス書き出し画像のロックを解除するためのN個のポジションを、以下のように共有してまとめています。

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

上記のエラーは、セキュリティポリシーでクロスドメインでの画像のエクスポートが許可されていないため、現在とは異なる画像サーバーのドメインに画像をエクスポートする際に、canvasを使ってtoDataUrlを実行すると、誰もが遭遇すると思われるものです

このクロスオーバーの問題を解決するには、いくつかの方法があります。

I. 画像をbase64に変換する

画像をbase64に変換すると、ドメイン名がなくなるので、当然クロスドメインは発生しません。

注：画像はbase64に変換プラス画像ファイルのサイズを増加させる、画像が比較的大きい場合、それはbase64に変換することは推奨されません、それ以外の場合は、サイトの速度に影響を与え、ページのロード時間を増加させます、このアプローチは、一般的に小さな画像に適用されます。

第二に、画像サーバーの設定でクロスドメインが可能であること

つまり、画像をリクエストした際に返されるレスポンスヘッダに Access-Control-Allow-Origin の値 (すべてのウェブサイトからのクロスドメインリクエストを許可する) または現在のウェブサイトのドメイン (固定ドメインからのクロスドメインリクエストのみを許可する) を指定すると、フロントエンドに画像のクロスドメイン属性が読み込まれるようになります。 img.crossOrigin="anonymous". 具体的なコードは以下の通りです。

  var canvas = document.getElementById('myCanvas')
  var ctx = canvas.getContext('2d')
  var img = document.createElement('img')
  img.crossOrigin = "anonymous"
  img.src = 'https://p4-q.mafengwo.net/s12/M00/CA/3B/wKgED1w8fL6ADk16AAXyDaz2bdU61.jpeg'
  img.onload = function() {
    ctx.drawImage(img,0,0,500,300);
    console.log(canvas.toDataURL())
  }

これにより、ビフォーアフター・クロスドメインの問題が解決されます

III. 現在のドメインの下に画像を置く

不謹慎な笑いをお許しください、これは確かに問題を解決する方法です。

しかし、実際のプロジェクトでは、画像は通常cdnに保存されているので、この方法はあまり現実的ではありません?

画像がbase64になれば、ドメイン名がなくなるので、当然クロスドメインは発生しません。

四、画像サービスがクロスドメインレスポンスヘッダを設定できない場合

例えば、WeChatのアバターのようなサードパーティのウェブサイトからアバターを取得し、フロントエンドで新しい画像を動的に生成するが、WeChatのアバター画像はクロスドメイン・エクスポートを許可しないといった状況が実際に存在します。上記のどの方法もうまくいきません

このような状況は、バックエンドの支援を必要とする、バックエンドは、転送の層を行うには、サーバー側は、フロントエンドに戻り、または新しい画像のリンクを生成するために、クロスドメインを許可するローカルサーバーに格納されてアバターを取得するには、方法1または方法2、フロントエンドに戻り、この時間と組み合わせて、クロスドメインの問題も自然に解決されています。

あなたが画像をエクスポートするためにhtmlToCanvasプラグインを使用する場合は、useCORSを追加する必要があります：真の構成項目は、原理は方法2と同じですが、前提条件は、画像ドメインがクロスドメインを許可していることです。

私が知っているN個の方法はこれで終わりですが、もっと追加してください。

今回書いたのは以上です。あなたの勉強のお役に立てれば幸いです。そして、スクリプトハウスを応援していただければ幸いです。