0

目前我在画布画廊工作，我一直被 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两次。这些函数在无限循环中执行（setTimeout45 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。

提前致谢。

PS如果需要，我可以提供任何其他信息。

4

1 回答 1

0

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

“该元素会跟踪其中的数据来自何处，并且如果它知道您从另一个网站获得了某些东西（例如，如果您在画布上绘制的元素指向一个跨域文件），它”会“污染”画布。”

于 2013-06-08T06:56:56.560 回答