Я решил эту проблему несколько лет назад и загрузил свое решение на github как https://github.com/rossturner/HTML5-ImageUploader
В ответе Роберта используется решение, предложенное в сообщении в блоге Mozilla Hacks , однако я обнаружил, что это приводит к очень низкому качеству изображения при изменении размера до 2: 1 (или кратного). Я начал экспериментировать с различными алгоритмами изменения размера изображения, хотя большинство из них оказались довольно медленными или не очень хорошими по качеству.
Наконец, я пришел к решению, которое, на мой взгляд, выполняется быстро и также имеет довольно хорошую производительность - поскольку решение Mozilla по копированию с одного холста на другой работает быстро и без потери качества изображения при соотношении 2: 1 при заданном значении x пикселей в ширину и y пикселей в высоту, я использую этот метод изменения размера холста, пока изображение не станет между x и 2 x , и y и 2 y . Затем я перехожу к алгоритмическому изменению размера изображения для заключительного «шага» изменения размера до целевого размера. Попробовав несколько разных алгоритмов, я остановился на билинейной интерполяции, взятой из блога, который больше не находится в сети, но доступен через Интернет-архив. , что дает хорошие результаты, вот соответствующий код:
ImageUploader.prototype.scaleImage = function(img, completionCallback) {
var canvas = document.createElement('canvas');
canvas.width = img.width;
canvas.height = img.height;
canvas.getContext('2d').drawImage(img, 0, 0, canvas.width, canvas.height);
while (canvas.width >= (2 * this.config.maxWidth)) {
canvas = this.getHalfScaleCanvas(canvas);
}
if (canvas.width > this.config.maxWidth) {
canvas = this.scaleCanvasWithAlgorithm(canvas);
}
var imageData = canvas.toDataURL('image/jpeg', this.config.quality);
this.performUpload(imageData, completionCallback);
};
ImageUploader.prototype.scaleCanvasWithAlgorithm = function(canvas) {
var scaledCanvas = document.createElement('canvas');
var scale = this.config.maxWidth / canvas.width;
scaledCanvas.width = canvas.width * scale;
scaledCanvas.height = canvas.height * scale;
var srcImgData = canvas.getContext('2d').getImageData(0, 0, canvas.width, canvas.height);
var destImgData = scaledCanvas.getContext('2d').createImageData(scaledCanvas.width, scaledCanvas.height);
this.applyBilinearInterpolation(srcImgData, destImgData, scale);
scaledCanvas.getContext('2d').putImageData(destImgData, 0, 0);
return scaledCanvas;
};
ImageUploader.prototype.getHalfScaleCanvas = function(canvas) {
var halfCanvas = document.createElement('canvas');
halfCanvas.width = canvas.width / 2;
halfCanvas.height = canvas.height / 2;
halfCanvas.getContext('2d').drawImage(canvas, 0, 0, halfCanvas.width, halfCanvas.height);
return halfCanvas;
};
ImageUploader.prototype.applyBilinearInterpolation = function(srcCanvasData, destCanvasData, scale) {
function inner(f00, f10, f01, f11, x, y) {
var un_x = 1.0 - x;
var un_y = 1.0 - y;
return (f00 * un_x * un_y + f10 * x * un_y + f01 * un_x * y + f11 * x * y);
}
var i, j;
var iyv, iy0, iy1, ixv, ix0, ix1;
var idxD, idxS00, idxS10, idxS01, idxS11;
var dx, dy;
var r, g, b, a;
for (i = 0; i < destCanvasData.height; ++i) {
iyv = i / scale;
iy0 = Math.floor(iyv);
// Math.ceil can go over bounds
iy1 = (Math.ceil(iyv) > (srcCanvasData.height - 1) ? (srcCanvasData.height - 1) : Math.ceil(iyv));
for (j = 0; j < destCanvasData.width; ++j) {
ixv = j / scale;
ix0 = Math.floor(ixv);
// Math.ceil can go over bounds
ix1 = (Math.ceil(ixv) > (srcCanvasData.width - 1) ? (srcCanvasData.width - 1) : Math.ceil(ixv));
idxD = (j + destCanvasData.width * i) * 4;
// matrix to vector indices
idxS00 = (ix0 + srcCanvasData.width * iy0) * 4;
idxS10 = (ix1 + srcCanvasData.width * iy0) * 4;
idxS01 = (ix0 + srcCanvasData.width * iy1) * 4;
idxS11 = (ix1 + srcCanvasData.width * iy1) * 4;
// overall coordinates to unit square
dx = ixv - ix0;
dy = iyv - iy0;
// I let the r, g, b, a on purpose for debugging
r = inner(srcCanvasData.data[idxS00], srcCanvasData.data[idxS10], srcCanvasData.data[idxS01], srcCanvasData.data[idxS11], dx, dy);
destCanvasData.data[idxD] = r;
g = inner(srcCanvasData.data[idxS00 + 1], srcCanvasData.data[idxS10 + 1], srcCanvasData.data[idxS01 + 1], srcCanvasData.data[idxS11 + 1], dx, dy);
destCanvasData.data[idxD + 1] = g;
b = inner(srcCanvasData.data[idxS00 + 2], srcCanvasData.data[idxS10 + 2], srcCanvasData.data[idxS01 + 2], srcCanvasData.data[idxS11 + 2], dx, dy);
destCanvasData.data[idxD + 2] = b;
a = inner(srcCanvasData.data[idxS00 + 3], srcCanvasData.data[idxS10 + 3], srcCanvasData.data[idxS01 + 3], srcCanvasData.data[idxS11 + 3], dx, dy);
destCanvasData.data[idxD + 3] = a;
}
}
};
Это уменьшает изображение до ширины config.maxWidth
, сохраняя исходное соотношение сторон. На момент разработки это работало на iPad / iPhone Safari в дополнение к основным настольным браузерам (IE9 +, Firefox, Chrome), поэтому я ожидаю, что он все еще будет совместим, учитывая более широкое распространение HTML5 сегодня. Обратите внимание, что вызов canvas.toDataURL () принимает тип MIME и качество изображения, что позволит вам контролировать качество и формат выходного файла (потенциально отличный от ввода, если хотите).
Единственный момент, который не охватывает это - сохранение информации об ориентации, без знания этих метаданных размер изображения изменяется и сохраняется как есть, теряя метаданные внутри изображения для ориентации, что означает, что изображения, сделанные на планшетном устройстве «вверх ногами», были отображаются как таковые, хотя они были бы перевернуты в видоискателе камеры устройства. Если это вызывает беспокойство, в этом блоге есть хорошее руководство и примеры кода о том, как этого добиться, и я уверен, что он может быть интегрирован в приведенный выше код.