HTML5キャンバスのアクセス制御 - 許可 - 起源エラー

私はcanvas要素からデータを取得しようとすると、私は次のJavaScriptエラーを取得してい

：キャンバスは画像から引き出されHTML5キャンバスのアクセス制御 - 許可 - 起源エラー

Error: canvas.toDataURL() not supported. [Exception... "The operation is insecure." code: "18" nsresult: "0x80530012 (SecurityError)"...

が異なるから提供ドメインを使用していますが、私はこれらの2行を画像レスポンスヘッダーに追加するためにプロキシを使用しています：

access-control-allow-origin: *

access-control-allow-credentials: true

何が欠けていますか？

おかげで、
テッド

出典

2012-09-05 Ted Smith

どのように正確にあなたのプロキシを使用しています。クロスドメインiframeメッセージ/バックエンドサービスを使用している場合を除き、失敗することになります。 – Kpower

デスクトップ上でチャールズ（http://www.charlesproxy.com）をプロキシとして使用して、画像レスポンスヘッダーを追加しましたアクセス制御許可元ライン）。これはdev用です。動作すれば、イメージサーバのヘッダを変更してaccess-control-allow-origin行を追加するように要求します。
私の理解では、イメージレスポンスヘッダーにアクセス制御可能な原点行がある場合、JavaScriptがキャンバスを編集できるようになりました。 –

私はそれをついに見つけました。見つからない部分は、imageのcrossOriginプロパティを "Anonymous"に設定しています。詳細情報：https://developer.mozilla.org/en-US/docs/CORS_Enabled_Image –

適切なCORS要求を作成するには、画像のcross origin propertyに「匿名」に設定する必要があります。 This exampleはMozilla Developer Networkからのものです。

var img = new Image, 
    canvas = document.createElement("canvas"), 
    ctx = canvas.getContext("2d"), 
    src = "http://example.com/image"; // insert image url here 

img.crossOrigin = "Anonymous"; 

img.onload = function() { 
    canvas.width = img.width; 
    canvas.height = img.height; 
    ctx.drawImage(img, 0, 0); 
    localStorage.setItem("savedImageData", canvas.toDataURL("image/png")); 
} 
img.src = src; 
// make sure the load event fires for cached images too 
if (img.complete || img.complete === undefined) { 
    img.src = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw=="; 
    img.src = src; 
}

ブラウザのサポートは、任意のIEの既知のバージョン、およびSafariの未発表バージョンを除外する。 FirefoxとChromeは長年のサポートを受けています。

出典

2013-08-02 02:19:07 FakeRainBrigand

HTML5キャンバスのアクセス制御 - 許可 - 起源エラー

答えて

関連する問題