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存储桶上。

我可以使用设置来允许CORS与EaselJs一起使用吗？

S3 Bucket上的CORS设置：

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

修改：related question

Answer 1

Bitmap不处理CORS，因为您必须在设置src之前直接在上定义图像的跨源属性。

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

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。

EaselJs - 跨域图像解决方法？

2 个答案: