Question

我们在Google Cloud上托管了图片，并使用

在服务器端获取了一个链接

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();

但是造成了错误 function createSpite（）{ var canvas = $（''）。get（0）， ctx2D = canvas.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.

Answer 1

我对PIXI不熟悉，但我可能认为最终的原因是图像对象的crossorigin属性未被设置为“匿名”或“使用凭据”。

您可以尝试在测试页面上以跨原始样式直接加载图像来测试这一点。这里有一个很好的例子：https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image

无法执行＆＃39; getImageData＆＃39;由于从Google云端存储加载图片时的跨源原因

1 个答案: