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

问题描述

fabric.Image.fromURL（hc.toDataURL（），function（img）{
//将图片添加到画布上
Canvas.add（img）;
img.hasControls = false;
img.hasBorders = false;
img.hasControls = false;
img.hasRotatingPoint = false;
img.selectable = false;
}）;

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

Above code helps in rendering a image to canvas but I want to use something like putImageData/drawImage because I have to draw the image from another canvas . And as per real time operation using toDataURL for more than 5 MB images is very bad when performance comes to picture.

我还想在中间渲染图像帆布。
Fabricjs只需将图像带到toDataURL并按原样呈现。

I also want to render the image on the middle of the canvas .Fabricjs just takes the image toDataURL and renders it as it is.

任何帮助都将受到赞赏。

Any help will be appreciated.

推荐答案

就像接受 canvasElement 作为imageSource。

fabric.Image() just like the row ctx.drawImage accepts a canvasElement as imageSource.

所以你可以称之为

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

如果你想让它在画布中居中：

And if you want it centered in the 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

Note that ctx.getImageData+ctx.putImageData is at least as slow as ctx.toDataURLwhich both are incredibly slower than ctx.drawImage

这篇关于我们可以将putImageData添加到结构画布而不是fromURL的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！