V2EX = way to explore

V2EX 是一个关于分享和探索的地方

现在注册

已注册用户请登录

爱意满满的作品展示区。

这是一个创建于 2443 天前的主题，其中的信息可能已经有所发展或是发生改变。

因为想要方便自己在需要的时候可以给证件加上水印，于是乎造了个加水印的轮子，纯前端实现（ Vue ），不进行图片上传。

使用了 watermark.js 进行水印的处理，Mint UI 提供组件。

具体实现比较粗糙，感兴趣的可以看看，传送门 >>> ruter/watermarker

Preview

可以在这里体验 >>> demo

Add watermark

水印

watermark

轮子

证件

13 条回复 • 2018-03-12 16:19:36 +08:00

ichanne

2018-03-09 14:19:22 +08:00

不错不错，最好能加隐藏水印，和钉钉截图一样

virusdefender

2018-03-09 14:21:16 +08:00

微信小程序有一个叫水印小助手的就是做这个事情的，手机上更方便一些

thankfish

2018-03-09 14:42:38 +08:00 via iPhone

666666

ruter8

2018-03-09 14:50:21 +08:00

@ichanne 这个就是为了方便自己给证件加水印的拉，隐藏水印这种事交给专业的工具去做比较好

@virusdefender 微信直接打开链接一样可以用，问题不大

nameryan

2018-03-10 10:58:52 +08:00

实现不难，倒是从使用场景考虑，一般需要加水印的是证件照
而通过上传图片来加水印这种方式，对于证件照这种还是比较敏感的，所以如果能有效的通过本地处理的方式会更受欢迎。

ruter8

2018-03-10 11:47:07 +08:00 via iPhone

@nameryan 这个没有进行任何上传操作的，代码里可以看到都是在本地环境进行的处理，可以断网使用

nameryan

2018-03-10 16:49:17 +08:00

@ruter8 那我就信了：）收藏了

zacharyjia

2018-03-10 22:18:27 +08:00

透明度反啦，应该是越往右拉透明度越大，越不容易看清呀

ruter8

2018-03-11 14:14:32 +08:00 via iPhone

@zacharyjia 从左到右是从 0 到 1，透明度数值越低越透明，1 表示不透明

zacharyjia

2018-03-11 14:45:30 +08:00

@ruter8 正常的想法不应该是透明度越高越透明吗= =

codehz

2018-03-11 17:18:50 +08:00

能实时预览吗（

ruter8

2018-03-11 22:37:36 +08:00 via iPhone

@zacharyjia 唔…一直都是接触的 0 是透明 1 是不透明的

@codehz 可以自己改，每次有变化调用一次渲染的方法就好了

xiaozizayang

2018-03-12 16:19:36 +08:00

赞！

为了给证件照加水印，造了个加水印的轮子

Preview