webGL&&jsFiddle-图像未下载

webGL && jsFiddle - image is not downloaded

本文关键字：amp 下载 图像 webGL jsFiddle-      更新时间：2024-04-19

我试图在jsFiddle上使用webGL，但无法下载并在代码中使用图像。在localhost上用我的例子运行页面一切都很好，但jsFiddle不接受图像。我很想在网上分享我的代码，但我不能。

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

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

我的问题有个例子
请问你不知道怎么解决吗？

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

你是否能解决它取决于图像的服务器。在这种情况下，CCD_。它必须允许使用该图像。

您还必须申请这些权限。

添加

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/

相关文章：