如何在發送到服務器之前減小畫布圖像的大小

Question

我正在使用Fabric.js。當我嘗試使用canvas.toDataURL（'image/png'）發送畫布圖像到服務器時，大約需要40秒。我把它轉換成blob，但也需要25-30秒。當我減小畫布尺寸時，它減少了背景圖像的大小，但是對象（文本和圖像）出現在背景圖像的外部（減少不成比例）。我怎樣才能最大限度地縮短上傳時間？

Answer 1

你需要採取當前畫布的快照與新大小的新畫布：

例如，你可以做到這一點。

var fabricCanvas = document.getElementById('fcanvas'); //real ID here 
var scaledCanvas = document.createElement('canvas'); //off-screen canvas 

scaledCanvas.width = 400; //size of new canvas, make sure they are proportional 
scaledCanvas.height = 300; //compared to original canvas 

// scale original image to new canvas 
var ctx = scaledCanvas.getContext('2d'); 
ctx.drawImage(fabricCanvas, 0, 0, scaledCanvas.width, scaledCanvas.height); 

//extract image 
var data = scaledCanvas.toDataURL(); //no need to specify PNG as that's the def. 

現在您可以上傳縮小版的畫布。