跳到主要内容

两个月后,我又开发了一款图片美化工具

· 阅读需 6 分钟
编程范儿

博客已经两个月没有更新了,我去干啥了?这次不是偷懒,去搞了个大活!

连续做了几款图片导出工具后,这次决定做一个复杂点的,覆盖场景更丰富点的图片美化工具。

为什么需要图片美化工具?

日常分享到社交媒体的图片如果不加修饰,显示效果不佳。而且还可能因为图片尺寸不合适,导致显示不全。如果我们随意截图发到朋友圈或者社交平台, 导致图片大小不一致,排列错乱,毫无美感。更不会引起别人的关注。特别是对于品牌的宣传,统一的图片风格更容易在视觉上加深对受众的印象。

结合前面的经验,技术实现上已经没什么障碍了。 这种产品的唯一的挑战是 UI 设计,和部分功能的 UX。产品的审美一定要在线,才能吸引别人来使用你的工具。

名称链接图片
封面图生成spacexcode.com/coverview
文字卡片生成spacexcode.com/memocard
代码图片生成spacexcode.com/codeimage

所以我也是借鉴各种已有的相关产品,前期做了很多的调研。才渐渐确定了目前的软件设计。经常多次迭代,算是 1.0 版本吧,有了多款模型之后, 决定正式发布上线,对外推广。

这个产品的核心就是提供不同设备和场景下的模型,根据用户的喜好配置参数,然后导出适用不同平台尺寸的图片。

整个界面分为三大块,按左 - 中 - 右的布局,页面全屏显示,不出现滚动条。左边为模型和框架的选择、参数的配置区域,中间是预览和一些功能 按钮,右边是对图片的布局和变换样式的选择。

常见图片美化工具都有哪些功能?

  1. 为提供的图片增加背景、阴影和圆角效果;
  2. 改变尺寸,导出为社交平台匹配的尺寸大小;
  3. 给图片增加设备的外壳,为图片增加场景化的效果;
  4. 一键给打开的浏览器窗口截图,方便快捷,并且提供画布手动修改图片区域和大小;
  5. 美化后的图片直接复制,粘贴在常用的富文本编辑器,或微信、QQ、钉钉等聊天工具框中。甚至还可以直接在微博、推特、掘金沸点等社交平台分享框中直接粘贴操作,之后会自动以图片的格式显示;

相较于市面上其它产品,我的工具加了一些亮点功能

  1. 本地保存当前制作图片的所有配置,方便下次直接使用;
  2. 调用浏览器的屏幕分享接口实现快速截图后直接使用该图片(通过浏览器的 getDisplayMedia 接口);
  3. 丰富的套壳设备模型,涵盖手机,平板、台式电脑、笔记本、手表等设备类型;
  4. 预设了丰富的背景颜色、背景图片、还有通过代码生成的背景图。

后续迭代计划:

  • 丰富模型库,提供更多的场景覆盖
  • 部分 UI 组件美化,例如滑动组件,一直不满意它的样式
  • 社区搭建,方便大家使用交流

独立开发一款产品真的很费心力,需要充当多面手。但是如果做成之后收到大家的关注和使用,感觉一定会很棒!这也是支撑我一路做下来的动力。

先做成一件事,这是我接下来不断付诸实践的目标。如果你也在从事开发工作,对自己的职业很迷茫,可以看看这篇文章:W.I.N第二曲线手册。 也许会有所收获。

太空编程
分享硬核的前端编程知识。
想及时了解前端相关资讯,请关注作者公众号“太空编程”,回复关键字,获取丰富的学习资料。