时间戳

首页 > 解决方案 > 如何将fabric js画布同步转换为具有背景的图像？

javascript - 如何将fabric js画布同步转换为具有背景的图像？

问题描述

首先，我从另一个画布获取织物 js 画布背景的图像 url（blob 或 data64）。我检查了 setBackgroundImage 效果很好。

但是当我尝试将fabric js的画布保存到图像时，背景图像消失了。它不存在。我怀疑这是因为 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;
  }

标签： javascriptasynchronousfabricjs

解决方案

该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);
});

推荐阅读