Сохранение Canvas в grayscale 8bit jpeg или png
 

Форум расскажи есть ли какие либо готовые библиотеки или простой способ вывода на сохранение в javascript на стороне клиента в 8 битный jpeg ? Если в двух словах я написал на яс приложение для обрезания фоток с вебкамеры и сохранением их. Собственно потребовалось их преобразовать в grayscale 256 формат. Как убрать цвет я с легкостью нашел, но таки сам сохраненный файл так и остается 32 битным (24 на цвет 8 на альфу), а есть нужда сохранять именно 8 бит т.б. 256 grayscale. Ткните носом в хорошую инфу или помогите реализовать. :help:

В гугле отыскалась небольшая кучка конвертеров которые способны сохранить файл в скажем gif или pdf, но вот что бы конкретно как сделать вывод файла jpeg с параметрами мне пока не удалось найти.

JPEG, это не индексированная палитра.

https://habrahabr.ru/post/173773/

Я знаю. Мне не требуется индексированная палитра. Мне нужен файл в таком вот формате. посути jpeg ли это будет или png не суть важно, но не gif. но нужно 256 оттенков серого.

JPEG и PNG, это 24-битный цвет в любом случае. Чего вы хотите, из из серой 24 битной палитры вычесть лишнее? А смысл?

Вот давайте не будем про смысл )) Смысл - Есть. Заказчик требует. Файл что я загрузил выше имеет 8 битную палитру при формате PNG. Так что ваше утверждение что это в любом 24-битный цвет я не могу принять всерьез. Единственное что этот файл был получен с использованием сторонних приложений (Xnview), а мне нужно на прямую получать при сохранении 8 битный файл в javascript. Все это происходит на стороне пользователя, без загрузки на сервер если что.

PNG бывает двух форматов - PNG24 и PNG8. Canvas не работает с индексированной палитрой, вы не сможете получить такую палитру на выходе. Нужна индексированная, значит конвертируйте. Если же ограничить количество оттенков серого в JPEG или PNH24 до 256, то файл при этом как был 24-битным так им и останется.

Но сторонними средствами у меня есть возможность создать 8 битный Джепег у которого 256 отенков серого.

Я за этим и пришел.. Расскажите как. Я не знаю как это сделать.

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

Что за глупости, то что в изображении будет 256 оттенков (хотя из-за артефактов присущих этому формату добиться точно заданного количества вряд ли получится) не означает, что оно превратилось в 8 битное индексированное. Индексированная палитра, это вообще иное.

Файл просто откройте что я выложил, и считайте в свойствах битность.


Мне не нужна четкая палитра. Я понимаю что реальных цветов там 16 за глаза. Можно палитру эту топором рубить. Всяк в оставшихся 256 хватит оттенков что бы изображение не пострадало. Я делаю изображение серым с помощью кода

var imageData = context.getImageData(0, 0, 320, 400);
                    var data = imageData.data;
					//alert("Hello gray!.2");
					
					for(var i = 0; i < data.length; i	+=4) {
						var brightness = 0.25 * data[i] + 0.70 * data[i + 1] + 0.09 * data[i + 2] ;
						// red
						data[i] = brightness;
						// green
						data[i + 1] = brightness;
						// blue
						data[i + 2] = brightness;
						
						data[i + 3] = 255;
						
						
						
															}
					context.putImageData(imageData, 0, 0);

И теперь есть необходимость сохранить файл в 8 бит.


Время есть. Но пару недель на это тратить просто не разумно. Задача редкая, поэтому я и не смог нагуглить библиотеку. Просто какая есть возможность именно для формирования сохраненного файла в 8бит.

Вы то хоть сами в курсе того, что выложили? Ничего, что выложенное это PNG? Если это сохранено как PNG8, значит это индексированная палитра, 8 бит на цвет. Пороть же чушь о создании 8-битного JPEG не надо.

Вы хотя бы на Вики почитайте что такое 8-битная палитра и в каких форматах изображения ее можно сохранить (если ориентироваться на веб), и что такое HighColor и TrueColor изображения.

Да емае. Я вкурсе. Мне подойдет и конвертация в 8битный пнг. Я писал об этом выше. Главное что бы не 32 как он идет по стандарту. Как получить на выходе PNG8 при сохранении через

//alert("Hello save!.");
				canvas.toDataURL('image/jpg');
		        var gh = canvas.toDataURL('image/jpg', 1.0);

			    var a  = document.createElement('a');
			    a.href = gh;
			    a.download = 'photo.jpg';

Вы знаете как это сделать ? Я нет. И где узнать не знаю.

Никак, canvas не отдает изображения в индексированной палитре, даже если и PNG (это по умолчанию). Как конвертировать TrueColor ссылка дана, и вы сами подобное находили. И почему бы это не возложить на сервере - imagemagick или иное доступное на нем. Неужто заказчику так принципиально что именно будет конвертировать TrueColor в индексированную палитру? На клиенте в градациях серого можно посмотреть, а серверу отдали на сохранение.

Я порылся в своём старом коде и нашел немного другие множители:

Math.floor((data[0]*11+data[1]*16+data[2]*5)/32)

Это разные особенности восприятия яркости в разных условиях? Свои цифры взял из кода Qt.

А относительно оптимизации размера, можно взять исходник библиотеки для работы с подходящим форматом и тупо перевести с C/С++ или другого языка на JS. Я даже уверен что полученный код будет компактней раз так в 3. Можно так же поискать компилятор из C/C++ в JS, или интерпретатор, но тогда будет проигрыш по размеру кода и по быстродействию. Так что надо делать выбор между размерами кода и размером картинок.
Я бы предоставил все оптимизации непосредственно браузеру. Тогда код процедуры сохранения данных сведётся к такому:

location.href = canvas.toDataURL().replace("image/png", "image/octet-stream")

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

которое я написал работает через костыль.. А именно после захвата и обрезки изображения его приходится открывать в доп приложении (XnView) и

переводить там в глубину цвета 8. потому что 32 бита при погрузке в следующую систему искажаются кардинально. Соответственно вы говорите что сохранить в канвас в PNG8 средствами javascript нет возможности? Что тогда можно еще подключить ?

Эти множители влияют на яркость RGB слоев каждого в отдельности при переводе в Grayscale. Посути это и есть обращение к каждому пикселю дата[0][1][2][3] это информация о RGBA соответственно.

"image/octet-stream" тоже встречал о чем то подобном инфу. Так это получается запись потока в файл? Кстати вот тут другой профессор говорил что канвас не может содержать индексированный цвет, но с другой стороны мне и ненужно его выводить перед сохранением на просмотр. Может есть возможность использовать обычный массив для индексации и перевода в 8 бит?

Где я о таком писал? Canvas не дает на выходе изображение в индексированной палитре, это будет TrueColor в формате либо PNG (по умолчанию), либо JPEG (опционально). Вот о чем я писал.

Возьмите свое PNG-8 изображение, загрузите его в canvas, а затем сохраните. Сравните размеры первого и второго, и посмотрите свойства его, глубина цвета сохраненного будет 32 бита.

А что за приложение и в конечном итоге для чего эти изображения предназначены?

Я вас совсем не понимаю. Зачем мне загружать PNG-8 в канвас? Я получаю изображение с потока вебкамеры. Я и так вижу что сохраняю я 32 битные. Что даст мне эта операция не могу осознать. Вы мне русским языком ответьте вы знаете как получить на выходе файл PNG-8 средствами javascript или нет? Хватит меня уже убеждать что мне это не надо. Я не для этого сюда пришел.

Фотографии для программы которая печатает пластиковые карты. с фотографией и подписью. Если еще добавить пару слов про мое приложение то оно еще и подписи захватывает с планшета, но там все в порядке. Т.к там 2 цвета всего потерей при подгрузке в программу даже с 32 битной глубиной нет.

То что canvas дает на выходе 32-ное изображение и всякие инсинуации "вот тут другой профессор говорил что канвас не может содержать индексированный цвет" пора прекратить. :)

Что и как вы там делаете, это можно опустить. Пусть вы получаете изображение после canvas, если в нем его обрезаете и т.п. Далее конвертируете его в индексированную палитру. А запись в файл, это уже согласно формата PNG в котором нужно определить параметры - палитру, указать количество цвета и т.п.

И зачем же JS напрягать, если это вроде бы как прикладное приложение, а не веб?

Опять эти вопросы "зачем ?". Так и хочется ответить затем. Вообщем это все будет интегрировано в веб-интерфейс.


А как это сделать?? Что для этого нужно.. Вы говорите об этом как о чем то самом разумеющимся. Как сконвертировать то ? Начнем с того что это мое первое приложение на JS и я до этого с ним вообще не работал. Да и с изображениями на таком уровне я никогда не работал. Я не представляю как здесь можно это реализовать. И в файл как вывести. Вот товарищ подсказал про image/octet-stream. На досуге почитаю разберусь с этим. Печально что нет готовых решений.

И кстати не надо вырывать из контекста

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

И что, вы думаете эта операция автоматом догадается сохранить ваш 32 битник в индексированной палитре? Счас. :)

Я вам давал ссылку, но там сохранение в GIF и с использованием уже готовой библиотеки, если нечто готовое для PNG-8 я не знаю.

Самому писать, так это согласно формата. Поэтому и не понятно нахрена вам эти заморочки. Если все-таки предполагается веб, а значит и хранение результата на сервере, то разумнее всего отдать это серверу на растерзание. К примеру, если серверный язык, это РНР, то вашу проблему тремя строками кода решает GD.

Если же на клиенте, и ваше приложение использует стороннее ПО xnview, то почему не им сразу сохранить в индексированной палитре. Есть еще один кандидат решения проблемы ImageMagick - достаточно запустить его командной строкой с параметрами и на выходе получим и обрезанное, и серое, и индексированное, и какое угодно.

Не факт что не догадается. toDataURL выдаёт PNG, но не факт что в разных браузерах это будет один формат. Главное что полученную картинку в виде ссылки в формате data можно смело вставлять в <img/>, в <a/> и в тот же <canvas/> или открывать в той же или новой вкладке. С этой точки зрения разработчик браузера должен хотя бы пытаться оптимизировать размер ради удобства пользователя.
Собственно я рекомендую при разработке браузерного приложения переложить максимум задач на браузер.
Taifune, Таки надо объяснить заказчику что экономить на размере изображений нецелесообразно. Память нынче дешевая. Кроме случая когда данные надо передать по тормознутому модему(у меня самого мобильный интернет) это не актуально. При работе на локальной машине, даже если это мобилка, это значение вообще не имеет. Выгодней в таких случаях задействовать алгоритм типа GZIP, для таких задач уже есть готовые решения под браузер. Рекомендую сосредоточится на этом.

Автору не это нужно, а 8-битное изображение. А если говорить об оптимизации, то base64 на это претендовать не может. )

Есть надежда, что все-таки получится? :)

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

Так теперь далее.. Приложение мое не использует XnView. Это приходится пользователю делать ручками.. Фотки эти мне на сервере ненужны. Они идут для другой программы. Которая уже написана( не мной, это законченный продукт и изменить что то в нем нет возможности). Получать файл тут и далее открывать его в той программе и менять битность и сохранять. А про имадж меджик заинтересовали.. Если его запуск по отношению к файлам в папке возможно реализовать через JS может быть это бы и сошло, но вот беда JS очень параноидальный язык и чую получить доступ к командной строке если не невозможно то очень не просто...

Я тут получил файл который выдает уже программа в которую я гружу свои фотки. И о чудо ? Что это за формат ? Что скажете профессор ?

Как мне вам верить ? ) Вы же говорили 8битного джепега не бывает и это вообще чуш)

Вот и почитали вики вместе. ) Так а теперь давайте как в той передаче. Поможем Даше перекодировать 32 битный канвас в 8 битный жпег grayscale v1.1

Уже дали ссылку. )

Этот формат используется и видео даже, если вы не знали. JPEG в графике, это 24 бита на цвет (нет альфа канала). Как я и ранее предлагал с PNG-8, загрузите свой рисунок 8-битый и сохраните в JPEG, получите 24-биное изображение. Но если работать в редакторе умеющем не просто сохранять, но и оптимизировать, то можно выбрать сохранение "только оттенки серого". Так понятно?

То есть "по умолчанию" как вы желаете вам никто не сделает.

Запустить его хоть чертом можно, даже JS, но только не из под веб страницы.

Да я умею работать с графическими редакторами и используя фш и другие программы я могу получить любой формат который только есть, но еще раз повторюсь мне нужно вывести на сохранение файл используя JS на стороне клиента в JPEG grayscale v1.1.

Даже JS но не из под веб страницы... Ну еперный театр )) Серьезно ?) Я об это им написал вроде как. Если бы вы знали способ как запустить коммандную строку со страницы ( То писали бы вирусы :D ).

З.Ы. Написать то код кто нибудь поможет ?

Ну вроде бы я спрашивал, нахрена же вам JS, и что ответом было напомнить? :)

Забейте на JS в данном случае, используйте иное, исходя из OS.

Супер помогли ) На форуме JS сказали забейте на JS ) ой все. Я подожду может кто то все таки предложит что то дельное.

Тогда я этого не понимаю Даже JS но не из под веб страницы.... Если все это не из под веб страницы будет использоваться, то можно даже и JS. Например в среде Windows, это может быть HTA. Можно использовать VBS, он без проблем запустит из под командной строки ImageMagick. В чем проблема?

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

Да это цитата была.. Без тега квота уже не понятно? Я про запуск имажмажика говорил нафига мне не из под веб страницы.

Ну тогда только преобразование в серое в canvas, затем получить данные изображения как getImageData(...).data, затем используя Uint8ClampedArray/blob упаковать согласно формата JPEG нужного и записать в файл.

А вот это уже интересно. По идее в этот массив можно записать из любой даты[0][1][2] инфу т.к. кодом что я выше кидал он усредняется и во всех 3 каналах одинаковые значения. А вот как потом через блоб собирать джепег ?

У вас уже будут готовые бинарные данные. Например, здесь посмотрите пример Grayscaling and inverting colors. А вообще, вроде бы речь была о том, что изображение уже в градациях серого после ПО, тогда и canvas не нужен.

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

Если покопаться, то браузеры могут кое что, например тут пример записи в файл Save toBlob to disk, лиса записывает в файл PNG конвертируемый в BMP. Все бы хорошо, но почитайте о поддержке, а ведь в рамках веб нужна кроссбраузерность. И у каждого из них будет свое, если только оно есть.

Там же найдете описание и Uint8ClampedArray, можно и ArrayBuffer использовать.

Так что "безопасно", это самому ручками, изучайте формат, пакуйте, сохраняйте.