异步加载 canvas 对象的图像

Question

我在节点环境中使用 fabric 3.4。我正在尝试在加载现有 canvas.

期间加载和创建

它的工作方式是，我有一个存储为 json 的现有结构，其中有一个 rect 对象作为图像的占位符。因此，当加载 canvas 并提供图像位置时，它可以用相同的大小和位置替换现有的 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 是异步的，而每个对象上运行s 的 reviver 不是。复活者获得运行，然后在图像加载之前调用呈现 canvas 的回调。如果我让 reviver async 和 await 图像加载，这不会改变任何东西，因为没有什么在等待 reviver 解决。

有没有办法让这个方法起作用？有没有不同的方法来解决这个问题？

Answer 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(() => {
    // ...
  })

异步加载 canvas 对象的图像

Loading images for canvas object asynchronously

node.js

fabricjs