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


Мне не нужна четкая палитра. Я понимаю что реальных цветов там 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 битной глубиной нет.