1

別の質問 Cross Origin Resource Sharing Headers not working only for safariに関連しています。

s3 からキャンバスに画像を読み込もうとしています。CORSsafari < 6.0経由での画像の読み込みに関連するバグがあるようです。そのため、画像でcorsが有効になっているにもかかわらず、キャンバスが汚染されます。だから、ajaxリクエストを作成してから、レスポンスをキャンバスにロードする方法があるかどうか考えていましたか？

注 : Ajax リクエストは CORS で適切に機能します。イメージサファリをロードしている間はcrossOrigin属性を尊重しないため、クロスオリジンなしでリクエストが行われます。

  • 画像が s3 にあるため、画像を base64 にエンコードして amazon から直接取得する方法はありません
  • 自分のドメインで画像用のプロキシを設定したくない

いくつかのJavaScript

var img_location = "//temp_upload_test.s3.amazonaws.com/IMG_0222.JPG"
var img = new Image();

img.onload = function(){

    console.log("image loaded")
    EXIF.getData(img,function(){
        console.log("image data read");
        var orientation = EXIF.getTag(img,'Orientation');
        console.log("orientation"+orientation);
        load_image_into_canvas_with_orientation(img,orientation);
    })
    console.log("image loaded function complete");
}
img.crossOrigin = "anonymous";
$(img).attr("crossOrigin","anonymous");
img.src = img_location;

私が問題にアプローチしようとしている 1 つの方法は、s3 に xhr リクエストを行うことです。として画像を取得し、BinaryFileそれをデコードしbase64て img's として使用しますsrc。しかし、デコード中にDOM例外が発生し、アイデア自体が間違っているかどうかわかりません

4

1 に答える 1

0 
img.crossOrigin = "anonymous";

セキュリティ上の問題により、すべての場合に機能するとは限りません。

その画像をbase64文字列に変換してからキャンバスにバインドすることにより、キャンバスに画像をロードできます。

例：

<img src="www.example.com/name.png" alt="test" />

に

<img src="data:image/png;base64,vnaXYZetc..." alt="test" />

それをキャンバスにロードします。

ありがとうございました。

于 2016-05-16T10:52:03.200 に答える