如何等待多个图像加载到画布中并转换为base64？

Question

我正在尝试在HTML5中获得画布的base64版本。

目前，我从画布上获得的base64图像为空白。

我发现类似的问题，例如这个问题：

HTML Canvas图像到Base64问题

但是，我的问题是，因为我要在画布中添加2张图像，所以我无法使用这些答案中提供的示例，因为它们中的大多数都使用单个图像。

我知道我必须等到画布图像正确加载后才能尝试获取base64图像。 但是我不知道该怎么办。

这是我的代码：

 var canvas = document.getElementById('myCanvas'); var context = canvas.getContext('2d'); context.canvas.width = 1000; context.canvas.height = 1000; var imageObj1 = new Image(); imageObj1.src = "http://www.offthegridnews.com/wp-content/uploads/2017/01/selfie-psuDOTedu.jpg"; imageObj1.onload = function() { context.drawImage(imageObj1, 0, 180, canvas.width, canvas.height); }; var imageObj2 = new Image(); imageObj2.src = "http://www.publicdomainpictures.net/pictures/150000/velka/banner-header-tapete-145002399028x.jpg" imageObj2.onload = function() { context.drawImage(imageObj2, 0, 0, canvas.width, 180); }; // get png data url //var pngUrl = canvas.toDataURL(); var pngUrl = canvas.toDataURL('image/png'); // get jpeg data url var jpegUrl = canvas.toDataURL('image/jpeg'); $('#base').val(pngUrl); 

  <div class="contents" style="overflow-x:hidden; overflow-y:scroll;"> <div style="width:100%; height:90%;"> <canvas id="myCanvas" class="snap" style="width:100%; height:100%;" onclick="takephoto()"></canvas> </div> </div> <p> This is the base64 image </p> <textarea id="base"> </textarea> 

这是可行的FIDDLE：

https://jsfiddle.net/3p3e6Ldu/1/

有人可以在这个问题上提出建议吗？

提前致谢。

编辑：

如下面的注释中所建议，我尝试使用一个计数器，当计数器达到特定数字时，我将画布转换为base64。

像这样： https : //jsfiddle.net/3p3e6Ldu/4/

Answer 1

在您的两个示例（一个来自问题的示例和一个来自注释的示例）中，命令的顺序并没有真正尊重手头任务的异步性质。 在后面的示例中，应将if( count == 2 )块放入onload回调中，以使其正常工作。

但是，即使那样，您仍然会遇到下一个问题：您正在从不同的域加载图像。 您仍然可以绘制它们（在画布中或使用<img>标记），但是您不能直接访问它们的内容。 即使使用<canvas>元素也不走弯路。

我将代码更改为如果图像托管在同一域上则可以运行。 我还使用了一个函数来加载图像并承诺处理回调。 使用回调和计数变量的直接方法对我来说似乎容易出错。 如果您查看相应的小提琴 ，您将注意到显示的SecurityError 。 这是我提到的相同原产地政策的上述问题的结果。

我以前在类似方向上的问题是关于如何检测，如果我在添加一些图像后仍能读取<canvas>的内容。

const canvas = document.getElementById('myCanvas');
const context = canvas.getContext('2d');
context.canvas.width = 1000;
context.canvas.height = 1000;

// function to retrieve an image
function loadImage(url) {
  return new Promise((fulfill, reject) => {
    let imageObj = new Image();
    imageObj.onload = () => fulfill(imageObj);
    imageObj.src = url;
  });
}

// get images
Promise.all([
    loadImage("http://www.offthegridnews.com/wp-content/uploads/2017/01/selfie-psuDOTedu.jpg"),
    loadImage("http://www.publicdomainpictures.net/pictures/150000/velka/banner-header-tapete-145002399028x.jpg"),
  ])
  .then((images) => {
    // draw images to canvas
    context.drawImage(images[0], 0, 180, canvas.width, canvas.height);
    context.drawImage(images[1], 0, 0, canvas.width, 180);

    // export to png/jpg
    const pngUrl = canvas.toDataURL('image/png');
    const jpegUrl = canvas.toDataURL('image/jpeg');

    // show in textarea
    $('#base').val(pngUrl);
  })
  .catch( (e) => alert(e) );