Изменение размера изображения на стороне клиента с помощью JavaScript перед загрузкой на сервер

Я ищу способ изменить размер изображения на стороне клиента с помощью JavaScript (действительно изменить размер, а не только изменить ширину и высоту).
Я знаю, что это возможно сделать во Flash, но я хотел бы избежать этого, если это возможно.

Есть ли где-нибудь в Интернете алгоритм с открытым исходным кодом?

Вот суть, которая делает это: https://gist.github.com/dcollien/312bce1270a5f511bf4a

(версия es6 и версия .js, которые могут быть включены в тег скрипта)

Вы можете использовать его следующим образом:

<input type="file" id="select">
<img id="preview">
<script>
document.getElementById('select').onchange = function(evt) {
    ImageTools.resize(this.files[0], {
        width: 320, // maximum width
        height: 240 // maximum height
    }, function(blob, didItResize) {
        // didItResize will be true if it managed to resize it, otherwise false (and will return the original file as 'blob')
        document.getElementById('preview').src = window.URL.createObjectURL(blob);
        // you can also now upload this blob using an XHR.
    });
};
</script>

Он включает в себя множество обнаружений поддержки и полифилов, чтобы убедиться, что он работает на максимально возможном количестве браузеров.

(он также игнорирует GIF-изображения - в случае, если они анимированы)

Ответ на этот вопрос - да - в HTML 5 вы можете изменять размеры изображений на стороне клиента, используя элемент canvas. Вы также можете взять новые данные и отправить их на сервер. Смотрите этот урок:

http://hacks.mozilla.org/2011/01/how-to-develop-a-html5-image-uploader/

Если вы изменяли размер перед загрузкой, я узнал об этом http://www.plupload.com/

Это делает всю магию для вас любым мыслимым способом.

К сожалению, только изменение размера HTML5 поддерживается браузером Mozilla, но вы можете перенаправить другие браузеры на Flash и Silverlight.

Я только что попробовал, и он работал с моим Android!

Я использовал http://swfupload.org/ во флэш-памяти, он отлично справляется со своей задачей, но размер изменения очень мал. (не могу вспомнить предел) и не возвращается к html4, когда флэш-память недоступна.

http://nodeca.github.io/pica/demo/

В современном браузере вы можете использовать canvas для загрузки / сохранения данных изображения. Но вы должны иметь в виду несколько вещей, если вы изменяете размер изображения на клиенте:

1. У вас будет только 8 бит на канал (jpeg может иметь лучший динамический диапазон, около 12 бит). Если вы не загружаете профессиональные фотографии, это не должно быть проблемой.
2. Будьте осторожны с алгоритмом изменения размера. Большинство средств изменения размера на стороне клиента используют тривиальную математику, и результат хуже, чем мог бы быть.
3. Вам может понадобиться резкость уменьшенного изображения.
4. Если вы хотите повторно использовать метаданные (exif и другие) из оригинала - не забудьте удалить информацию из цветового профиля. Потому что он применяется при загрузке изображения на холст.

Возможно с тэгом canvas (хотя он не переносимый). Там в блоге о том , как повернуть изображение с холста здесь , я полагаю , что если вы можете повернуть его, вы можете изменить его размер. Может быть, это может быть отправной точкой.

Смотрите также эту библиотеку .

Вы можете использовать инфраструктуру обработки изображений javascript для обработки изображений на стороне клиента перед загрузкой изображения на сервер.

Ниже я использовал MarvinJ для создания исполняемого кода на основе примера на следующей странице: «Обработка изображений на стороне клиента перед его загрузкой на сервер»

В основном я использую метод Marvin.scale (...), чтобы изменить размер изображения. Затем я загружаю изображение в виде блоба (используя метод image.toBlob () ). Сервер отвечает обратно, предоставляя URL полученного изображения.

/***********************************************
 * GLOBAL VARS
 **********************************************/
var image = new MarvinImage();

/***********************************************
 * FILE CHOOSER AND UPLOAD
 **********************************************/
 $('#fileUpload').change(function (event) {
	form = new FormData();
	form.append('name', event.target.files[0].name);
	
	reader = new FileReader();
	reader.readAsDataURL(event.target.files[0]);
	
	reader.onload = function(){
		image.load(reader.result, imageLoaded);
	};
	
});

function resizeAndSendToServer(){
  $("#divServerResponse").html("uploading...");
	$.ajax({
		method: 'POST',
		url: 'https://www.marvinj.org/backoffice/imageUpload.php',
		data: form,
		enctype: 'multipart/form-data',
		contentType: false,
		processData: false,
		
	   
		success: function (resp) {
       $("#divServerResponse").html("SERVER RESPONSE (NEW IMAGE):<br/><img src='"+resp+"' style='max-width:400px'></img>");
		},
		error: function (data) {
			console.log("error:"+error);
			console.log(data);
		},
		
	});
};

/***********************************************
 * IMAGE MANIPULATION
 **********************************************/
function imageLoaded(){
  Marvin.scale(image.clone(), image, 120);
  form.append("blob", image.toBlob());
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.marvinj.org/releases/marvinj-0.8.js"></script>
<form id="form" action='/backoffice/imageUpload.php' style='margin:auto;' method='post' enctype='multipart/form-data'>
				<input type='file' id='fileUpload' class='upload' name='userfile'/>
</form><br/>
<button type="button" onclick="resizeAndSendToServer()">Resize and Send to Server</button><br/><br/>
<div id="divServerResponse">
</div>

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

http://jsfiddle.net/bo40drmv/

(этот ответ является улучшением принятого ответа здесь )

Имея в виду, чтобы обработать представление результатов в PHP с чем-то похожим на:

//File destination
$destination = "/folder/cropped_image.png";
//Get uploaded image file it's temporary name
$image_tmp_name = $_FILES["cropped_image"]["tmp_name"][0];
//Move temporary file to final destination
move_uploaded_file($image_tmp_name, $destination);

Если вас беспокоит точка зрения Виталия, вы можете попробовать немного обрезать и изменить размер рабочего jfiddle.

По моему опыту, этот пример был лучшим решением для загрузки изображения с измененным размером: https://zocada.com/compress-resize-images-javascript-browser/

Он использует функцию HTML5 Canvas.

Код такой же «простой», как этот:

compress(e) {
    const fileName = e.target.files[0].name;
    const reader = new FileReader();
    reader.readAsDataURL(e.target.files[0]);
    reader.onload = event => {
        const img = new Image();
        img.src = event.target.result;
        img.onload = () => {
                const elem = document.createElement('canvas');
                const width = Math.min(800, img.width);
                const scaleFactor = width / img.width;
                elem.width = width;
                elem.height = img.height * scaleFactor;

                const ctx = elem.getContext('2d');
                // img.width and img.height will contain the original dimensions
                ctx.drawImage(img, 0, 0, width, img.height * scaleFactor);
                ctx.canvas.toBlob((blob) => {
                    const file = new File([blob], fileName, {
                        type: 'image/jpeg',
                        lastModified: Date.now()
                    });
                }, 'image/jpeg', 1);
            },
            reader.onerror = error => console.log(error);
    };
}

У этой опции есть только один недостаток, связанный с поворотом изображения из-за игнорирования данных EXIF. Над чем я сейчас работаю. Буду обновлять после того, как я закончу с этим.

Другим недостатком является отсутствие поддержки IE / Edge, над которой я тоже работаю. Хотя есть информация в ссылке выше. По обоим вопросам.