javascript - webGL && jsFiddle - 图像未下载

Question

我正在尝试在 jsFiddle 上使用 webGL，但我无法在代码中下载和使用图像。在本地主机上使用我的示例运行页面一切正常，但 jsFiddle 不接受图像。我很想在线分享我的代码，但我不能……

这就是我将图像下载到脚本中的方式:

var image = document.createElement("img");
image.src = "http://s29.postimg.org/ct644q1dz/sp_dom1.jpg";
image.onload = function() {
        // some magic :P
        ...
}; 

There是我的问题的例子。
请问您不知道如何解决吗？

Answer 1

WebGL 需要图像的 CORS(跨源资源共享)权限，因为您的图像不是来自同一来源。换句话说，图像不是来自 jsfiddle.net 它来自 s29.postimg.org

能否解决取决于图片的服务器。在这种情况下 s29.postimg.org。它必须授予使用图像的权限。

您还必须请求这些权限。

添加

image.crossOrigin = "";  // added
image.src = ...

如果仍然无法正常工作，则 postimg.org 未授予许可。

让我们在这里试试

[
  "https://s29.postimg.org/ct644q1dz/sp_dom1.jpg",
  "https://i.imgur.com/lsQoyEIm.png",
  "https://c2.staticflickr.com/2/1638/26142586042_8815f263b7.jpg",
].forEach(loadImage);
  
function loadImage(url) {
  var image = document.createElement("img");
  var hostname = (new URL(url)).hostname;
  image.crossOrigin = "";
  image.src = url;
  image.onload = function(e) {
    log("**CAN** use image " + e.target.src + 
        ". Permission given by " + hostname);
  }; 
  image.onerror = function(e) {
    log("can **NOT** use image '" + e.target.src + 
        "'. Permission not given by " + hostname);
  }
}

function log(msg) {
  var elem = document.createElement("p");
  elem.appendChild(document.createTextNode(msg));
  document.body.appendChild(elem);
}

从上面的测试来看，postimg.org 似乎没有给予许可，但 imgur.com 和 flickr.com 都给予了许可。

参见 https://hacks.mozilla.org/2011/11/using-cors-to-load-webgl-textures-from-cross-domain-images/