如何同步将 fabric js canvas 转换为带背景的图像？

Question

首先，我从另一个 canvas 获取图像 url（blob 或 data64）用于 fabric js canvas 的背景。我检查了 setBackgroundImage 效果很好。

但是当我尝试将 fabric js 的 canvas 保存到图像时，背景图像消失了。它不存在。我怀疑这是因为 setBackgroundImage 函数是异步的。

我该如何解决？我想让它同步...

  saveResultImg(src) {
    //set fabric js canvas's background
    canvas.setBackgroundImage(
      src,
      canvas.renderAll.bind(canvas)
    );

    //save fabric js canvas with it's background to image
    const resultImg = new Image();
    resultImg.src = canvas.toDataURL('image/png');
    return resultImg;
  }

Answer 1

setBackgroundImage 方法包含回调。通过将您的 toDataURL 调用移到 setBackgroundImage 回调中，然后向您的函数添加回调，您将能够在图像准备好后使用该回调对图像执行某些操作。

将函数改成这样：

  function saveResultImg(src, callback) {
    //set fabric js canvas's background
    canvas.setBackgroundImage(src, function() {
      canvas.renderAll.bind(canvas)
      //save fabric js canvas with it's background to image
      const resultImg = new Image();
      resultImg.src = canvas.toDataURL('image/png');
      callback(resultImg);
    });
  }

然后这样称呼它：

saveResultImg(src, function(img) {
  //image is ready
  console.log(img);
});

如何同步将 fabric js canvas 转换为带背景的图像？

How to convert fabric js canvas to image with background Synchronously?

javascript

asynchronous

fabricjs