前端处理图片脱敏效果，给图片进行马赛克处理

马赛克处理主要利用canvas进行处理，使用image-mosaic插件

npm插件

*	npm install image-mosaic -s -d

template

				<div id="box">
				      <canvas id="canvas"></canvas>
				      <button id='drawAll'>全部马赛克</button>
				      <button id='clearAll'>清除马赛克</button>
				</div>

script

import Mosaic from "image-mosaic";
export default {
  mounted() {
    this.drawImageToCanvas(
      "https://img0.baidu.com/it/u=1659180627,667124450&fm=26&fmt=auto" //传入要处理的图片链接
    ).then((ctx) => {
      const mosaic = new Mosaic(ctx);
      const MouseEvents = {
        /*
          初始化
        */
        init() {
          mosaic.context.canvas.addEventListener(
            "mousedown",
            MouseEvents.mousedown
          );
        },
        /*
          鼠标事件
        */
        mousedown() {
          mosaic.context.canvas.addEventListener(
            "mousemove",
            MouseEvents.mousemove
          );
          document.addEventListener("mouseup", MouseEvents.mouseup);
        },
        mousemove(e) {
          if (e.shiftKey) {
            mosaic.eraseTileByPoint(e.layerX, e.layerY);
            return;
          }
          mosaic.drawTileByPoint(e.layerX, e.layerY);
          console.log(e.layerX, e.layerY);
        },
        mouseup() {
          mosaic.context.canvas.removeEventListener(
            "mousemove",
            MouseEvents.mousemove
          );
          document.removeEventListener("mouseup", MouseEvents.mouseup);
        },
      };
      MouseEvents.init(); // 初始化

      /*
        图片一开始就马赛克处理，比如后端返回了一张图片，或者前端通过oss上传得到的图片路径， mosaic.drawTileByPoint(X, Y);  
        这里的位置需要后端进行识别并且返回坐标，如一开始无需进行马赛克处理，可进行注释
      */
      for (let a = 61; a < 418; a++) {
        mosaic.drawTileByPoint(a, 287);
      }

      /*
        马赛克后返回的图片路径
      */
      var dataURL = document.querySelector("#canvas").toDataURL("image/png");
      console.log(dataURL);

      /*
        全部马赛克
      
      */
      document.querySelector("#drawAll").addEventListener("click", () => {
        mosaic.drawAllTiles();
      });

      /*
        清除全部马赛克
      */
      document.querySelector("#clearAll").addEventListener("click", () => {
        mosaic.eraseAllTiles();
        var dataURL = document.querySelector("#canvas").toDataURL("image/png");
        console.log(dataURL);
      });
    });
  },
  methods: {
    drawImageToCanvas(imageUrl) {
      const canvas = document.querySelector("#canvas");
      const ctx = canvas.getContext("2d");
      return new Promise((resolve, reject) => {
        const image = new Image();
        image.crossOrigin = "Annoymous";
        image.onload = function() {
          canvas.width = this.width;
          canvas.height = this.height;
          ctx.drawImage(this, 0, 0, this.width, this.height);
          resolve(ctx);

          // this.$refs['img'].src = dataURL
        };
        image.src = imageUrl;
      });
    },
  },
};

• 创作不易，转载请注明来源，谢谢https://blog.csdn.net/Eno_Lin?spm=3001.5343