Почему браузеры по-разному отображают цвета в png? - PullRequest
0 голосов
/ 14 мая 2019

У меня есть приложение, которое генерирует base64 png из рисунков на холсте HTML.

Я обнаружил, что при просмотре цветов с помощью пипеточного расширения я получаю разные цвета между Chrome и Firefox.Ни один из цветов браузера не соответствует фактическим цветам, которые я нарисовал на холсте (Chrome соответствовал одному цвету).

Сначала я нарисовал холст в Firefox и получил строку base64 png.

Я декодировал этот base64 здесь и в Chrome, и в Firefox: http://freeonlinetools24.com/base64-image

Обратите внимание, что я декодировал точно такую ​​же строку base64 (сгенерированную в FF), но получил 2 разных результирующих изображения при декодировании.

Вы можете использовать любое расширение палитры цветов, чтобы увидеть разницу в шестнадцатеричных кодах цветов или значениях RGB.

Вот все цвета, включая шестнадцатеричный код для того, что я фактически нарисовал на холсте, инаблюдаемый шестнадцатеричный код для Chrome и Firefox.Фон прозрачный, поэтому серый / черный - это только разница в том, как браузеры отображают прозрачность.

Оранжевый:

  • Ожидается: # ff7f0e
  • Chrome: # ff7f0c (закрыть)
  • Firefox: # f08327

Синий:

  • Ожидаемый: # 1f77b4
  • Chrome: # 1f77b4(матч)
  • Firefox: # 3877b1

Зеленый:

  • Ожидаемый: # 2ca02c
  • Chrome: # 2ca02b (закрыть)
  • Firefox: # 549d39

Красный:

  • Ожидаемый: # d62728
  • Хром: # d62627 (закрыть)
  • Firefox: # c4352b

Screenshot of png in Firefox Screenshot of png in Chrome Я не понимаю, почему base64 png не превратится в точноеодинаковые значения RGB в любом браузере.

Любые идеи о том, что я могу сделать, чтобы метод canvas.getDataURL () возвращал png base64, у которого будут цвета, соответствующие цветам, нарисованным на нем?

Ответы [ 2 ]

0 голосов
/ 18 мая 2019

По большому счету canvas.getDataURL() возвращает другое изображение, которое отличается от исходного изображения по крайней мере качеством и типом. Чтобы получить исходное значение Base64, используйте XMLHttpRequest + btoa или FileReader.readAsDataURL().

0 голосов
/ 14 мая 2019

Я сузил проблему.Если у меня есть страница с тегом img и я установил src тега img для моего изображения, цвета будут различаться в разных браузерах.

...