Как уменьшить размер изображения холста перед отправкой на сервер

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. 

Теперь вы можете загрузить уменьшенную версию холста.