HTML5 Изменение цвета холста

Я заметил, что Canvas HTML5 слегка обесцвечивает в некоторых браузерах при использовании drawImage. Я знаю, что это происходит в Google Chrome и Mozilla Firefox. Internet Explorer и Chrome Android работают нормально. Чем это вызвано? Мой контекст globalAlpha - 1.0. Изменение цвета обычно составляет 1-5 значений RGB. Обратите внимание: нет проблем при использовании Canvas 'fillRect и т. Д.HTML5 Изменение цвета холста

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

Color comparison вар холст = document.getElementById ("холст"); var ctx = canvas.getContext ("2d");

var img = new Image(); 
     img.src = "http://i.imgur.com/NTRjnRb.png"; 
     img.onload = function(){ 
      ctx.fillStyle = "#FFF"; 
      ctx.fillRect(0, 0, 450, 800); 
      ctx.drawImage(img, 0, 0); 
     } 
</script>

источник

2014-10-22 John

Что такое расширение файла изображения, которое вы используете? –

Не могли бы вы поделиться соответствующим кодом? Было бы проще попытаться воспроизвести – Parker

Я использую PNG. @Parker Конечно, добавил к сообщению. – John

Это связано с управлением цветом и не связано с холстом, но и с загрузкой самого изображения. Когда изображение загружается в память, браузер будет применять ICC монитора, а также встроенный ICC, если таковой имеется, к значениям цвета. Когда вы в следующий раз рисуете изображение на холсте, значения цвета изображения уже заданы в камне.

Поддержка профилей ICC для Chrome и FF напрямую и будет применяться с использованием как ICC изображения (если есть), так и монитора ICC-профиля.

Internet Explorer v9-11 поддерживает ICC через систему Windows Color.

В дополнение к ICC существует гамма-коррекция, которая также может влиять на фактические значения цвета в конце. Если этого было недостаточно, то существуют разные версии профилей ICC, то есть v4 не имеет полной поддержки, которую он должен был иметь к настоящему времени.

ICC profile version test results:

ICC support:   v2  v4 

Firefox 34    X  - 
Chrome 40/Opera 25 X  - 
Internet Explorer 11 X  X

Как вы можете видеть IE поддерживает обе версии 2 и 4 (хотя через Windows, собственную систему цвета), который может объяснить ситуацию, если вы сохраните изображение с профилем ICC версии 4 (В настоящий момент я не могу тестировать Android Chrome).

Чтобы сохранить PNG без ICC из Photoshop, используйте «Сохранить для Интернета» и отметьте вложение ICC.

menu snapshot from PS

Для более углубленного (суб-ссылки из теста) вы можете увидеть в этой статье:
Web browser color management guide.

источник

2014-10-22 04:45:53 K3N

«Сохранить для Интернета» отлично работает. Информативные, никогда не знавшие изображения были больше, чем просто некоторые данные о цвете. Благодаря! – John

@John проблем нет. Управление цветом ежедневно вызывает головные боли во всем мире ... :) – K3N

HTML5 Изменение цвета холста

ответ

Смежные вопросы