很久之前，WebP Cloud 就支持了为图片自动添加水印。在实现水印功能的时候我们参考了已有CDN的一些设计，然后把这些设计融合到了 govips 之中。

前端被我们设计成了这个样子

不得不说，这个页面确实非常抽象。用户需要手动通过滑块来调整水印的位置和大小。大小还好说，位置就很难搞了。并且，这个预览图还有一个可用性问题，戴珍珠耳环的少女虽然美，但是在这个情况下用户几乎很难看清自己的水印是什么样子🤯

如果能像一些截图标注工具一样，能够在文本框里随意输入文字，然后鼠标拖动一下就可以设置水印的样子，那是不是很好？

我们尝试了一些成熟的解决方案，比如一些图片编辑器。但是发现他们提供的功能主要是裁剪图片，加文字图层并不是主要功能。并且想要集成进来往往是比较麻烦的，尤其是是我们使用了 Angular 。

既然如此那只能从头造，反正这个需求也不复杂，因此使用 fabric.js 应该就足够了。

创建并初始化 canvas

fabric.js 的整个操作都是基于 canvas 的，因此我们需要在 Angular 的模版文件（html）中添加一个 canvas

<canvas id="c" width="300" height="300"></canvas>

然后在对应的 TypeScript 文件中的 ngAfterViewInit 初始化我们的 canvas

import { 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);