javascript - 通过ajax将图像加载到canvas中

Question

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

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

注意: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 异常，不确定这个想法本身是否错误

Answer 1

img.crossOrigin = "anonymous";

由于安全问题，它并非在所有情况下都有效。

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

示例:

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

至

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

然后将其加载到 Canvas 中。

谢谢。