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

这涉及到另一个问题

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

注意：Ajax请求可以与CORS正常工作。只是，在加载image safari时，不尊重

crossOrigin

属性，因此请求是在没有交叉origin的情况下发出的

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

img.crossOrigin = "anonymous";

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

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

例如：

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

到

然后将其加载到画布中

---

谢谢。

如果您提供了代码，我们能帮您吗？所以我们至少可以知道你现在是如何处理它的，你在寻找代码的哪一部分？我从s3加载图像的方式？是的，确切地说，我只是想知道你是如何做到这一点的，我会这样想：

var base_image=new image（）；base_image.src='URL_到您的_S3_文件'；base_image.onload=function（）{var context=canvas.getContext（'2d'）；context.drawImage（base_image，100100）；}但我真的不与canvas@lan在您告诉您之后，请尝试使用canvas.toDataUrl（）

，它将抛出DOM异常

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