vue +canvas+html2canvas +StackBlur.js（照片模糊处理）实现照片打码分享

需求：把指定内容敏感信息打码后，然后分享

操作：点击生成海报按钮，弹出内容，点击打码分享，生成照片

逻辑：

1:内容弹出，element + el-dialog

2:打码（文字打码+照片打码处理）html2canvas + StackBlur

3.照片下载 html2canvas + a.click()

话不多说按钮逻辑看代码

1.弹出内容

2.打码，设置样式 -webkit-filter: blur(10px) 并绑定class

3.下载 html2canvas
给需要下载的内容再加属性ref。来获取
首先要下载html2canvas

npm install html2canvas

在需要的页面引入

import html2canvas from “html2canvas”;

页面操作：

看着到，你可能会很激动，我马上就要成功了！！！，

打开照片之后！！！

what！！！说好的打码呢！！！

备注：canvas是把内容生成照片进行然保存，然后下载，如果要把照片打码，就要把照片进行模糊处理

重点： 照片处理

下载stackblur-canvas

npm install stackblur-canvas

在需要的页面引入

import * as StackBlur from “stackblur-canvas”;

html：加入一行代码放处理过的照片

把内容生成照片再把照片模糊处理


页面效果：
点击生成之后，页面会有两块内容，上面是模糊的照片，下面是模糊的内容


看到这基本上照片模糊已经处理，下面就要在页面展示优化，加上判断展示
完整代码如下

<template>
  <div>
    <el-button type="primary" @click="getdialogVisible()">生成海报</el-button>
    <el-dialog title="海报" :visible.sync="dialogTableVisible" width="60%">
      <template>
        <!-- 存放生存模糊的照片 -->
        <div v-if="imgContSign" class="cont-div" ref="imgcont"></div>
        <div v-if="imageDomSign" class="cont-div" ref="imageDom">
          <img
            :class="{ hiddenBox: hiddenBox }"
            class="img"
            src="../../assets/img/information/list_isnull.png"
          />
          <div :class="{ hiddenBox: hiddenBox }">这是打码分享的内容喲</div>
        </div>
      </template>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogTableVisible = false">取 消</el-button>
        <el-button type="primary" @click="getHiddenBox()">打码分享</el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
// import Mosaic from "image-mosaic";
import * as StackBlur from "stackblur-canvas";
import html2canvas from "html2canvas";

export default {
  data() {
    return {
      // 截图
      dialogTableVisible: false,
      hiddenBox: false,
      imgContSign: false,
      imageDomSign: true,
    };
  }, //data end
  mounted() {},

  methods: {
    getdialogVisible() {
      this.dialogTableVisible = !this.dialogTableVisible;
    },
    getHiddenBox() {
      this.imageDomGetCont();
    },

    // 生成照片
    imageDomGetCont() {
      let _this = this;
      _this.imgContSign = true;
      _this.imageDomSign = false;
      html2canvas(_this.$refs.imageDom).then((canvas) => {
        // 转成图片，生成图片地址  先生成照片
        let img = new Image();
        img.src = canvas.toDataURL("image/jpeg"); // toDataURL :图片格式转成 base64
        img.setAttribute("id", "imgDiv");
        _this.$refs.imgcont.appendChild(img);
        // 再给照片处理
        img.onload = function () {
          var canvas = document.createElement("canvas");
          canvas.setAttribute("id", "myCanvas");
          var ctx = canvas.getContext("2d");
          var w = img.width;
          var h = img.height;
          _this.$refs.imgcont.appendChild(canvas); //给照片放进dom
          ctx.drawImage(img, 0, 0, w, h); //设置大小
          StackBlur.image("imgDiv", "myCanvas", 10, true); //设置模糊度
          canvas.style.width = w + "px";
          canvas.style.height = h + "px";
          img.remove();
          _this.imageDomGets();
        };
      });
    },
    // 导出
    imageDomGets() {
      let _this = this;
      this.hiddenBox = true;
      // 延时器 为了防止页面dom没加载就下载
      setTimeout(function () {
        html2canvas(_this.$refs.imgcont).then((canvas) => {
          // 转成图片，生成图片地址
          _this.bannerDownUrl = canvas.toDataURL("image/png");
          var a = document.createElement("a");
          a.download = name || "下载分享";
          // 设置图片地址
          a.href = _this.bannerDownUrl;
          a.style.display = "none";
          document.body.appendChild(a);
          a.click();
          _this.dialogTableVisible = false;
        });
      }, 100);
    },
  },
};
</script>

<style scoped>
.cont-div {
  border: 1px solid #eee;
  padding: 10px;
  width: 500px;
}
.img {
  width: 80px;
  height: 80px;
  border: 1px solid #eee;
}
.hiddenBox {
  -webkit-filter: blur(10px);
}
</style>