Я ищу способ изменения размера изображения на стороне клиента с помощью JavaScript (действительно изменение размера, а не только изменение ширины и высоты).
Я знаю, что это возможно сделать во Flash, но я хотел бы избежать этого, если это возможно.
Есть ли где-нибудь в Интернете алгоритм с открытым исходным кодом?
Вот суть, которая делает следующее: https://gist.github.com/dcollien/312bce1270a5f511bf4a
(версия es6 и версия .js, которая может быть включена в тег script)
Вы можете использовать его следующим образом:
<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 вы можете изменить размер изображений на стороне клиента, используя элемент холста. Вы также можете взять новые данные и отправить их на сервер. См. Этот учебник:
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 для загрузки/сохранения данных изображения. Но вы должны помнить несколько вещей, если вы изменяете размер изображения на клиенте:
Возможно с тэгом canvas (хотя он не портативный). Здесь есть блог о том, как повернуть изображение с помощью 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>Да, с современными браузерами это вполне выполнимо. Даже выполним загрузку файла в виде двоичного файла, выполнив любое количество изменений холста.
(этот ответ является улучшением принятого ответа здесь)
Помня о том, чтобы уловить процесс представления результата в PHP с чем-то вроде:
//File destination
$destination = "/folder/cropped_image.png";
//Get uploaded image file it temporary name
$image_tmp_name = $_FILES["cropped_image"]["tmp_name"][0];
//Move temporary file to final destination
move_uploaded_file($image_tmp_name, $destination);
Если вы беспокоитесь о точке Виталия, вы можете попробовать некоторые обрезки и изменение размера на рабочем столе.
Это можно будет с html5.
Теперь вы можете использовать Silverlight для этого. Вот отличная отправная точка.