toDataURL

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格式

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

2 个答案:

toDataURL