问题
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;
});
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.
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.
回答1:
fabric.Image() just like the row ctx.drawImage accepts a canvasElement as imageSource.
So you can just call it like
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}));
Note that ctx.getImageData+ctx.putImageData is at least as slow as ctx.toDataURLwhich both are incredibly slower than ctx.drawImage
来源：https://stackoverflow.com/questions/33099145/can-we-add-putimagedata-to-fabric-canvas-instead-of-fromurl