Вы можете изменить размер изображения также на стороне клиента.В приведенном ниже примере кода используется изображение, загруженное из локальной системы пользователя, для запуска примера без необходимости беспокоиться о проблемах CORS.Фрагмент также сохраняет изображение в виде объекта Blob, который при необходимости можно опубликовать на сервере.
// Creates a canvas containing a resized image
function resizeImage(img) {
var canvas = document.createElement('canvas'),
ctx = canvas.getContext('2d'),
oWidth = img.naturalWidth,
oHeight = img.naturalHeight,
ratio = oWidth / oHeight,
width = (ratio > 1) ? Math.min(200, oWidth) : Math.min(100, oWidth),
height = Math.round(width / ratio);
canvas.width = width;
canvas.height = height;
canvas.className = 'temp-cnv';
document.body.appendChild(canvas);
ctx.drawImage(img, 0, 0, width, height);
return canvas;
}
// Define UI elements
var img = document.getElementById('img'),
loadBut = document.getElementById('load'),
resizeBut = document.getElementById('resize'),
resizedImage; // This will be sent to the server
// Creates a blob and attaches it to an image element
resizeBut.addEventListener('click', function() {
var canvas;
if (img.src === 'https://stacksnippets.net/js') {
return; // Quit, no image loaded
}
canvas = resizeImage(img);
canvas.toBlob(function(blob) {
img.src = URL.createObjectURL(blob);
resizedImage = blob;
canvas.parentElement.removeChild(canvas);
}, 'image/jpeg', 0.99);
});
// Reads an image from the user's local system
loadBut.addEventListener('change', function(e) {
var file = new FileReader();
file.addEventListener('load', function() {
img.src = file.result;
});
file.readAsDataURL(e.target.files[0]);
});
.temp-cnv {
display: none;
}
<input type="file" id="load">
<button id="resize">Resize</button>
<br>
<img src="" id="img">
resizeImage Функция создает временный элемент холста и рассчитывает размеры для этого холста.Здесь изображение всегда сжимается, но вы можете реализовать свои собственные алгоритмы изменения размера.Свойства img.naturalWidth/Height содержат исходный размер изображения.
Когда размер холста был установлен правильно, изображение рисуется на холсте, в этот момент происходит фактическое изменение размера.Затем холст возвращается вызывающей стороне и присваивается локальной переменной canvas.
Затем из вновь созданного холста создается объект Blob.toBlob функция принимает в качестве аргументов функцию обратного вызова, mime-тип и необязательный параметр качества (только для JPEG).Функция обратного вызова присоединяет холст к изображению и сохраняет созданный объект Blob в переменную resizedImage для дальнейшего использования и, наконец, удаляет временный элемент холста.
Хорошо читать в MDN:
метод ctx.drawImage
Объект BLOB
Метод Canvas.toBlob
Изображения с поддержкой CORS
Если вы собираетесь отправить изображение с измененным размером на сервер, вы можете создать объект FormData и добавить изображение к этому объекту.Затем отправьте объект на сервер с помощью AJAX.Примерно так:
var xhr = new XMLHttpRequest(),
form = new FormData();
form.append('imageBlob', resizedImage); // resizedImage is the Blob object created in the first snippet
form.append('imageName', 'THE_NAME_OF_THE_IMAGE');
xhr.addEventListener('load', function (data) {
// AJAX response handler code
});
xhr.open('POST', 'THE_URL_TO_POST_TO');
xhr.send(form);
Обратите внимание, что параметры POST (в данном случае объект FormData ) присоединяются в качестве аргумента вызова xhr.send.