剪切蒙版
解析剪切蒙版这里暂时有两种方案,第一种是gco合成,第二种是剪切图层和主图层转位图
gco合成
CanvasRenderingContext2D.globalCompositeOperation是画布内置的一个属性,简称gco, 它可以提供多个图片合成的效果。
优点:处理非常简单,解析后保留主图层和剪切图层,可以编辑大小位置旋转
缺点:受层级影响,层级在它之前的图层(除了背景)若重叠会展示在其他图层上,如果将剪切图层放在最底部可避免这个问题。
剪切图层和主图层转位图
将剪切关系所有图层都转成一个位图,可以用户先预处理,也可以解析时自动处理,但是会丢失原来在ps的编辑能力。
图层蒙版
用ps创建一个椭圆,然后在该图层上创建一个蒙版,然后用橡皮擦划几下,就形成了一个简单的图层蒙版,黑色的表示不展示,白色的表示展示。
蒙版位图计算路径后剪切原图层
目前能拿到的信息
1、图层的位图
2、蒙版的位图
ps中的图层蒙版
解析后的图层位图
解析后的蒙版位图
思路 :输入一张黑白的位图,希望根据图片中黑白的边界得到一个白色部分的path,用这个path(可展示的范围)通过canvas的clipPath对原图层进行裁剪。 测试:这里将蒙版位图保存到本地,然后借助在线的img to svg 工具,使位图转svg,可以得到一个黑色的填充区域svg,
但还要在此基础上反转填充区域(手动建一个外层矩形,宽高等同图层位图宽高即可)得到最终这样的矢量图,因为它的g标签做了上下翻转,所以复制path d属性会得到一个相反的图
经过这么多处理,最终目的还是要拿到这个路径, 它的path路径如下M0 0 V151 H312 V0 H0 z M 50 120 c -2.2 -1.5 -2.2 -1.6 -2.2 -32.7 c 0 -24.7 -0.3 -32.2 -1.5 -36.1 c -2 -6.7 -1.9 -12.9 0.3 -15.6 c 2.6 -3.2 19.3 -5.1 50.9 -5.7 c 29.5 -0.5 27.3 0.2 27.3 -9 c 0 -4.6 1.5 -9.4 3.3 -10.5 c 2.1 -1.3 6.5 -0.9 8.2 0.9 c 1.4 1.3 1.6 3.2 1.3 10.1 l -0.3 8.5 l 5 1.3 c 3.4 0.9 12.1 1.4 26.8 1.4 c 27.7 0 25.8 -1.2 27.5 18.5 c 0.6 7.7 1.8 16.3 2.6 19 c 0.9 2.8 1.6 6.7 1.6 8.7 c 0 5.1 -2.6 6.6 -14.7 8.3 c -5.4 0.8 -12.7 2.1 -16.3 2.9 c -3.6 0.9 -10.8 1.6 -16.1 1.6 c -6.3 0 -10.6 0.5 -12.5 1.4 c -1.6 0.8 -5 2 -7.5 2.7 c -4.1 1.1 -5 1 -7.3 -0.4 l -2.6 -1.7 l -0.2 -25.3 l -0.3 -25.2 l -20.5 -0.3 c -19 -1.2 -31.1 0.5 -41 2.4 l -2.5 0.4 l 0.3 36.3 c 0.3 36.1 0.3 36.2 -1.9 37.9 c -2.6 2.2 -4.8 2.3 -7.7 0.2 z m 101.8 -41.5 c 6.9 -0.3 16.6 -1.3 21.5 -2.3 c 5 -1 10 -2 11.2 -2.2 c 1.5 -0.3 2 -0.9 1.7 -1.9 c -0.4 -0.8 -1.1 -7 -1.8 -13.8 l -1.1 -12.2 l -20.5 -0.7 c -11.3 -0.4 -21.8 -0.8 -23.5 -1 l -3 -0.3 l -0.3 17 c -0.3 17.8 0 20.1 2 18.8 c 0.7 -0.4 6.9 -1.1 13.8 -1.4 z
合成效果:
看起来位置还是有偏移,上下翻转了,坐标还需要更精细的计算
总结:通过以上一系列的转换能得到最终的一个含蒙版的位图,但是过程有点繁琐,也许不是最终的解决方法,但目前找不到更好的方法,而且 如何得到黑白位图的中的白色路径目前无法实现(测试借助的是在线工具实现的)。
转成智能对象
在ps把含图层蒙版的图层转化成智能对象,可以直接解析渲染出。\