Сжатие изображения с помощью javascript?

На странице используется 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; // последний шаг, добавляем блоб в объект который уеден на сервер
				})
			}
		}
	});


}

Помогите пожалуйста.
  • Вопрос задан
  • 1360 просмотров
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы