Canvas Images and S3 (CORS policy)

Question

目前我在画布画廊工作，我一直困在CORS问题。所以我真的不知道我应该从哪一刻开始，我只是试着描述我所做的步骤和描述我的麻烦。

简介:

我使用CoffeeScript, jQuery和我所有的图像存储在Amazon S3。

那么，我的桶的第一个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>

和类似的开发环境规则(当然是不同的域)。

在图库初始化时，我只收集图像的url，然后收集有关它们的一些信息。此功能由这部分代码提供:

images_array.each (i, image)=>
    console.log "Loading image #{i}"
    canvas_image                = new Image
    canvas                      = document.createElement('canvas')
    canvas_context              = canvas.getContext("2d")
    canvas_image.crossOrigin    = 'anonymous'
    image_index                 = i
    canvas_image.onload         = =>
        canvas.width        = canvas_image.naturalWidth
        canvas.height       = canvas_image.naturalHeight
        canvas_context.drawImage(canvas_image, 0, 0)
        localStorage.setItem(@storage_ns(i), canvas.toDataURL('image/jpeg'))
        @full_images[i]     = $(image).data("fullImage")
        @hidden_area.append(canvas)
        @progress_event(canvas, image_index)
    canvas_image.onerror        = => @error_event(image_index)
    if canvas_image.complete || canvas_image.complete is undefined
        canvas_image.src    = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==";
        canvas_image.src    = $(image).data("thumbImage")

这是根据我的需要扩展的MDN解决方案。

方法@progress_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
    }
]

接下来是最有趣的部分，也是(我想)我的问题:

图库由两个磁带组成(大小图像相互重叠)。为了画出两个磁带，我需要运行@render_gallery_tape两次。这些函数在无限循环中执行(setTimeout, 45 FPS)，在requestAnimationFrame中工作。

这是我如何调用@render_gallery_tape:

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

@render_gallery_tape是异步的，两个函数同时工作。

在@render_gallery_tape中，我有这个:

// 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。

提前感谢。

注:如果需要，我可以提供任何额外的信息。

Answer 1

可能不是您的问题，但请确保在您的crossorigin="use-credentials"到<video>标记中。

"元素会跟踪它内部的数据来自哪里，如果它知道你从另一个网站获得了一些东西(例如，如果你画在画布上的元素指向一个跨源文件)，它就会"污染"画布。"