使用 Fabric.js 实现实时水印预览

Mar 2, 2024 · Benny Think

很久之前，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);
});

💡 需要注意这里回调函数必须使用箭头函数的形式，而不可以使用普通的 function (){} 形式。
为啥？因为我们在函数体内使用了 this 关键字。我们可不想来一个 let that = this 这种奇奇怪怪的写法，虽然箭头函数本身就挺奇怪的🙂🙂🙂

我们的画布已经好了！

添加水印

那么下一步就把水印添加到画布上！使用 fabric.Text 就可以了

const text = new fabric.Text('hello');

// 在回调函数中
this.canvas.add(text);

厉害了我的 JavaScript！竟然可以随意调整位置和大小。只是……好像有点太自由了？

限制画布行为

我们不希望背景画布也可以被移动，同时只希望水印能够放大缩小而不能旋转或者拉长。

幸运的是 Fabric 提供了借口来控制各种组件的行为。

限制背景

我们锁定背景的 X、Y 方向移动，改变鼠标指针为默认状态

fabric.Image.fromURL(this._service.previewImageUrl, (oImg) => {
  oImg.scaleToWidth(300);
  oImg.selectable = false;
  oImg.lockMovementX = true;
  oImg.lockMovementY = true;
  oImg.hoverCursor = 'default';
  this.canvas.add(oImg);
  this.canvas.add(text);
});

限制水印

这样水印就只有变大变小（即蚁人）的功能了

text.setControlsVisibility({
  mt: false,
  mb: false,
  ml: false,
  mr: false,
  mtr: false,
});

还需要做的事情…

到这里，我们还剩下以下需要做的事情：

用户对水印操作结束之后，在提交表单的时候计算出正确的参数值。这里就需要我们知道水印的颜色、文字内容、水印的大小（相对值）、水印的偏移量（相对值）
对水印的更进一步的限制：我们不希望水印跑到背景板之外。 libvips 虽然支持，但是会增加黑边。我们相信大部分用户是不会希望自己的图片出现莫名其妙的黑边的

限制水印于画布内

如下图所示，水印跑到了画布之外，我们希望能够阻止这种操作。用户可以通过放大水印或者拖动水印这两种操作来打破次元壁。

这个时候就要用到事件，我们可以监听 canvas 的变化来捕捉这种异常情况。

根据 fabric的文档，object:moving 和 object:scaling 是我们需要监听的事件。同时需要注意，这两个事件在触发时是持续不断的（fired continuously during object movement），因此我们还需要 debounce ，要不然恐怕会造成比较大的性能损失。

我们先写出来检查代码，注意需要处理移动和放大两种情况

checkWatermarkBounds() {
  const watermark = this.canvas.getObjects('text')[0];

  // 如果用户放大缩小水印，那么给水印调整到最大大小
  if (watermark.width && watermark.scaleX && watermark.width * watermark.scaleX > this.canvas.width) {
    watermark.scaleToWidth(this.canvas.width);
  }
  if (watermark.height && watermark.scaleY && watermark.height * watermark.scaleY > this.canvas.height) {
    watermark.scaleToHeight(this.canvas.height);
  }

  const imgBounds = {
    left: 0,
    top: 0,
    width: 300,
    height: 300,
  };
  const wmBounds = watermark.getBoundingRect();

  // 左侧边界，其他四个方向道理一样
  if (wmBounds.left < imgBounds.left) {
    watermark.set('left', imgBounds.left);
  }
  // 其他方向...
  watermark.setCoords();
}

然后设置事件监听

import { debounce } from 'lodash-es';

const handleObjectTransform = debounce(() => {
      this.checkWatermarkBounds();
    }, 100);

this.canvas.on({
  'object:moving': handleObjectTransform,
  'object:scaling': handleObjectTransform,
});

不知道你怎么样，反正我看到这么多括号，是有一点点晕的😵‍💫

计算数据

这里其实就很简单了，通过 fabric 的接口拿到水印的大小和位置，再和背景做一个除法就好了。同时为了以防万一，如果 width height 小于1了，我们直接取0，避免 libvips panic

updateWMPosition() {
  const text = this.canvas.getObjects('text')[0];
  const { offsetX, offsetY, width, height } = {
    offsetX: Math.max(text.left / this.canvas.width, 0),
    offsetY: Math.max(text.top / this.canvas.height, 0),
    width: (text.width * text.scaleX) / this.canvas.width,
    height: (text.height * text.scaleY) / this.canvas.height,
  };

  // 处理数据的逻辑
}

优化…

如果只是为了更容易的设置水印，那么做到这里就够了。可但是但可是

WebP Cloud Services 会坚持做我们认为正确的事情，力求在我们的资源和能力允许范围内尽量把事情做到最好。

因此，我们还需要：

设置字体，网页上加载 woff2
支持透明度
支持水印背景填充色

fabric 全部支持这些功能！

加载字体

首先自然需要找到我们所支持的字体的 woff2 文件，然后加入到 CSS 中，这里我们直接使用了我们的静态资源站点 https://static.webp.se。

@font-face {
  font-family: 'Roboto';
  src: url('https://static.webp.se/fonts/Roboto-Regular.woff2') format('woff2');
}

使用 font observer 加载字体

const font = new FontFaceObserver(family);
await font.load(null, 10000);

调用

const text = new fabric.Text("value text", {
  fill: 'ffffff',
  textBackgroundColor: 'ff0000',
  fontFamily: 'Roboto',
  left: 0.3 * this.canvas.width,
  top: 0.4 * this.canvas.height,
});

新的调色盘

我们封装了一个新的调色盘，这个调色盘支持透明度，并且提供了一组默认的常用颜色

这个组件是 tui-editor ，藏得挺深的……

这个组件默认支持渐变模式，那我们可不行，但是这个配置项还是写死的。

那我们只能通过一个 onClick 事件和神奇代码了 🤣

hideComponent() {
  setTimeout(() => {
    const element = document.querySelector('.t-select');
    if (element instanceof HTMLElement) {
      element.style.display = 'none';
    }
  }, 100);
}

水印背景与透明度

现在我们支持了 fill 参数，也就是说水印可以有一个任意颜色的背景，这样无论目标图片是什么样子的都可以看清。那么在 libvips 中要怎么实现？

同时，现在的hex颜色支持8位了，最后2位表示透明度，比如 FF 就是完全不透明， 00 就是完全透明。文字的透明好解决， libvips 的 label 方法支持透明度。但是背景的透明很难搞，因为 label 不支持给 bands 4 也就是带 alpha channel 的图片加水印。

水印背景

已知水印的大小、颜色、偏移量、背景颜色，如何把这个带有背景色的水印准确的应用到目标图片上呢？

只要稍微思索一下就不难发现，如果水印带背景，那么水印的大小其实就是100%，也就是说我们可以做一个相应大小的、背景颜色的中间图层，把水印以 100% 的大小画上去，然后再把这个图层以原来的偏移量贴到新的图片上。

// 水印
label := vips.LabelParams{....}
// 创建图片
overlay, _ := vips.Black(width, height)
_ = overlay.ToColorSpace(vips.InterpretationSRGB)

// 如果有 alpha channel，那么把它删掉。当然在这个例子中是没有的。
_ = overlay.ExtractBand(0, 3)

// 填充颜色
_ = overlay.DrawRect(vips.ColorRGBA{R: fillR, G: fillG, B: fillB, A: 255}, 0, 0, x, y, true)

// 计算 overlay 的偏移量
realOffsetX, readOffsetY := int(label.OffsetX.Value*float64(img.Width())), int(label.OffsetY.Value*float64(img.Height()))

// 把原来 label 的 offset 设置为0
label.OffsetY = vips.Scalar{Value: 0, Relative: true}
label.OffsetX = vips.Scalar{Value: 0, Relative: true}
// 填充到整个 overlay
label.Width = vips.Scalar{Value: 1, Relative: true}
label.Height = vips.Scalar{Value: 1, Relative: true}
// 应用水印
_ = overlay.Label(&label)
// 把水印应用到原图上，使用 BlendModeOver
err = img.Composite(overlay, vips.BlendModeOver, realOffsetX, readOffsetY)

透明度

填充色也一样支持透明度，但是这里 overlay.DrawRect 我们把 alpha channel 的值设置为了 255. 为什么呢？因为 label 不支持添加到 4 bands 的图片

ifthenelse: not one band or 4 bands

我们投机取巧了一下，给定一组 RGBA，我们假设背景为白色，计算出 RGB

func rgbaToRgb(r, g, b, a uint8) (uint8, uint8, uint8) {
	af := float64(a) / 255 // 0-1
	return uint8(float64(r)*af + (1-af)*255 + 0.5),
		uint8(float64(g)*af + (1-af)*255 + 0.5),
		uint8(float64(b)*af + (1-af)*255 + 0.5)
}

fillR, fillG, fillB := rgbaToRgb(.....)