На странице используется cropper.js. После обрезки кропером картинки, её нужно оптимизировать. Как это можно сделать с помощью javascript ?
Фрагмент кода:
cropper() {
let ratio = 3 / 2;
let position = +data.preview.split('-')[2] - 1;
let image = document.getElementById(data.preview);
data.canvas[position] = '';
data.croppers[position] = '';
if (image.cropper) image.cropper.destroy();
if( position > 4 ) ratio = 1.2 / 1;
else ratio = 3 / 2;
data.croppers[position] = new Cropper(image, {
aspectRatio: ratio,
viewMode: 3,
autoCrop: true,
autoCropArea: 1,
rotatable: true,
preview: document.querySelector('.' + data.preview),
autoCropArea: 1,
ready: function (event) {
document.querySelector('.editImage-controls__button').onclick = function () {
let canvas;
let newWidth = document.querySelector('.editImage__img-wrap').innerWidth / data.croppers[position].canvasData.width;
let newHeight;
if( position > 4 ) newHeight = newWidth / 1.2 * 1;
else newHeight = newWidth / 3 * 2;
// метод кропера создающий канвас из обрезанного изображения
canvas = data.croppers[position].getCroppedCanvas({
width: newWidth,
height: newHeight,
});
console.log( canvas.toDataURL( "image/jpeg", 0.7 ) );
// Здесь нужно как то сжать изображение.
// Пока нашел только toDataURL, но он создаёт из канваса изображение в base64, а мне нужен blob и не работает сжатие.
canvas.toBlob(function (blob) {
data.canvas[position] = blob; // последний шаг, добавляем блоб в объект который уеден на сервер
})
}
}
});
}
Помогите пожалуйста.
