背景画像のあるキャンバスにFacebookユーザーの写真を入れようとしています。次に、デフォルトで、またはボタンをクリックして、キャンバスを画像として保存します。私はこれを使ってそれが行われることを発見した徹底的な調査をしました
var myImage = canvas1.toDataURL("image/png");
imageElement.src = myImage;
しかし、自分のコードでそれを機能させる方法を理解することはできません。私は私が考えることができるすべての可能性を試しました。動いていない。どんな助けでも本当にありがたいです。
別のドメインから画像を読み込んだ後、canvas 要素で toDataUrl を使用することはできません。これは、 HTML5 仕様で指定されたセキュリティ上の問題です
これを回避する 1 つの方法は、画像を提供するサーバーを制御できる場合、access-control-allow-originヘッダーを付けて画像を提供することです。詳細については、http ://www.w3.org/TR/cors/#use-cases をご覧ください。
別のオプションは、サーバーとドメインから画像をプロキシすることです。指定された URL から画像を要求する代わりに、js コードはサーバー上でスクリプトを呼び出し、画像を取得して提供します。
あなたの場合、Facebook から画像を取得しようとしていますが、これは明らかにそれらのヘッダーを送信しません。これはセキュリティ上の大きな問題になるからです。サーバー側のプロキシ ソリューションに頼る必要があります。