聊聊我的开源在线图片设计器近期更新的内容【值得一看】

迅排设计自从正式开源以来受到了各界广泛关注，Github 仓库更是短短一个月时间就突破 1000+ Star 🎉，受宠若惊！期间我也在不断地对项目进行更新和优化（查看迭代计划），其中自动抠图功能是不少朋友关注的重点之一，于是国庆期间我持续鏖战，对抠图功能进行了全方位的优化和迭代，这也是近期较大的更新内容。

在项目持续曝光期间，我也发现了不少问题并逐一进行记录和修复，希望第一个较为稳定的 Releases 版本可以早日和大家见面~

一些美化更新

此次从网上无版权图库中又扒了些作品过来，并将之前杂乱的图片进行了分类，鼠标放置在图片上还可显示来源作者与相关描述等，带来更多挥洒创意和灵感的空间~其它与图片相关的懒加载和排版也进行了一些优化。

分类	懒加载

画布背景支持透明度下载

这个看似不起眼的更新背后实际也有些故事，起初画布背景调为透明是有 Bug 的，底部会透出一个深色而非透明，这是因为画布本身有一个深颜色，只不过它在某些样式的作用下变得半透明了，而调整画布透明度则让原本的颜色显现了出来，要讲如何解决这个问题，还得从画布的一些设计原理开始说起。

首先画布中的素材元素一般都是相对完整而独立的，它可以超出画布而不显示，例如：

要实现这一效果我们很快会想到在外层使用 overflow: hidden; 来隐藏元素超出部分：

但很遗憾这样做是会引发严重问题的(文字输入溢出会导致画布偏移)，而且元素溢出部分变得不可见将直接导致元素在画布可视区域外无法拖动或选中，这些问题都严重破坏了编辑器的操作体验。

所以后来我的解决方案是：在画布可视区域加了个与之大小相同的 div 层叠在上方，然后通过设置一个无限大的阴影来盖住元素溢出区域：

box-shadow: 0 0 0 5000px rgba(248, 248, 248, 0.99);
z-index: 8;

这样就完美解决了上述的问题，把 shadow 透明度调低感受下元素在溢出画布时的状态：

That's it ! 解决透明背景颜色问题的方法也是一样的，再加一层 div 当它的背景就好了~ 注意别忘了设置 pointer-events: none; 否则画布就真被挡住了。

这两个 div 在代码中都是以插槽形式在编辑页组件中加入的，所以在实际出图的绘制页并不存在。

抠图支持修补擦除

来到本文的压轴部分了，本来录了很久的 Gif 容量还是太大了，所以接下来还是图文形式来讲吧（不听不听爷要亲自体验），首先我们看看自动抠图效果：

选择一张图片，点击抠图	等待一会自动出图

ps. 目前还支持了画布上使用快捷键粘贴图片和文本哦~

可以看到出图结果不是很满意，因为电视机📺的画面没被抠掉，所以我们点击进入编辑模式。

AI抠图结果被加载	选择擦除工具手动擦除

小技巧：拖动右侧画布（或按住空格点击鼠标）移动图像，使用鼠标滚轮缩放大小，按住 “[” 和 “]” 可快捷缩放画笔大小。

完成操作后点击左上角的“确认应用”按钮，抠图结果立即更新，点击“完成抠图”即可应用到画布当中：

确认后立即更新结果	完成后应用在画布中

有的情况可能是像素抠除过度了，可以用修补画笔进行还原，抠不干净的地方则用擦除画笔擦除，两者交替使用。下载后效果图：

别光顾着看文章啊，点赞了吗？Github 上给项目加星了吗？😏 别等我求你好吗？

最后放上和稿定整体效果的对比图：

迅排设计	稿定设计

目前来看抠图服务资源占用不高体验良好，自动抠图效果也还不赖，配合上修补擦除画笔基本是够用了，虽然功能复杂度上稿定依旧是遥遥领先，但人家这个毕竟是收费的功能啊，而迅排设计则是完全开源的。

在线 Demo | 文档网站 | Github 开源地址: palxiao/poster-design

7731c603-4388-4a0d-a7eb-c5af1e948656