我們可以添加putImageData面料帆布，而不是fromURL

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面料帆布，而不是fromURL

以上代碼有助於渲染到畫布上的圖像，但我想使用類似putImageData/drawImage方法，因爲我不得不從另一個畫布上繪製圖像。並且根據實時操作，使用toDataURL超過5 MB圖像在性能出現問題時非常糟糕。

我也想呈現在畫布中間的圖像。 Fabricjs只需將圖像toDataURL並按原樣呈現。

任何幫助將不勝感激。

來源

2015-10-13 subhfyu546754

fabric.Image()就像行ctx.drawImage接受canvasElement作爲imageSource。

所以你可以這樣調用它

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

來源

2015-10-14 01:17:45 Kaiido

可以請一個小例子添加的jsfiddle。我對Fabricjs非常陌生，在渲染超過5 MB的圖像時發現很難處理這些問題。 – subhfyu546754

非常感謝你，我現在能夠非常快速地渲染圖像。但一個阻止者，我不想平移圖像（我的意思是我需要使圖像可選擇爲false） – subhfyu546754

我們可以添加putImageData面料帆布，而不是fromURL

回答

相關問題