1

它涉及另一个问题 Cross Origin Resource Sharing Headers not working only for safari。

我正在尝试将图像从 s3 加载到画布中。似乎safari < 6.0有一个与通过 CORS 加载图像相关的错误。因此，尽管图像启用了 cors，但画布会受到污染。所以我在想是否有某种方法可以发出 ajax 请求然后将响应加载到画布中？

注意：Ajax 请求与 CORS 一起正常工作。只是在加载图像 safari 时不尊重该crossOrigin属性，因此请求是在没有跨域的情况下发出的。

  • 我的图像位于 s3，因此无法将其编码为 base64 并直接从亚马逊获取
  • 我不想在我的域中为图像设置代理

一些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;

我试图解决这个问题的一种方法是向 s3 发出 xhr 请求。获取图像BinaryFile，然后将其解码base64并用作 img 的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 回答