在 Javascript 中同步加载 Base64 编码的图像

Question

我有一组 ~200 个 base64 编码的 PNG（全部来自一个共享的 JSON 文件），我想直接在循环中加载它们作为 WebGL 纹理，而不必求助于回调/事件处理程序（对于更简单的代码和更少的事件处理开销）。有没有办法在 Javascript 中做到这一点？

我知道加载 base64 编码图像的规范方法是通过数据 URI。但似乎设置Image 对象的src 属性实际上并不解码图像数据，而只是将其排队以进行异步加载（这意味着在设置@987654324 之后立即将Image 对象作为WebGL 纹理上传@属性失败；设置上传纹理的onload处理程序成功）。

Answer 1

为什么？为什么要同步进行？浏览器中的 JavaScript 并非旨在同步运行。您将冻结浏览器并可能出现“此脚本执行时间过长”对话框。

异步处理并不难，为什么不这样做呢？

var loadTextureFromImage = function(url, callback) {
   // use cyan as the default color.
   var initialColor = new Uint8Array([0,255,255,255]);

   // make a texture with 1x1 pixels so we can use the texture immediately
   // while we wait for the image to load
   var tex = gl.createTexture();
   gl.bindTexture(gl.TEXTURE_2D, tex);
   gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 1, 1, 0, 
                 gl.RGBA, gl.UNSIGNED_BYTE, initialColor); 

   var img = new Image();
   img.onload = function() {
      gl.bindTexture(gl.TEXTURE_2D, tex);
      gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, img);
      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
      callback(img);
   };

   return tex;
};

var loadTexturesFromImages(listOfImages, callback) {
   var numLeftToDownload = listOfImages.length;

   var checkFinished = function() {
     --numLeftToDownload;
     if (numLeftToDownload == 0 && callback) {
       callback();
     }
   };

   return listOfImages.map(function(url) {
     return loadTexturesFromImage(url, checkFinished);
   });
};

这里有一些代码来使用上面的函数

var imagesToLoad = [
   "http://foo.com/image1.jpg",
   "http://foo.com/image2.jpg",
   "data:image/png;base64,iVBORw0KG...",
];

var textures = loadTexturesFromImages(imagesToLoad);

现在您可以开始渲染了。它们都将以青色呈现，并在下载/解码时更新为图像。

如果您想等到它们全部下载完毕，请向loadTexturesFromImages 提供回调。

我想你的问题的简短答案是，“不，你不能同步解码图像”。长答案是如果你想同步解码它们you'll have to decode them yourself。但现在你又回到了上面提到的问题。也就是说，您将冻结浏览器，您的用户可能会收到一个对话框，询问他们是否要终止脚本。