EaselJs - 跨域图像解决方法？

Question

当我尝试使用时：

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.

这和this question有些关系。除了上述情况，用户没有使用网络服务器。

就我而言，我使用的是网络服务器，但我需要使用 https 将图像托管在 AWS S3 存储桶上。

是否有我可以使用 EaselJs 允许 CORS 的设置？

S3 存储桶上的 CORS 设置：

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

编辑：related question

Answer 1

位图不处理 CORS，因为您必须在设置 src 之前直接在图像上定义一个跨域属性。

最好的方法是自己创建图像，然后在将其传递给位图之前应用跨域。

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

目前EaselJS上没有API可以通过crossOrigin，所以这是唯一的方法。

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

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 来解决此问题，在进行命中测试时使用它来代替图像像素：

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);
}

干杯，

Answer 2

是的，在您的 AWS S3 存储桶上的权限下启用 CORS。