13

キャンバスを使用して画像を自動的にトリミングし、そのデータ URL を返すプロジェクトに取り組んでいます。外部サーバーからの画像を使用します。これには適切な CORS ヘッダーがあり、クロスオリジンであってもトリミング後に画像をデータ URI に変換できます。

このコードは、canvas.toDataURL() が呼び出されたときに「SCRIPT5022: SecurityError」をスローする IE 10 を除くすべてのブラウザーで完全に (そしてセキュリティ エラーなしで) 動作します。

これは IE のバグですか、それとも Idiot Exploder で動作させるためにコードで別の処理を行う必要がありますか? ありがとう。-スコット

EDIT キャンバスを作成して描画するために使用しているコード（ほとんど）は次のとおりです。

var canvas = document.createElement('canvas');
var ctx = canvas.getContext('2d');
var img = new Image();
img.src = imageServerURL + '?id=' + imageIdToGet; // imageServerURL points to a different domain but the server has headers allowing requests from my domain
/*
    code here that defines the cropping area, in variables like ulX, lrY, etc.
*/
ctx.beginPath();
ctx.moveTo(ulX, ulY);
ctx.lineTo(urX, urY);
ctx.lineTo(lrX, lrY);
ctx.lineTo(llX, llY);
ctx.closePath();
ctx.clip();
ctx.drawImage(img, 0, 0);
var url = canvas.toDataURL(); // This succeeds in all other browsers but throws a SecurityError in IE
4

2 に答える 2

6

IE10 が画像の CORS をサポートしているとは思えません。 This MDN articleはそれを裏付けているようです。

記事が述べているように：

キャンバスで CORS 承認なしで画像を使用することはできますが、そうするとキャンバスが汚染されます。キャンバスが汚染されると、キャンバスからデータを引き出すことはできなくなります。たとえば、キャンバスの toBlob()、toDataURL()、または getImageData() メソッドを使用できなくなりました。これを行うと、セキュリティ エラーがスローされます。

そのため、少なくとも IE10 と Opera では、これを試みる前に、問題のコードをホストしているのと同じオリジン/ドメインからイメージをプロキシする必要があるようです。

画像の CORS をサポートしていないブラウザーを処理するには、サーバー側で画像をプロキシする必要があります。これは、画像のソースをローカル サーバー上の既知のエンドポイントに送信し、画像のソース URL をクエリ パラメーターとして渡すことで、非常に簡単に行うことができます。

例えば：

var sourceImageUrl = "https://www.google.com/images/srpr/logo4w.png",  
    localProxyEndpoint = "/imageproxy",   
    image = new Image();   

image.src = localProxyEndpoint + "?source=" + encodeURIComponent(sourceImageUrl);

サーバー側では、この GET リクエストを処理sourceし、URI からパラメーターの値を取得し、ソースから画像を取得して、応答で返します。

于 2013-08-07T20:18:25.573 に答える