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

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

1 个答案: