Что не так с моим изображением png, которое меняет цвета в разных контекстах?

Question

У меня есть это изображение: https://imgur.com/a/A0fW1YZ

Однако, когда я встраиваю это изображение в HTML, цвета перепутаны: https://jsbin.com/rurisowewi/edit?html, вывод

<img src="https://i.imgur.com/iMxIrhV.png" alt="">

Я подозреваю, что что-то в метаданных изображения испортилось? Может кто-нибудь объяснить мне, что здесь произошло?

Я не уверен, что это уместно, но я сгенерировал это изображение с Python и Numpy (соединив два изображения вместе, как панорама mosai c ) и сохранил вывод как png. Я не думаю, что это причина root, потому что я запускал один и тот же код с одними и теми же входами несколько раз, и эта странная проблема с изменением цвета произошла только один раз.

Я изменил размер этого изображения с помощью команды Resize / Впрочем, потом перепрошивайте диалог в IrfanView.

Есть мысли?

Answer 1

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

Если вы Извлеките альфа-канал самостоятельно, вы можете видеть, что он содержит большую часть деталей изображения. Я сделал это с ImageMagick в Терминале:

magick YourImage.png -alpha extract alpha.png

Если, с другой стороны, вы удалите альфа канал и просто показать данные RGB, вы увидите, что почти ничего нет:

magick YourImage.png -alpha off RGB.png

Так что мой ответ так или иначе, что ваши браузеры неспособен или не желает правильно соблюдать альфа-канал.

Вы, вероятно, можете создать полезное изображение, подобное этому:

magick YourImage.png -background black -flatten Useable.jpg