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

Question

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

Answer 1

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

См there также.

Answer 2

Это возможно с html5.

На данный момент, вы можете использовать Silverlight, чтобы сделать это. Вот отличная отправная точка.

http://www.codeplex.com/SilverlightFileUpld

Answer 3

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

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

Answer 4

Не знаю, почему вы хотите это сделать ... но если вы где изменение размера перед загрузкой я только что узнал, это http://www.plupload.com/ он делает все волшебство для Вас в любых мыслимых метода.

Unfortunatelly HTML5 изменить размер только suported с Mozilla borwser, но вы можете перенаправить другие браузеры на флэш и SilverLight.

Я просто попробовал и работал с моим андроидом !.

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

Answer 5

Вот суть, которая делает это: 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> 

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

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

Answer 6

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

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

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

Answer 7

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

http://jsfiddle.net/bo40drmv/

(этот ответ является улучшение принятого ответа here)

Имея в виду, чтобы поймать обрабатывать представление результата в 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); 

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