Изменение размеров изображения на стороне браузера
Давно искал способ изменить размер изображения на стороне клиента, чтобы большие фотографии не гнать на сервер и не тратить его ресурсы (на недорогом хостинге оперативной памяти мало для сложных манипуляций). И вот второй раз забросил невод сделал запрос в поисковик, я наткнулся на интересное обсуждение на 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 в дробном формате.
Комментарии
Отправить комментарий