畫布圖像和S3（CORS政策）

目前我在畫布畫廊工作，並且我一直在CORS問題上遭遇挫折。所以我真的不知道從哪個時刻開始，我只會試着描述我已經完成的步驟並描述我的麻煩。畫布圖像和S3（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），並在中工作。

這是我如何調用@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.如果需要，我可以提供任何其他信息。

來源

2013-03-12 nicholas_r

可能不是您的問題，但請確保在您的crossorigin="use-credentials"到<video>標記中。「

」元素會跟蹤其內部的數據來自哪裏，並且如果它知道您從其他網站獲取了某些內容（例如，如果您在畫布上繪製的元素指向了跨源文件），它會「污染」畫布。「

來源

2013-06-08 06:56:56 Lane

謝謝，我會試試看。但是我們已經通過對Amazon S3流量使用nginx-proxy解決了這個問題（這些映像的所有S3流量現在都會通過我們的EC2服務器）。 – 2013-06-08 14:05:17

你做得更好，因爲沒有多少瀏覽器兌現crossorigin屬性 – Lane 2013-06-10 20:37:56

我們只支持現代瀏覽器，例如IE9 +，Chrome，Opera，Safari等。所以瀏覽器支持並不是第一要務。但是，是的，它比試圖讓CORS工作更簡單。 – 2013-06-13 11:36:43

畫布圖像和S3（CORS政策）

回答

相關問題