0

現在、キャンバスギャラリーに取り組んでいますが、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>

および開発環境に関する同様のルール（もちろん、異なるドメイン）。

ギャラリーの初期化では、画像の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
    }
]

次に、最も興味深い部分と（私が思うに）私の問題：

ギャラリーは2本のテープで構成されています（大きな画像と小さな画像が重なり合っています）。両方のテープを描画するには、@render_gallery_tape2回実行する必要があります。これらの関数は無限ループ（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を使用することを余儀なくされました。

前もって感謝します。

PS必要に応じて、追加情報を提供できます。

4

1 に答える 1

0

あなたの問題ではないかもしれませんが、crossorigin="use-credentials"あなたの<video>タグにそれがあることを確認してください。

「要素は、その内部のデータがどこから来たのかを追跡し、別の Web サイトから何かを取得したことがわかっている場合 (たとえば、キャンバスにペイントした要素がクロスオリジン ファイルを指している場合)、それは 'キャンバスを「汚染」します。

于 2013-06-08T06:56:56.560 に答える