Как изменять часть изображения в jpg?

Question

[Extremum]

Всем привет.

Кто подскажет каким образом это реализовано - ссылка? Вариант с заменой изображений считаю нереальным, там миллионы возможных комбинаций, думал о индексированной палитре, но насколько я знаю это только gif и png-8, а тут jpg. Может кто подскажет что разумное)

Answer 1

[grinat]

У них куча вариаций одной и той же картинки:
https://gnature.ru/tmp/paints/o-3708-4595.jpg
https://gnature.ru//tmp/paints/o-3708-4592.jpg

На самом деле достаточно хранить информацию о пикселях которые надо заменять. Человек выбирает цвет и затем просто через canvas на базе инфы, ставит то который нужно. При использовании https://developer.mozilla.org/ru/docs/Web/API/ImageData все будет работать очень быстро, если без imagedata, то будет тормозить.

Comments

[Extremum]

Мне кажется что решение на базе canvas с таким количеством изменений так быстро не отработает. Но спасибо, тоже думал над этим.

[grinat]

Extremum, через ff откройте https://mdn.github.io/dom-examples/canvas/chroma-k... тут люди в режиме реального времени на видео хромакей меняют, а ты из-за статичной картники паришься

[Dima Polos]

Extremum, canvas имеет аппаратное ускорение, то есть может рендерится на gpu, отсюда и прирост производительности.

Answer 2

[ser197]

У меня есть ощущуние (судя по консоли) что изменения не на клиентской части происходят, скорее всего post'ом уходят параметры на сервер а там с помощию подобной библиотеки отдается изображение или его часть.

P.S. да и по коду похоже)

function reloadPaintData(){
		
		var data = getPaintData();
		data.setpaint = 1;
		
		$.ajax({
			'url' : location.pathname,
			'data' : data,
			'type' : 'POST',
			'dataType' : 'json',
			'beforeSend' : function() {AddLoader($('.paint__zone'))},
			'success' : function(data) {
				
				DeleteLoader();
		
				if(data.img != 'error') {
					
					var img = $('.js-paint-img').attr('src', data.img);
					$('.paint__zoom').attr('href', data.img);
				
				}
				
			},
			'complete' : DeleteLoader
		})
		
	}