Изменение размеров изображения на стороне браузера

Давно искал способ изменить размер изображения на стороне клиента, чтобы большие фотографии не гнать на сервер и не тратить его ресурсы (на недорогом хостинге оперативной памяти мало для сложных манипуляций). И вот второй раз забросил невод сделал запрос в поисковик, я наткнулся на интересное обсуждение на StackOverflow. Немножко усовершенствовав код, получил такую функцию.


function resizeImage(url, targetWidth, targetHeight) {
var img = document.createElement("img");
img.src = url;

var zoom = targetWidth / img.width;
var canvas = document.createElement("canvas");
canvas.width = img.width * zoom;
canvas.height = img.height * zoom;

var ctx = canvas.getContext("2d");
ctx.scale(zoom, zoom);
ctx.drawImage(img, 0, 0);
var base64 = canvas.toDataURL("image/jpeg");

return base64;
}

Входные параметры:
url
Здесь ожидается не просто URL, а dataUrl, то есть картинка должна быть представлена в виде data:image/jpeg;base64,... Такой формат мы можем получить, например, от FileReader.

targetWidth, targetHeight
Это желаемые размеры будущего изображения. В алгоритме подгоняется только по ширине, сохраняя пропорции изображения.

Возвращает:
dataUrl всё в том же виде: data:image/jpeg;base64,... Результат можно отправить POST-запросом, где его можно обработать на стороне сервера и сохранить.

Кстати, если кого интересует качество сжатия JPEG, то у canvas.toDataURL() есть необязательный второй параметр, который и задает качество. Его следует указывать в диапазоне от 0..1 в дробном формате.

Комментарии

Популярные сообщения из этого блога

Редактор блок-схем

Несколько компьютеров через один ViPNet Client

Год с методом Бутейко