Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 11.01.2014, 23:06
Новичок на форуме
Отправить личное сообщение для Webnode Посмотреть профиль Найти все сообщения от Webnode
 
Регистрация: 11.01.2014
Сообщений: 6

Как прочитать параметры файла JPEG ещё в браузере, до загрузки на сервер?
Добрый день!

Столкнулся с задачей определения параметров изображения в формате JPEG прямо в браузере, ещё до загрузки на сервер, интересуют следующие наиболее важные поля:
- качество изображения (quality)
- размер по вертикали и горизонтали
- тип цветового пространства (sRGB, AdobeRGB и пр.)

Это необходимо для защиты и без того слабого канала от массовой загрузки фото-хлама низкого качества, неподходящих размеров и цветового пространства. На сервере при помощи утилит ImageMagick я конечно это всё узнаЮ уже сейчас, а хочется отсекать ещё на подступах, до загрузки, прямо в браузере.

Понимаю, что это делается на JS+HTML5+FileReader (базовых полей про размер, имя и MIME-тип совсем недостаточно), навыки по написанию скриптов есть, адаптировать смогу, вопрос - где взять/почитать про это? Поиск в сети ничего вразумительного не дал, в основном из PNG при помощи canvas делают JPEG нужного качества и постят на сервер, а мне бы такой ImageMagick да для браузера!

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

Заранее спасибо за ответ!
Ответить с цитированием
  #2 (permalink)  
Старый 11.01.2014, 23:54
Аватар для kobezzza
Быдлокодер;)
Отправить личное сообщение для kobezzza Посмотреть профиль Найти все сообщения от kobezzza
 
Регистрация: 19.11.2010
Сообщений: 4,338

Считываешь картинку через FileReader, потом загоняешь в канвас, делаешь нужные там тебе трансформации, потом делаем toBlob с указанием нужного тебе качества сжатия и посылаешь аяксом на сервер.

Для уменьшения размера можно пользоваться встроенном в canvas api (drawImage), однако когда я делал такую штуку, то мне не понравилось качество получаемой картинки и я написал свою реализацию уменьшения используя алгоритм Ланцоша, а чтобы не лочился браузер запихнул операцию в отдельный поток (WebWorker).

Полифил для toBlob (не во всех браузерах есть)

if (!HTMLCanvasElement.prototype.toBlob) {
	var hasBlobConstructor = (function () {
		try {
			return Boolean(new Blob());

		} catch (ignore) {
			return false;
		}
	})();

	var hasArrayBufferViewSupport = hasBlobConstructor && (function () {
		try {
			return new Blob([new Uint8Array(100)]).size === 100;

		} catch (ignore) {
			return false;
		}
	})();

	HTMLCanvasElement.prototype.toBlob = function (callback,opt_mime,opt_quality) {
		var __NEJS_THIS__ = this;
		
		if (typeof opt_mime === "undefined") { opt_mime = 'image/png'; }
		if (typeof opt_quality === "undefined") { opt_quality = 1; }
		if (opt_mime === 'image/png') {
			callback(this['msToBlob']());
			return;
		}

		var byteString = atob(this.toDataURL(opt_mime, opt_quality).replace(/[^,]*,/, ''));

		var buffer = new ArrayBuffer(byteString.length),
			intArray = new Uint8Array(buffer);

		for (var i = -1; ++i < byteString.length;) {
			intArray[i] = byteString.charCodeAt(i);
		}

		if (hasBlobConstructor) {
			callback(new Blob(
				[hasArrayBufferViewSupport ? intArray : buffer],
				{type: opt_mime}
			));

			return;
		}

		var builder = new window['MSBlobBuilder']();
		builder['append'](buffer);

		callback(builder['getBlob'](opt_mime));
	}
}
__________________
kobezzza
code monkey

Последний раз редактировалось kobezzza, 12.01.2014 в 00:03.
Ответить с цитированием
  #3 (permalink)  
Старый 12.01.2014, 00:19
Новичок на форуме
Отправить личное сообщение для Webnode Посмотреть профиль Найти все сообщения от Webnode
 
Регистрация: 11.01.2014
Сообщений: 6

Спасибо, но именно ваш ответ из мэйнстрима всех найденных мной вариантов, на stackoverflow например.

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

То есть мне нужна фотки качеством не менее 95%, размером не менее 1200x1200 точек, и с профилем sRGB. Именно эти параметры я хочу прочитать на клиенте сразу, как он только выбрал для загрузки фотки.

P.S. Не всегда может кстати быть и EXIF & IPTC в изображении, однако мои костыли на серверной стороне видят несоответствие и в этом случае и бракуют фото.

Последний раз редактировалось Webnode, 12.01.2014 в 19:17.
Ответить с цитированием
  #4 (permalink)  
Старый 12.01.2014, 00:59
Аватар для kobezzza
Быдлокодер;)
Отправить личное сообщение для kobezzza Посмотреть профиль Найти все сообщения от kobezzza
 
Регистрация: 19.11.2010
Сообщений: 4,338

Webnode, ну дык canvas может дать представление изображения в виде массива (getImageData), исследуя этот массив можно сделать заключение о качестве изображения, разрешении и т.д.
__________________
kobezzza
code monkey

Последний раз редактировалось kobezzza, 12.01.2014 в 01:14.
Ответить с цитированием
  #5 (permalink)  
Старый 12.01.2014, 03:57
Аватар для danik.js
Профессор
Отправить личное сообщение для danik.js Посмотреть профиль Найти все сообщения от danik.js
 
Регистрация: 11.09.2010
Сообщений: 8,804

Webnode, думаю лучше сначала разобраться какая инфа где содержится, потом поискать готовые скрипты для разбора jpeg. Например есть же exif ридер на js.
__________________
В личку только с интересными предложениями
Ответить с цитированием
  #6 (permalink)  
Старый 13.01.2014, 13:28
Профессор
Отправить личное сообщение для Яростный Меч Посмотреть профиль Найти все сообщения от Яростный Меч
 
Регистрация: 12.04.2010
Сообщений: 557

Сообщение от danik.js
лучше сначала разобраться какая инфа где содержится
+1
в заголовочной части любого формата есть данные о размерах и всё прочее.
прочитываем файл как readAsArrayBuffer, находим нужные байты, делаем выводы.
Ответить с цитированием
  #7 (permalink)  
Старый 13.01.2014, 18:44
Новичок на форуме
Отправить личное сообщение для Webnode Посмотреть профиль Найти все сообщения от Webnode
 
Регистрация: 11.01.2014
Сообщений: 6

+1 что надо содержимое читать, как автор топика поддерживаю!

Всё уже придумано до нас, есть библиотека, что читает параметры JPEG, даже drag'n'drop поддерживает примерчик, есть всё, кроме качества(степени сжатия) - это нужно вычислять, парся содержимое файла, как делает ImageMagick.

Библиотека - http://benno.id.au/blog/2009/12/30/h...leapi-jpegmeta ссылка на гитхаб в комментах. К ней - список полей TIFF, может кому пригодится...

Попутно была найдена интересная штука - "онлайн" ImageMagick

Рассказы о невозможности найти качество сходу, так как в файл не пишется - раз, два В первой ссылке этого блока есть кусок кода на C для думок, оттуда видимо и оттолкнусь для дописания jpegmeta(см. первый, так сказать лейбмотивный линк).

Есть здравые речи про двойную перепаковку из 50% качества в 90% или типа того в линке этом тогда всё совсем неопределённо становится, но это пограничный случай воспалённого сознания креатора картинок.

И ещё мнение, что качество - вещь пропиетарная для каждой программы тут, и надо считать в своих "попугаях" коэффициент сжатия. Вот только сильно от сюжета фото зависит это дело...
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как прочитать контент из файла и добавить его к текущей странице fedotxxl jQuery 0 01.12.2011 13:12
Как узнать размер загружаемого файла? shkarbatov Серверные языки и технологии 5 14.08.2011 16:12
Проблема с загрузкой файла на сервер shkarbatov Серверные языки и технологии 8 13.08.2011 00:27
Поле загрузки файла. как опусташить? clgs Элементы интерфейса 1 26.06.2009 13:46
глюк форума Gvozd Сайт Javascript.ru 11 18.03.2009 13:37