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

[Taifune]

Что за глупости, то что в изображении будет 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бит.

[laimas]

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

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

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

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

[Taifune]

Вы то хоть сами в курсе того, что выложили? Ничего, что выложенное это 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';

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

[laimas]

Как получить на выходе PNG8 при сохранении через

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

[SV0L0CH]

var brightness = 0.25 * data[i] + 0.70 * data[i + 1] + 0.09 * data[i + 2] ;

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

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")

[Taifune]

Никак, canvas не отдает изображения в индексированной палитре, даже если и PNG (это по умолчанию). Как

конвертировать TrueColor ссылка дана, и вы сами подобное находили. И почему бы это не возложить на сервере - imagemagick или иное доступное

на нем. Неужто заказчику так принципиально что именно будет конвертировать TrueColor в индексированную палитру? На клиенте в градациях

серого можно посмотреть, а серверу отдали на сохранение.

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

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

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

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

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

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

[laimas]

Соответственно вы говорите что сохранить в канвас в PNG8 средствами javascript нет возможности?

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

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

[laimas]

суть в том что сейчас приложение которое я написал

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

[Taifune]

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

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

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

[Taifune]

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

Если в двух словах я написал на яс приложение для обрезания фоток с вебкамеры и сохранением их.

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