canvas - 如何在发送到服务器之前减小画布图像的大小

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.

现在您可以上传缩小版的画布。

Answer 2

toDataURL

您可以将format属性设置为jpeg，这将立即降低图像大小50%

canvas.toDataURL({
   'format':'jpeg'
});

如果您想要更多压缩，您可以quality为其设置属性。

canvas.toDataURL({
   'format':'jpeg'
   // default value of `quality` is 1 and varies from 0..1
   'quality': 0.5
});

注意： quality属性仅适用于jpeg格式