我们能否将putImageData添加到fabric画布中，而不是使用fromURL函数？

Question

以下代码可以帮助在画布上呈现图像，但是我想使用putImageData/drawImage之类的东西，因为我必须从另一个画布上绘制图像。而且实时操作中，当性能成为问题时，对于超过5 MB的图像使用toDataURL非常糟糕。

我还想将图像呈现在画布的中央。 Fabricjs只需要使用图像的toDataURL就可以直接呈现它。

任何帮助都将不胜感激。

- graphics123

Answer 1

fabric.Image() 就像 ctx.drawImage 一样，接受一个 canvasElement 作为图片来源。

因此，你可以像这样调用：

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

如果您希望将其居中于画布中：

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慢得多。

- Kaiido

---

请您能否添加一个带有小例子的jsfiddle。我对Fabricjs非常陌生，在处理超过5MB的图像渲染方面感到困难。 - graphics123

是的，非常感谢，现在我能够超快地渲染图像了。但有一个问题，我不想平移图像（我的意思是我需要以某种方式将其选择为false）。 - graphics123