异步加载画布对象的图像答案

【问题标题】：Loading images for canvas object asynchronously异步加载画布对象的图像
【发布时间】：2019-12-30 21:16:02
【问题描述】：

我在节点环境中使用 Fabric 3.4。我正在尝试在加载现有画布期间加载和创建。

它的工作方式是，我有一个存储为 json 的现有结构，其中有一个 rect 对象，用作图像的占位符。所以当画布被加载时，并提供图像位置，以便它可以用相同的大小和位置替换现有的rect对象。

我想我已经很接近了，尽管任何用于加载没有 url 的图像的文档似乎都已经过时了。这些是本地文件，无法通过任何 url 获得。

import { fabric } from 'fabric';
const Canvas = require('canvas');

var canvasobj = new fabric.StaticCanvas(null, { 
  height: 1000, 
  width: 1000 
});

let template = JSON.parse(data);//data is canvas json

canvasobj.loadFromJSON(template, () => {
  canvasobj.renderAll();
}, 
(o, object) => {
     if(object.stitch.type === 'portrait'){//identifier for placeholder
         const c = Canvas.createCanvas(2304, 3456)
         const ctx = c.getContext('2d')

          Canvas.loadImage(binds.image).then((image) => {
              ctx.drawImage(image, 50, 0, 70, 70)

              fabric.Image.fromURL(c.toDataURL(), (img) => {
                  canvasobj.add(img)
                  canvasobj.remove(object);//remove the placeholder
              }
         }
     }
}
...

我认为这个方法行得通。但是我遇到的问题是Canvas.loadImage 是异步的，而在每个对象上运行的这个 reviver 不是。 revivers 开始运行，然后在图像加载之前调用渲染画布的回调。如果我让 reviver async 和 await 加载图像，这不会改变任何东西，因为没有任何东西在等待 reviver 解决。

有没有办法让这个方法起作用？有没有其他方法可以解决这个问题？

【问题讨论】：

标签： node.js fabricjs

【解决方案1】：

如果您唯一的问题是您需要等待所有的 reviver，您可以创建一个空数组并在每次调用 reviver 时推送一个新的Promise。完成异步图像加载后，解决每个承诺。同时，致电Promise.all() 并等待整个异步内容结束。 revivers 本身似乎是同步调用的，所以当您的脚本到达Promise.all() 时，您将在Pending 状态下拥有所有这些承诺。

const promiseArray = []

canvasobj.loadFromJSON(template, () => {}, 
(o, object) => {
  const p = new Promise((resolve) => {
   //...
    Canvas.loadImage(binds.image).then((image) => {
      //...
      fabric.Image.fromURL(c.toDataURL(), (img) => {
        //...
        resolve()
      })
    })
  })
  promiseArray.push(p)
})

Promise.all(promiseArray)
  .then(() => {
    // ...
  })

【讨论】：