Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #11 (permalink)  
Старый 25.05.2017, 09:32
Аватар для Taifune
Интересующийся
Отправить личное сообщение для Taifune Посмотреть профиль Найти все сообщения от Taifune
 
Регистрация: 24.05.2017
Сообщений: 18

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

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

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

Последний раз редактировалось Taifune, 25.05.2017 в 09:40.
Ответить с цитированием
  #12 (permalink)  
Старый 25.05.2017, 10:10
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

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

Вы хотя бы на Вики почитайте что такое 8-битная палитра и в каких форматах изображения ее можно сохранить (если ориентироваться на веб), и что такое HighColor и TrueColor изображения.
Ответить с цитированием
  #13 (permalink)  
Старый 25.05.2017, 11:29
Аватар для Taifune
Интересующийся
Отправить личное сообщение для Taifune Посмотреть профиль Найти все сообщения от Taifune
 
Регистрация: 24.05.2017
Сообщений: 18

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


Вы знаете как это сделать ? Я нет. И где узнать не знаю.
Ответить с цитированием
  #14 (permalink)  
Старый 25.05.2017, 11:39
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Сообщение от Taifune
Как получить на выходе PNG8 при сохранении через
Никак, canvas не отдает изображения в индексированной палитре, даже если и PNG (это по умолчанию). Как конвертировать TrueColor ссылка дана, и вы сами подобное находили. И почему бы это не возложить на сервере - imagemagick или иное доступное на нем. Неужто заказчику так принципиально что именно будет конвертировать TrueColor в индексированную палитру? На клиенте в градациях серого можно посмотреть, а серверу отдали на сохранение.
Ответить с цитированием
  #15 (permalink)  
Старый 25.05.2017, 12:14
Профессор
Отправить личное сообщение для SV0L0CH Посмотреть профиль Найти все сообщения от SV0L0CH
 
Регистрация: 07.11.2010
Сообщений: 301

Сообщение от Taifune
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")
Ответить с цитированием
  #16 (permalink)  
Старый 25.05.2017, 15:24
Аватар для Taifune
Интересующийся
Отправить личное сообщение для Taifune Посмотреть профиль Найти все сообщения от Taifune
 
Регистрация: 24.05.2017
Сообщений: 18

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

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

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

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

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

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

Сообщение от SV0L0CH Посмотреть сообщение
Я порылся в своём старом коде и нашел немного другие множители:
Math.floor((data[0]*11+data[1]*16+data[2]*5)/32)
Эти множители влияют на яркость RGB слоев каждого в отдельности при переводе в Grayscale. Посути это и есть обращение к каждому пикселю дата[0][1][2][3] это информация о RGBA соответственно.

"image/octet-stream" тоже встречал о чем то подобном инфу. Так это получается запись потока в файл? Кстати вот тут другой профессор говорил что канвас не может содержать индексированный цвет, но с другой стороны мне и ненужно его выводить перед сохранением на просмотр. Может есть возможность использовать обычный массив для индексации и перевода в 8 бит?
Ответить с цитированием
  #17 (permalink)  
Старый 25.05.2017, 16:28
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

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

Возьмите свое PNG-8 изображение, загрузите его в canvas, а затем сохраните. Сравните размеры первого и второго, и посмотрите свойства его, глубина цвета сохраненного будет 32 бита.
Ответить с цитированием
  #18 (permalink)  
Старый 25.05.2017, 16:37
Профессор
Отправить личное сообщение для laimas Посмотреть профиль Найти все сообщения от laimas
 
Регистрация: 14.01.2015
Сообщений: 12,990

Сообщение от Taifune
суть в том что сейчас приложение которое я написал
А что за приложение и в конечном итоге для чего эти изображения предназначены?
Ответить с цитированием
  #19 (permalink)  
Старый 25.05.2017, 16:37
Аватар для Taifune
Интересующийся
Отправить личное сообщение для Taifune Посмотреть профиль Найти все сообщения от Taifune
 
Регистрация: 24.05.2017
Сообщений: 18

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

Возьмите свое PNG-8 изображение, загрузите его в canvas, а затем сохраните. Сравните размеры первого и второго, и посмотрите свойства его, глубина цвета сохраненного будет 32 бита.
Я вас совсем не понимаю. Зачем мне загружать PNG-8 в канвас? Я получаю изображение с потока вебкамеры. Я и так вижу что сохраняю я 32 битные. Что даст мне эта операция не могу осознать. Вы мне русским языком ответьте вы знаете как получить на выходе файл PNG-8 средствами javascript или нет? Хватит меня уже убеждать что мне это не надо. Я не для этого сюда пришел.
Ответить с цитированием
  #20 (permalink)  
Старый 25.05.2017, 16:42
Аватар для Taifune
Интересующийся
Отправить личное сообщение для Taifune Посмотреть профиль Найти все сообщения от Taifune
 
Регистрация: 24.05.2017
Сообщений: 18

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

Последний раз редактировалось Taifune, 25.05.2017 в 16:48.
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
возьму урок по svg или canvas фнимации imedia Элементы интерфейса 0 30.05.2014 01:37
Canvas. Как сделать или вообще нельзя? Вращение рандомизированно изменяемого объекта. Zemsky Общие вопросы Javascript 30 19.12.2013 19:44
Сохранение canvas - что получает сервер. lancer Общие вопросы Javascript 2 26.08.2013 15:26
Что лучше использовать, canvas или svg? Marv Элементы интерфейса 2 22.09.2012 03:40
Аналог wmode=transparent для Canvas или svg lusever Events/DOM/Window 1 15.06.2009 16:05