使用 Fabric.js 实现实时水印预览Mar 2, 2024 · Benny Think很久之前,WebP Cloud 就支持了为图片自动添加水印。在实现水印功能的时候我们参考了已有CDN的一些设计,然后把这些设计融合到了 govips 之中。前端被我们设计成了这个样子不得不说,这个页面确实非常抽象。用户需要手动通过滑块来调整水印的位置和大小。大小还好说,位置就很难搞了。并且,这个预览图还有一个可用性问题,戴珍珠耳环的少女虽然美,但是在这个情况下用户几乎很难看清自己的水印是什么样子🤯如果能像一些截图标注工具一样,能够在文本框里随意输入文字,然后鼠标拖动一下就可以设置水印的样子,那是不是很好?我们尝试了一些成熟的解决方案,比如一些图片编辑器。但是发现他们提供的功能主要是裁剪图片,加文字图层并不是主要功能。并且想要集成进来往往是比较麻烦的,尤其是是我们使用了 Angular 。既然如此那只能从头造,反正这个需求也不复杂,因此使用 fabric.js 应该就足够了。创建并初始化 canvasfabric.js 的整个操作都是基于 canvas 的,因此我们需要在 Angular 的模版文件(html)中添加一个 canvas<canvas id="c" width="300" height="300"></canvas> 然后在对应的 TypeScript 文件中的 ngAfterViewInit 初始化我们的 canvasimport { fabric } from 'fabric'; .... ngAfterViewInit() { this.canvas = new fabric.Canvas('c'); } 加载图片经过讨论,我们决定使用一个纯色的背景图来替换掉那位少女,因此我们的 canvas 需要加载图片作为背景。非常不幸的是,fabric.Image.fromURL 并不支持 async/await 的写法,并且不值得用 Promise 去封装,因此我们只能使用回调的形式。fabric.Image.fromURL(this._service.previewImageUrl, (oImg) => { oImg.scaleToWidth(300); this.canvas.add(oImg); }); WebP Cloud Services 团队是一个来自上海和赫尔辛堡的三人小团队,由于我们不融资,且没有盈利压力 ,所以我们会坚持做我们认为正确的事情,力求在我们的资源和能力允许范围内尽量把事情做到最好, 同时也会在不影响对外提供的服务的情况下整更多的活,并在我们产品上实践各种新奇的东西。如果你觉得我们的这个服务有意思或者对我们服务感兴趣,欢迎登录 WebP Cloud Dashboard 来体验,如果你好奇它还有哪些神奇的功能,可以来看看我们的文档 WebP Cloud Services Docs,希望大家玩的开心~←WebP Server Go 0.11.0 is released Implement real-time watermark preview using Fabric.js→ Discuss on Hacker News