如何将SVG转换为位图(保持浏览器显示的样式)
怎么将SVG的图片转换为位图,最开始我是用Illustrator这种矢量图编辑工具,但是后来发现Illustrator对SVG滤镜支持不好,并不能保持图像的原样式。
于是我就想到是不是可以直接在浏览器上复制浏览器渲染出的位图,然后就发现Opera和IE都是支持复制位图的,那我们就可以直接将图片复制出来就好了呀。
但是使用后发现有个问题,就是复制的图片是24位的,没有Alpha通道,怎么解决这个问题呢?在研究滤镜的时候会用到“SourceAlpha”这个输入,发现这个就是输入图片的Alpha通道,那么我们把这个通道当作蒙版附加到图片上不就可以了么。
使用发现Opera和IE还有区别就是Opera复制出来图片变成了黑色背景(左),IE保持的是白色背景(右)。两个使用的滤镜有差别,后述。
首先介绍使用滤镜,滤镜的用法请参见HTML5之SVG 2D入门10 - 滤镜
SVG Filter Effects in IE10这里可以了解一下feComposite和feMerge的区别
整个图像加上滤镜方法:声明滤镜,然后将整个图像用一个新的<g></g>包起来,应用滤镜即可。如:
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="100%" height="100%" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<filter id="滤镜声明">
<feMerge>
<feMergeNode in="SourceGraphic"/>
</feMerge>
</filter>
<g filter="url(#滤镜声明)">
<g id="原始图像">
<circle cx="100" cy="50" r="40" stroke="black"
stroke-width="2" fill="red"/>
</g>
</g>
</svg>
其实是可以直接在单个的node上应用滤镜的,不过这里需要给整个图像应用滤镜,有些svg缩进做的不好不在外面添加一个node的话怕没有整个包括住。
然后就是我们需要用什么滤镜来获取所需要的图像,先给整个图像附加滤镜1,复制到位图编辑软件,再应用滤镜2,复制到位图编辑软件。将位图2作为位图1的蒙版即可获得透明的图片了。
滤镜1 - 获取RGB图案
<filter id="去除Alpha">
<feColorMatrix type= "matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 0 1" in="SourceGraphic" result="turb"></feColorMatrix>
<feMerge>
<feMergeNode in="turb"/>
</feMerge>
</filter>
滤镜2 - 获取Alpha通道 for IE 注:这里获得的图像需要在图像制作软件里反色
<filter id="图片Alpha">
<feMerge>
<feMergeNode in="SourceAlpha"/>
</feMerge>
</filter>
滤镜2 - 获取Alpha通道 for Opera 注:这里因为网页背景也是白色所以你会看见一个全白的页面
<filter id="图片Alpha">
<feColorMatrix type= "matrix" values="0 0 0 0 1 0 0 0 0 1 0 0 0 0 0.1 0 0 0 1 0" in="SourceGraphic" result="turb"></feColorMatrix>
<feMerge>
<feMergeNode in="SourceAlpha"/>
</feMerge>
</filter>
你可能会想为什么要先应用滤镜1,请看下图
我创建一个RGBA(255,123,172,255)到RGBA(255,123,172,0)的图片,然后附上不使用滤镜1和使用滤镜1的效果对比图。(图片有点大,自己新窗口打开看)
可以发现,不使用滤镜1会导致图片透明部分出现了背景色,最后添加蒙版后的图片就会和原图有出入,所以如果想完美的还原图片,滤镜1还是很有必要的。
想详细了解 ColorMatrix 请参考GDI+ ColorMatrix的完全揭秘