Question

好吧我试图在画布上绘制多个图像blob，并且一旦完成所有从canvas获得单个图像。基本上我正在尝试制作一个spritesheet。

for ( i = 0; i < array.length; i++) {
  img = new Image();
  img.onload=function(){
    ctx.drawImage(img, column*width, row*height, width, height);
    column=column+1;
    if(column==11)
    {
      row=row+1;
      column=0;
    }
    URL.revokeObjectURL(this.src);
  }
  img.crossOrigin = 'anonymous';
  img.src = URL.createObjectURL(array[i]);
}

var DataURL=canvas.toDataURL();

但问题是我得到透明的png。但如果我附加画布文件正确的图像是在画布上。我怀疑这里的异步是毁了它。但是无法弄明白。

Answer 1

首先，是的，你的猜测正确。您正试图在循环之后立即从画布获取图像，但此时没有图像被临时加载。所以你的行动是等待所有图像加载，然后才尝试保存画布。它可以通过承诺来实现，例如：

var promises = [];
for(...your loop) {
  ...
  var promise = new Promise(function(resolve, reject) {
    var img = new Image();
    img.crossOrigin = 'anonymous';
    img.onload=function(){
        ...draw image...
        resolve(...resolve with your context...);
    }
    URL.revokeObjectURL(this.src);
  });
  img.src = URL.createObjectURL(array[i]);
  promises.push(promise);
}

Promise.all(promises).then(function(...array of your contexts...) {
   ...make export here...
});

第二，获取DataUrl的能力取决于图像的来源。如果他们位于sepparate而不是您的域中，并且他们没有带有*或您的域值的跨域标头，您将无法获取数据，因为画布变得污染了内容安全政策（Explaining what is tainted canvas）。但无论如何，如果这种情况发生，Chrome和其他现代浏览器应该在控制台中警告它。

在画布上绘制多个图像。但是toDataURL返回空白

1 个答案: