Canvas 画布图像和S3（CORS策略）

目前我在canvas gallery工作，我一直被CORS问题所困扰。所以我真的不知道应该从哪一刻开始，我将试着描述我所做的步骤和我的困难

简介：

我使用CoffeeScript、jQuery和存储在AmazonS3上的所有图像

问题

因此，我的桶的第一个CORS配置非常像这样：

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
    <CORSRule>
        <AllowedOrigin>https://level.travel</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <AllowedMethod>POST</AllowedMethod>
        <AllowedMethod>PUT</AllowedMethod>
        <MaxAgeSeconds>3000</MaxAgeSeconds>
        <AllowedHeader>Content-*</AllowedHeader>
        <AllowedHeader>Host</AllowedHeader>
        <AllowedHeader>Origin</AllowedHeader>
    </CORSRule>
    <CORSRule>
        <AllowedOrigin>https://*.level.travel</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <AllowedMethod>POST</AllowedMethod>
        <AllowedMethod>PUT</AllowedMethod>
        <MaxAgeSeconds>3000</MaxAgeSeconds>
        <AllowedHeader>Content-*</AllowedHeader>
        <AllowedHeader>Host</AllowedHeader>
        <AllowedHeader>Origin</AllowedHeader>
    </CORSRule>
</CORSConfiguration>

这是为了满足我的需要而扩展的

方法

@progress\u event

将每个图像放入数组（如内存缓存），并提供一些附加信息。此数组如下所示：

[
    {
        image   : canvas    // the canvas element which will be drawed on main Canvas
        small   : { ... }   // information about small images (eg. size, position)
        large   : { ... }   // similar to small
    }
]

然后是最有趣的部分和（我想）我的问题：

Gallery由两个磁带组成（大图像和小图像位于彼此的顶部）。要绘制这两个磁带，我需要运行两次

@render\u gallery\u tape

。这些函数在无限循环（

setTimeout

，45 FPS）中执行，并在

requestAnimationFrame

中工作

这就是我如何称呼

@render\u gallery\u tape

：

@render_gallery_tape('large')
@render_gallery_tape('small')

@render\u gallery\u磁带

是异步的，两个功能同时工作

在

@render\u gallery\u磁带中

我有这样一个：

// pane is an item of array described above
// @cache_context is a context of off-screen Canvas
@cache_context.drawImage(pane.image,
                         Math.ceil(current_offset),
                         Math.ceil(margin_top),
                         Math.ceil(size.width),
                         Math.ceil(size.height))

因此，有时当我的多媒体资料试图呈现小（底部）磁带时，我会遇到安全错误（CORS策略）。浏览器认为我的来源不对

我知道我可以代理这些图像（例如使用nginx），但我们使用EC2，我不想增加应用服务器上的流量。所以我不得不使用S3

提前谢谢

---

p.S.如果需要，我可以提供任何附加信息。

可能不是您的问题，但请确保在您的

crossorigin=“use credentials”

标签中添加凭据

---

“该元素跟踪其中的数据来自何处，如果它知道您从其他网站获得了某些内容（例如，如果您在画布中绘制的元素指向跨源文件），它将“污染”画布。”

谢谢，我会尝试。但是我们已经通过使用用于Amazon S3流量的nginx代理解决了这个问题（这些图像的所有S3流量现在都通过我们的EC2服务器）。更好的是，没有多少浏览器支持crossorigin属性。我们只支持现代浏览器，例如IE9+、Chrome、Opera、Safari等。因此，浏览器支持不是首要任务。但是，是的，这比试图让CORS工作要简单得多。

// pane is an item of array described above
// @cache_context is a context of off-screen Canvas
@cache_context.drawImage(pane.image,
                         Math.ceil(current_offset),
                         Math.ceil(margin_top),
                         Math.ceil(size.width),
                         Math.ceil(size.height))