Geek Answers Handbook

“Thin Canvases May Not Load” CrossG Domain Text Problem with WebGL Textures

I have learned a lot over the past 48 hours about cross-domain, but apparently not enough.

Following from this question. My HTML5 game supports Facebook login. I am trying to upload photos of friends of friends. In the HTML5 version of my game, I get the following error in Chrome.

detailMessage: "com.google.gwt.core.client.JavaScriptException: (SecurityError) ↵ stack: Error: failed to execute 'texImage2D' on" WebGLRenderingContext ": shadow canvases may not load.

As I understand it, this error occurs because I'm trying to load an image from another domain, but this can be circumvented with the Access-Control-Allow-Origin header , as described in detail in this question.

URL I'm trying to download from

https://graph.facebook.com/1387819034852828/picture?width=150&height=150

Looking at the network tab in Chrome, I see that it has the necessary access-control-allow-origin header and responds with a 302 redirect to the new URL. This URL is changing, I think, depending on load balancing, but here is an example URL.

https://fbcdn-profile-a.akamaihd.net/hprofile-ak-xap1/v/t1.0-1/c0.0.160 0,160/p160x160/11046398_1413754142259317_606640341449680402_n.jpg = 6738b578bc134ff207679c832ecd5fe5 &? = 562F72A4 & GDA= 1445979187_2b0bf0ad3272047d64c7bfc2dbc09a29

URL- access-control-allow-origin. , .

Facebook, , , - , , . , , , .

-, libgdx, ( , , ). AssetDownloader. , .

public void downloadPixmap(final String url, final DownloadPixmapResponse response) {
    final RootPanel root = RootPanel.get("embed-html");
    final Image img = new Image(url);
    img.getElement().setAttribute("crossOrigin", "anonymous");
    img.addLoadHandler(new LoadHandler() {

        @Override
        public void onLoad(LoadEvent event) {
            HtmlLauncher.application.getPreloader().images.put(url, ImageElement.as(img.getElement()));
            response.downloadComplete(new Pixmap(Gdx.files.internal(url)));
            root.remove(img);
        }
    });
    root.add(img);
}

interface DownloadPixmapResponse {
    void downloadComplete(Pixmap pixmap);

    void downloadFailed(Throwable e);
}
+4
3

crossOrigin img , ?

var img = new Image();
img.crossOrigin = "anonymous";
img.src = "https://graph.facebook.com/1387819034852828/picture?width=150&height=150";

, . , URL ,

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>
Hide result

,

devtools, , , , , REQUEST RESPONSE.

enter image description here

, Origin:

,

Access-Control-Allow-Methods: GET, OPTIONS, ...
Access-Control-Allow-Origin: *

, . Origin:, img.crossOrigin, , , .

Origin:, , . , , , WebGL, 2- , , , toDataURL getImageData

+12

base64.

0

This is a classic cross-domain problem that occurs when you develop locally.

I am using a simple python server as a quick fix for this.

go to your directory in the terminal, then type:

 $ python -m SimpleHTTPServer

and you will get

Serving HTTP on 0.0.0.0 port 8000 ...

so go to 0.0.0.0:8000/ and you will see that the problem is resolved.

0
source

More articles:


All Articles