我们可以将putImageData添加到结构画布而不是fromURL [英] Can we add putImageData to fabric canvas instead of 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.

推荐答案

fabric.Image（ ） 就像 ctx.drawImage 接受 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的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！