首页 » PHP » 正文

火狐,谷歌浏览器与看图软件对图片解析的区别研究

发表于: PHP,JS,Golang,Shopify学习交流博客 – 咪啪咪啪的小木屋 · 2015-10-12 ·  4,897 views  ·  0 replies 

最近在裁剪一批图片时发现火狐和谷歌浏览器显示的图片颜色发白,而使用看图软件打开却是正常的颜色,google了一下才发现原来是图片色彩空间的问题,附上google文章链接
Color Rendering Difference: Firefox vs. Safari

色彩空间讲起来比较复杂,具体的我也不是很清楚,附上百度百科:色彩空间

我们只看有用的这一部分

基于RGB模式的普通色彩空间有 sRGB, Adobe RGB 和 Adobe Wide Gamut RGB。
CMYK 印刷过程中使用减法混色法,因为它描述的是需要使用何种油墨,通过光的反射显示出颜色。它是在一种白色介质(画板,页面等)上使用油墨来体现图像。CMYK描述的是青,品红,黄和黑四种油墨的数值。根据不同的油墨,介质,和印刷特性,存在多种CMYK色彩空间。(可以通过色点扩张或者转换各种油墨数值从而得到不同的外观).
这里面火狐和看图软件的显示差异就是因为色彩空间出现了不同:附上样例图片(水印图版权来自视觉中国,谢绝使用)
800a
这张图用看图软件和火狐显示的其实是不一样的,IE显示正常,火狐发白,使用Adobe Photoshop查看图片色彩空间,截图如下所示
色彩空间数据 RGB
而一般网页显示我们会优先选择sRGB,清楚了这一点,下面我们要做的就是要把这张图的色彩空间纠正过来。如何纠正呢?我们使用imagemagick这个扩展来对这张图片进行转换
安装imagemagick之后,终端输入convert –version查看版本
尽量使用yum安装,不要使用源码包,最近使用源码包安装的iamgemagick处理图片时,在添加了色彩空间之后,出现了问题
裁剪以及转化命令:
convert -quality 100 -resize ‘800×800>’ -colorspace RGB +profile ‘*’ a.jpg b.jpg
详细解释:-quality定义转化的图片质量   100的情况下,图片有点大,如果只是为了浏览,必要性不是很大,因此我们习惯设置成93或者低一点
-resize是尺寸裁剪,800*800并不是裁剪出来的是800*800的尺寸,而是等比缩放
-colorspace是色彩空间,这里后边跟的是RGB而不是sRGB,注意一下,具体为什么,目前我还没研究清楚
a.jpg原图
b.jpg目标图片
使用这条命令就会将图片裁剪成800尺寸图,并且会在浏览器内正常显示,不再会出现发白的情况了
«上一篇: :下一篇»

0 thoughts on “火狐,谷歌浏览器与看图软件对图片解析的区别研究”

  1. 还没有任何评论,你来说两句吧

Leave a reply