我们可以将 putImageData 添加到 fabric canvas 而不是 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; });

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

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

任何帮助将不胜感激。

Answer 1

fabric.Image() just like the row ctx.drawImage 接受 canvasElement 作为图像源。

所以你可以这样称呼它

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

慢得多

我们可以将 putImageData 添加到 fabric canvas 而不是 fromURL

Can we add putImageData to fabric canvas instead of fromURL

html

javascript

canvas

html5-canvas

fabricjs