我们可以将putImageData添加到结构画布而不是fromURL

Question

fabric.Image.fromURL(hc.toDataURL(), function(img) { // add image onto canvas Canvas.add(img); img.hasControls = false; img.hasBorders = false; img.hasControls = false; img.hasRotatingPoint = false; img.selectable = false; });

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

我还想在画布中间渲染图像。 Fabricjs只需将图像传递给dataURL并按原样渲染。

任何帮助将不胜感激。

Answer 1

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

所以你可以称之为

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慢得多ctx.drawImage