javascript - 我们可以将 putImageData 添加到织物 Canvas 而不是 fromURL

Question

fabric.Image.fromURL(hc.toDataURL(), function(img) {
//将图像添加到 Canvas 上
Canvas.add(img);
img.hasControls = false;
img.hasBorders = false;
img.hasControls = false;
img.hasRotatingPoint = false;
img.selectable = false;
});

上面的代码有助于将图像渲染到 Canvas ，但我想使用类似 putImageData/drawImage 的东西，因为我必须从另一个 Canvas 绘制图像。根据实时操作，使用 toDataURL 处理超过 5 MB 的图像在性能方面非常糟糕。

我还想在 Canvas 中间渲染图像。Fabricjs 只是将图像获取到 DataURL 并按原样呈现。

我们将不胜感激。

Answer 1

fabric.Image()就像行 ctx.drawImage接受一个 canvasElement 作为 imageSource。

所以你可以这样调用它

canvas.add(new fabric.Image(yourCanvasToDraw));

如果你想让它在 Canvas 中居中:

canvas.add(new fabric.Image(c, {left: canvas.width/2-c.width/2, top: canvas.height/2-c.height/2}));

请注意，ctx.getImageData+ctx.putImageData 至少与 ctx.toDataURL 一样慢，两者都比 ctx.drawImage