Картинки холста и S3 (политика CORS)

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 solution расширена для моих потребностей.

Способ @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.

Заранее спасибо.

P.S. При необходимости я могу предоставить любую дополнительную информацию.

Answer 1

не может быть вашей проблемой, но убедитесь, что в вашем crossorigin="use-credentials" на ваш <video> тег.

«Элемент отслеживает, откуда происходят данные внутри него, и если он знает, что вы получили что-то с другого сайта (например, если элемент, который вы нарисовали в холсте, указывает на файл с поперечным происхождением), это «испортит» полотно ».