fabricjs马赛克笔刷

最近在做一个浏览器插件，其功能是截取当前网页的部分内容，然后像聊天工具截图那样编辑图片，其中的一个工具的给图片打马赛克。实际效果如下

通过方案对比最终采用了自定义画笔的方式来实现而不是矩形区域框选的方案。

代码如下：

PS: 以下代码基于fabricjs 5.2.1 版本

生成马赛克笔刷的工具函数 fabric-brush.ts

代码语言：javascript复制

import { IMosaicPatternBrush } from '@/types/fabric-shim';
import { fabric } from 'fabric';
const mosaicify = (imageData: ImageData) => {
  const { data } = imageData;
  const iLen = imageData.height;
  const jLen = imageData.width;
  let index; let i; let j; let r; let g; let b; let a; let _i; let _j; let _iLen; let _jLen;
  // const { blockSize } = this;
  const blockSize = 20;
  for (i = 0; i < iLen; i  = blockSize) {
    for (j = 0; j < jLen; j  = blockSize) {
      index = (i * 4 * jLen)   (j * 4);
      r = data[index];
      g = data[index   1];
      b = data[index   2];
      a = data[index   3];

      _iLen = Math.min(i   blockSize, iLen);
      _jLen = Math.min(j   blockSize, jLen);
      for (_i = i; _i < _iLen; _i  ) {
        for (_j = j; _j < _jLen; _j  ) {
          index = (_i * 4 * jLen)   (_j * 4);
          data[index] = r;
          data[index   1] = g;
          data[index   2] = b;
          data[index   3] = a;
          /*
          data[index] = 0;
          data[index   1] = 0;
          data[index   2] = 0;
          */
        }
      }
    }
  }
};

export const mosaicBrush = (fabricCanvas: fabric.Canvas): IMosaicPatternBrush => {
  const squareBrush: IMosaicPatternBrush = new fabric.PatternBrush(fabricCanvas);
  // getPatternSrc  取得要重复绘製的图形 Canvas
  squareBrush.getPatternSrc = function() {
    // 创立一个暂存 canvas 来绘製要画的图案
    const cropping = {
      left: 0,
      top: 0,
      width: fabricCanvas.width,
      height: fabricCanvas.height,
    };
    const imageCanvas = fabricCanvas.toCanvasElement(1, cropping);
    const imageCtx: any = imageCanvas.getContext('2d');
    const imageData = imageCtx.getImageData(0, 0, imageCanvas.width, imageCanvas.height);
    mosaicify(imageData);
    imageCtx.putImageData(imageData, 0, 0);

    const patternCanvas = (fabric as any).document.createElement('canvas'); // 这里的ceateElement一定要使用fabric内置的方法
    const patternCtx: any = patternCanvas.getContext('2d');
    patternCanvas.width = fabricCanvas.width || 0;
    patternCanvas.height = fabricCanvas.height || 0;
    patternCtx.drawImage(
      imageCanvas,
      0, 0, imageCanvas.width, imageCanvas.height,
      cropping.left, cropping.top, cropping.width, cropping.height
    );
    return patternCanvas;
  };
  return squareBrush;
};

使用

代码语言：javascript复制

// 生成马赛克画笔实例
const brush: IMosaicPatternBrush = mosaicBrush(fabIns);
// 这里不能少，否则画出来的内容不会生效，会被其他内容覆盖
brush.source = brush.getPatternSrc.call(brush);
// 设置画笔
fabIns.freeDrawingBrush = brush;

fabric fabricjs ps 插件 工具

0 人点赞