Войти
ФлеймФорумПрограммирование

Firefox умеет корректно загружать png изображения!

Страницы: 1 2 Следующая »
#0
14:22, 11 авг. 2013

Всем привет.

Я пишу клеточный автомат на JavaScript и мне надо чтобы изображеня загружались корректно во всех браузерах, но похоже у Firefox`а с этим проблемы.
Вот смотрите, я открываю mspaint и заливаю картинку одним цветом, вот таким:
step0 | Firefox умеет корректно загружать png изображения!
получаю вот такое изображение:
green | Firefox умеет корректно загружать png изображения!
Затем я запускаю Firefox и на одной из страниц выкладываю это изображение.
Далее я жму правую кнопку мыши на изображении и жму "Copy Image":
step1 | Firefox умеет корректно загружать png изображения!
Потом я запускаю mspaint и вставляю скопированное изображение и жму кнопку "палитра"
step2 | Firefox умеет корректно загружать png изображения!
Затем жму на изображения, чтобы выбрать его цвет, а потом жму на кнопку "Изменение цветов"
step3 | Firefox умеет корректно загружать png изображения!
И получаю вот это:
step4 | Firefox умеет корректно загружать png изображения!

Точно такая же фигня происходит с точки зрения JavaScript`а.
Вот минимальный код html-страницы который показывает значение r-компоненты первого пикселя изображения:

<html>
  <head>
    <meta charset="utf-8">
  </head>
  <body>
    <div class="bg" align="center" id="head">
      <canvas id="canvas" width="1" height="1"></canvas>
    </div>
    <div align="center">
      <h1 id="result">loading...</h1>
      <i><pre id="nav">loading...</pre></i>
      <img id="img" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXY2D4z/AfAAQBAf9eLuGlAAAAAElFTkSuQmCC" height="10%" border="1" />
    </div>
    <script type='text/javascript'>
      function foo()
      {
        var img=document.getElementById('img');
        var w=img.naturalWidth;
        var h=img.naturalHeight;
        canvas.getContext('2d').drawImage(img,0,0,w,h);
        var data=canvas.getContext('2d').getImageData(0,0,w,h).data;
        document.getElementById('result').innerHTML = "data[0] == "+data[0];
        document.getElementById('nav').innerHTML = navigator.userAgent;
      };
      setTimeout(foo,100);
    </script>
  </body>
</html>
+ Показать

Firefox выводит: data[0] == 1
Opera выводит: data[0] == 0

Собственно вопрос: что я делаю не так?


#1
14:25, 11 авг. 2013

ты не пробовал после сохранения в пеинте открыть файл и посмотреть цвет?

#2
14:32, 11 авг. 2013

Zi-zilk
> ты не пробовал после сохранения в пеинте открыть файл и посмотреть цвет?
Вначале до того, как экспериментировать с Firefox? Ну да, пробовал, всё нормально, цвет у весх пикселей RGB(0,255,0). Проверял в разных редакторах картинок.

#3
14:33, 11 авг. 2013

Adler
Сделал как ты говоришь. Получил правильный цвет (0, 255, 0)

#4
14:39, 11 авг. 2013
Например, встроенная в формат PNG гамма-коррекция работает следующим образом: данные о настройках дисплея, видеоплаты и программного обеспечения (информация о гамме) сохраняется в файле вместе с самим изображением, что и обеспечивает идентичность копии оригиналу при переносе на другой компьютер.

Юзай да BMP.
#5
14:40, 11 авг. 2013

У тебя на скринах вообще 0 255 40

#6
14:40, 11 авг. 2013

Adler
> Вот минимальный код html-страницы который показывает значение r-компоненты
> первого пикселя изображения:

+ Показать
#7
14:45, 11 авг. 2013

=A=L=X=
> Например, встроенная в формат PNG гамма-коррекция работает следующим образом:
Ты прав. Вспомнил, что я всегда убираю гамма коррекцию в Firefox.

about:config
gfx.color_management.mode 0

Поставил значение по умолчанию (2), перезагрузил браузер и получил (1, 255, 0)

https://developer.mozilla.org/en-US/docs/ICC_color_correction_in_Firefox

#8
14:59, 11 авг. 2013

Chipmunk
> У тебя на скринах вообще 0 255 40
Да, кстати, если смотреть внешнеё тулзой на то что показывает Firefox, то можно заметить, что цвет не такой, как у исходного изображения.

entryway
> about:config
> gfx.color_management.mode 0
Ура!!! Работает! Теперь осталось понять, как мне в JavaScript`е сделать для изображения drawImage на canvas так, чтобы "gfx.color_management.mode" игнорировался.

Спасибо!

#9
15:09, 11 авг. 2013

Adler
Использовать не пнг

#10
15:18, 11 авг. 2013

=A=L=X=
> Юзай да BMP.
Zi-zilk
> Использовать не пнг
Попробовал, работает. Спасибо, крутое решение проблеммы :)

#11
21:17, 11 авг. 2013

=A=L=X=
> Юзай да BMP.
раньше таких товарищей вешали

#12
21:24, 11 авг. 2013

bee buster

Лол, посмотри для чего ему нужен формат.

#13
22:05, 11 авг. 2013

=A=L=X=
> Лол, посмотри для чего ему нужен формат.
Цель достигаема даже с png, достаточно стрипнуть чанк с гаммой.
За bmp стрелять :)

#14
22:31, 11 авг. 2013

RPGman
> Цель достигаема даже с png, достаточно стрипнуть чанк с гаммой.

У меня в этом серьезные сомнения. Обрати внимание что в первопосте гамма была выправлена даже для рисунка который был сохранён на том же компе.

Страницы: 1 2 Следующая »
ФлеймФорумПрограммирование

Тема в архиве.