“Tainted canvases may not be loaded” Cross domain issue with WebGL textures

前端未结

关注

 3  1346

一整个雨季

I\'ve learnt a lot in the last 48 hours about cross domain policies, but apparently not enough.

Following on from this question. My HTML5 game supports Facebook logi

相关标签:

3条回答

温柔的废话

2020-12-03 19:29

You can base64 encode your texture.

0 讨论(0)
发布评论:

提交评论
- 加载中...
梦谈多话

2020-12-03 19:34
this is a classic crossdomain issue that happens when you're developing locally.

I use python's simple server as a quick fix for this.

navigate to your directory in the terminal, then type:
```
 $ python -m SimpleHTTPServer
```
and you'll get
```
Serving HTTP on 0.0.0.0 port 8000 ...
```
so go to 0.0.0.0:8000/ and you should see the problem resolved.
0 讨论(0)
发布评论:

提交评论
- 加载中...
既然无缘

2020-12-03 19:36
are you setting the crossOrigin attribute on your img before requesting it?
```
var img = new Image();
img.crossOrigin = "anonymous";
img.src = "https://graph.facebook.com/1387819034852828/picture?width=150&height=150"; 
```
It's was working for me when this question was asked. Unfortunately the URL above no longer points to anything so I've changed it in the example below
```
var img = new Image();
img.crossOrigin = "anonymous";   // COMMENT OUT TO SEE IT FAIL
img.onload = uploadTex;
img.src = "https://i.imgur.com/ZKMnXce.png"; 

function uploadTex() {
  var gl = document.createElement("canvas").getContext("webgl");
  var tex = gl.createTexture();
  gl.bindTexture(gl.TEXTURE_2D, tex);
  try {
    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, img);
    log("DONE: ", gl.getError());
  } catch (e) {
    log("FAILED to use image because of security:", e);
  }
}

function log() {
  var div = document.createElement("div");
  div.innerHTML = Array.prototype.join.call(arguments, " ");
  document.body.appendChild(div);
}
```
```
<body></body>
```
How to check you're receiving the headers

Open your devtools, pick the network tab, reload the page, select the image in question, look at both the REQUEST headers and the RESPONSE headers.

The request should show your browser sent an Origin: header

The response should show you received
```
Access-Control-Allow-Methods: GET, OPTIONS, ...
Access-Control-Allow-Origin: *
```
Note, both the response AND THE REQUEST must show the entries above. If the request is missing Origin: then you didn't set img.crossOrigin and the browser will not let you use the image even if the response said it was ok.

If your request has the Origin: header and the response does not have the other headers than that server did not give permission to use the image to display it. In other words it will work in an image tag and you can draw it to a canvas but you can't use it in WebGL and any 2d canvas you draw it into will become tainted and toDataURL and getImageData will stop working
0 讨论(0)
发布评论:

提交评论
- 加载中...