解析psd剪切蒙版与图层蒙版解析

剪切蒙版

解析剪切蒙版这里暂时有两种方案,第一种是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把含图层蒙版的图层转化成智能对象,可以直接解析渲染出。\

相关推荐
也无晴也无风雨1 小时前
深入剖析输入URL按下回车,浏览器做了什么
前端·后端·计算机网络
Martin -Tang2 小时前
Vue 3 中,ref 和 reactive的区别
前端·javascript·vue.js
FakeOccupational3 小时前
nodejs 020: React语法规则 props和state
前端·javascript·react.js
放逐者-保持本心,方可放逐3 小时前
react 组件应用
开发语言·前端·javascript·react.js·前端框架
曹天骄4 小时前
next中服务端组件共享接口数据
前端·javascript·react.js
阮少年、5 小时前
java后台生成模拟聊天截图并返回给前端
java·开发语言·前端
郝晨妤6 小时前
鸿蒙ArkTS和TS有什么区别?
前端·javascript·typescript·鸿蒙
AvatarGiser6 小时前
《ElementPlus 与 ElementUI 差异集合》Icon 图标 More 差异说明
前端·vue.js·elementui
喝旺仔la6 小时前
vue的样式知识点
前端·javascript·vue.js
别忘了微笑_cuicui6 小时前
elementUI中2个日期组件实现开始时间、结束时间(禁用日期面板、控制开始时间不能超过结束时间的时分秒)实现方案
前端·javascript·elementui