從谷歌雲加載圖像存儲

時，無法執行「getImageData」由於跨域我們必須託管在谷歌雲圖像，並獲得使用從谷歌雲加載圖像存儲

new GcsAppIdentityServiceUrlSigner().getSignedUrl("GET", path))

它看起來服務器端的鏈接，它像

https://storage.googleapis.com/<bucket>/<folder>/image.JPG?GoogleAccessId=<project>@appspot.gserviceaccount.com&Expires=1400686814&Signature=xPRKGFM01CkV9J4p0kzqMYmLGO1QJkFfoW7EaG%2FYfVcCZIgKCoflCE2E5kHlzG%2FZapjgQrkx%2BBEm%2FGmt2ZbezvW2nNm3KLuJFy%2BuaA%2BO1HNPdTtzuhU9q9yjioUYSA0fb%2BpnOaNHQVmLfLOvjj84l0QIKrCOFsnzfuMUwV7ZuVo%3D

，因爲這在本link描述我們剷鬥配置CORS。

<?xml version="1.0" ?> 
<CorsConfig> 
    <Cors> 
     <Origins> 
      <Origin>*</Origin> 
     </Origins> 
     <Methods> 
      <Method>GET</Method> 
     </Methods> 
     <ResponseHeaders> 
      <ResponseHeader>Content-Type</ResponseHeader> 
     </ResponseHeaders> 
    </Cors> 
</CorsConfig> 

gsutil cors set cors.xml gs://<bucket>

然後工作了AssetLoader：

var viewport = $(".viewport"), 
    renderer = PIXI.autoDetectRenderer(null, null, null, true), 
    container = new PIXI.DisplayObjectContainer(), 
    stage = new PIXI.Stage(0xffffff, true); 


var imageLink = "..."; 
var loader = new PIXI.AssetLoader([]); 
loader.crossorigin = true; 

var texture; 
loader.onComplete = function() { 
    texture = PIXI.Sprite.fromImage(imageLink); 
    container.addChild(currentTexture); 
    stage.addChild(container); 
    viewport.append(renderer.view); 
}; 
loader.load();

但導致錯誤功能createSpite（）{ VAR帆布= $（ ''）得到（0）， ctx2D =畫布。的getContext（「2D」）;

image.onload = function() { 
     // ... 
     var imgData = ctx2D.getImageData(minX, minY, imgWidth, imgHeight); // causes an error 
     // ... 
    }; 
    image.src = imageLink; 

}

錯誤：

Uncaught SecurityError: Failed to execute 'getImageData' on 
'CanvasRenderingContext2D': The canvas has been tainted by cross-origin data.

來源

2014-05-21 user3661362

我不熟悉PIXI，但我可能想到的是，最終的原因是圖像目標的crossorigin屬性沒有被設置爲「無名氏」或「使用-證書」。

您可以通過嘗試直接在測試頁上以跨源樣式加載圖像來測試此操作。這裏有一個很好的例子：https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image

來源

2014-05-21 19:33:24

從谷歌雲加載圖像存儲

回答

相關問題