EaselJs-跨域图片解决方法？ [英] EaselJs - cross-domain images workaround?

问题描述

当我尝试使用时：

temp = new createjs.Bitmap(obj.path)

我遇到错误：

Uncaught An error has occurred. This is most likely due to security restrictions on reading canvas pixel data with local or cross-domain images.

这与这个问题。

在上述情况下，用户未使用网络服务器。在我的情况下，我正在使用网络服务器，但我需要将图像托管在该服务器上。

In my case I'm using a web-server but I need the images to be hosted on an AWS S3 bucket using https.

是否可以使用允许EORSlJs的CORS的设置？

Is there a setting that I can use to allow CORS with EaselJs?

S3存储桶上的CORS设置：

CORS Settings on S3 Bucket:

<CORSConfiguration>
    <CORSRule>
        <AllowedOrigin>*</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <MaxAgeSeconds>3000</MaxAgeSeconds>
        <AllowedHeader>Authorization</AllowedHeader>
    </CORSRule>
</CORSConfiguration>

编辑：相关问题

推荐答案

位图无法处理CORS，因为您必须在图像上定义跨域属性

Bitmap does not handle CORS, since you must define a cross-origin property on your image directly before setting the src.

做到这一点的最佳方法是自己创建图像，然后在传递之前应用跨域

The best way to do this is to create the image yourself, and then apply cross-origin, before passing it to Bitmap.

var image = document.createElement("img");
image.crossOrigin = "Anonymous"; // Should work fine
image.src = obj.path;
temp = new Bitmap(image);

EaselJS当前没有可通过crossOrigin的API，因此这是唯一的方法。

There is currently no API on EaselJS to pass-through the crossOrigin, so this is the only way.

如果用PreloadJS预加载EaselJS内容，则可以将crossOrigin属性传递到队列或任何加载项。

If you preload your EaselJS content with PreloadJS, you can pass the crossOrigin property on the queue, or any load item.

var queue = new createjs.LoadQueue(false, null, true); //3rd param
queue.loadFile("path/to/bmp.png"); // Will use the queue CORS
queue.loadFile({src:"path/to/bmp.png", crossOrigin:true, id:"image"}); // For one file only (you can leave out the param on LoadQueue)
// later
var bmp = new createjs.Bitmap(queue.getResult("image");

请注意，即使图像显示，也会出现CORS错误的原因是EaselJS使用像素填充来确定命中测试。通过在您的图像上放置hitAreas来解决此问题，在进行命中测试时会使用hitAreas代替图像像素：

Note that the reason you get CORS errors even if the image displays is that EaselJS uses pixel fill to determine hit testing. You can also get around this by putting hitAreas on your images, which are used instead of the image pixels when doing hit testing:

var temp = new Bitmap(obj.path);
temp.image.onload = function() {
    var s = temp.hitArea = new createjs.Shape();
    s.graphics.fill("red").drawRect(0,0,temp.image.width,temp.image.height);
}

干杯，

这篇关于EaselJs-跨域图片解决方法？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！