Можно ли добавить putImageData на ткани холст вместо 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; });

Приведенный выше код помогает в рендеринга изображения на холсте, но я хочу использовать что-то вроде putImageData/DrawImage, потому что я должен сделать изображение из другого холста. И как в режиме реального времени, используя toDataURL для изображений более 5 МБ, очень плохо, когда производительность приходит в картину.

Я также хочу сделать изображение на середине холста. Fabricjs просто берет изображение toDataURL и отображает его как есть.

Любая помощь будет оценена по достоинству.

Answer 1

fabric.Image() как раз как строка ctx.drawImage принимает canvasElement как изображениеSource.

Таким образом, вы можете просто назвать это как

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