搜索到
1
篇与
的结果
-
fabricjs马赛克笔刷 最近在做一个浏览器插件，其功能是截取当前网页的部分内容，然后像聊天工具截图那样编辑图片，其中的一个工具的给图片打马赛克。实际效果如下通过方案对比最终采用了自定义画笔的方式来实现而不是矩形区域框选的方案。代码如下：PS: 以下代码基于fabricjs 5.2.1 版本生成马赛克笔刷的工具函数 fabric-brush.tsimport { 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; }; 使用// 生成马赛克画笔实例 const brush: IMosaicPatternBrush = mosaicBrush(fabIns); // 这里不能少，否则画出来的内容不会生效，会被其他内容覆盖 brush.source = brush.getPatternSrc.call(brush); // 设置画笔 fabIns.freeDrawingBrush = brush;
