Сжатие изображения на клиенте
Моя функция для сжатия на клиенте и преобразования в webp ниже.
Вопрос - почему при сжатии одного и того же изображения весом 2,5мб в десктопном хроме оно сжимается до 15кб, а в любом мобильном браузере (на айфоне во всяком случае) до 250кб ? И как это можно поправить.
function arrayBufferToWebP(data, { quality, width, height } = {}) {
return new Promise(function (resolve, reject) {
var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');
var image = new Image();
image.src = URL.createObjectURL(new Blob([data]));
image.crossOrigin = 'anonymous';
image.onload = function (e) {
if (width && !height) {
if (width < e.target.width) {
canvas.width = width;
canvas.height = (width / e.target.width) * e.target.height;
} else {
canvas.width = e.target.width;
canvas.height = e.target.height;
}
} else if (!width && height) {
if (height < e.target.height) {
canvas.width = (height / e.target.height) * e.target.width;
canvas.height = height;
} else {
canvas.width = e.target.width;
canvas.height = e.target.height;
}
} else {
canvas.width = width || e.target.width;
canvas.height = height || e.target.height;
}
URL.revokeObjectURL(e.target.src);
context.drawImage(e.target, 0, 0, canvas.width, canvas.height);
const dataURL = canvas.toDataURL('image/webp', quality);
const base64 = dataURL.split(',')[1];
const binaryString = atob(base64);
const length = binaryString.length;
const uint8Array = new Uint8Array(length);
for (let i = 0; i < length; i++) {
uint8Array[i] = binaryString.charCodeAt(i);
}
resolve({
uint8Array,
base64,
});
};
image.onerror = function (e) {
reject(e);
};
});
}