Question

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

我正在尝试从s3将图像加载到画布中。似乎safari < 6.0有一个与通过CORS加载图像有关的错误。因此，虽然图像已启用cors，但画布仍然受到污染。所以我在想是否有办法制作ajax请求然后将响应加载到画布中？

注意：Ajax请求适用于CORS。只是在加载图像safari时不会尊重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;

我试图解决问题的一种方法是向s3发出xhr请求。将图像设为BinaryFile，然后将其解码为base64并将其用作img的src。但是在解码时我得到一个DOM异常，不确定这个想法本身是不是错误

Answer 1

img.crossOrigin = "anonymous";

由于安全问题，它并不适用于所有情况。

您可以通过将该图像转换为base64字符串然后绑定到画布来加载画布中的任何图像。

示例：

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

到

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

然后将其加载到画布中。

谢谢。

通过ajax将图像加载到画布中

1 个答案: