Как это делается на этом сайте?(Регулировка цветов изображения в режиме реального времени)

Question

http://ultimate -wallpaper.com / wallpaper / call-of-duty-map-pack-1ndvB3 /

Ниже изображения вы можете контролировать оттенок, насыщенность и яркостьобраз.Они используют jQuery, и кажется, что изображения на этой стороне закодированы в base64, это необходимо для этого?

Answer 1

Одним словом, это HTML5.

HTML5 имеет тег <canvas>, обеспечивающий полный контроль Javascript над цветами, векторами и пикселями на экранах.

HSL (Hue, Saturation & Lightness) - новый поддерживаемый формат в спецификациях CSS3. HSL - более читабельная форма. Просто для циклического изменения цветового спектра мы просто увеличиваем «оттенок» с 360; оттенок отображается на спектр в цилиндрической форме.

Яркость контролирует, насколько темный / светлый цвет; 0% обозначает черный пиксель, тогда как 100% обозначает белый пиксель. Насыщенность контролирует, насколько яркий или яркий цвет; серые цвета имеют насыщенность 0%, а яркие цвета - 100%.

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

Answer 2

Они используют библиотеку javascript Pixastic .
И она обеспечивает различные операции рендеринга изображений на холсте HTML5.

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

Answer 3

Они используют холст, который является частью новой спецификации для HTML5. Читайте дальше:)