canvas图片手动打码

第一步：点击打码按钮触发watchUrl（）方法，传入图片网络路径，打开弹窗

watchUrl(url,index,id){
        this.damaId = id
        this.showCanvas = true
        this.currentDmUrl = url
        this.damaIndex = index
        this.$nextTick(()=>{
          const canvas = document.getElementById("imgCanvas");
          const ctx = canvas.getContext("2d")
          const img = new Image();
          const ss = url
          img.src = ss + '?' + new Date().getTime();//给图片路径添加一个时间戳防止缓存
          img.setAttribute('crossOrigin', 'anonymous');//防止canvas跨域获取不到图片信息
          const img_width = 650
          canvas.height = img_width*img.height/img.width
          canvas.width = img_width
          img.onload = () => {
            ctx.drawImage(img, 0, 0, img.width, img.height, 0, 0, img_width,img_width*img.height/img.width)
          }
        })
      },

第二步：当鼠标在canvas中按下时触发mouseDown方法，表示打码开始

 mousedown(e){
        this.start = true
    },

第三部，鼠标移动时触发mouseMove方法

    mousemove(e){
          if(this.start){
            const canvas = document.getElementById("imgCanvas");
            const ctx = canvas.getContext("2d")
            const imgData = ctx.getImageData(0,0,canvas.width,canvas.height)
            //马赛克的程度，数字越大越模糊
            let num = 20;
            //获取鼠标当前所在的像素RGBA
            let color = this.getXY(imgData, e.offsetX, e.offsetY);
            for (let k = 0; k < num; k++) {
                for (let l = 0; l < num; l++) {
                    //设置imgData上坐标为(e.offsetX + l, e.offsetY + k)的的颜色
                    this.setXY(imgData, e.offsetX + l, e.offsetY + k, color);
                }
            }
            ctx.putImageData(imgData, 0, 0);
          }
      },
     setXY(obj, x, y, color) {
        var w = obj.width;
        var h = obj.height;
        var d = obj.data;
        obj.data[4 * (y * w + x)] = color[0];
        obj.data[4 * (y * w + x) + 1] = color[1];
        obj.data[4 * (y * w + x) + 2] = color[2];
        obj.data[4 * (y * w + x) + 3] = color[3];
    },
    getXY(obj, x, y) {
        var w = obj.width;
        var h = obj.height;
        var d = obj.data;
        var color = [];
        color[0] = obj.data[4 * (y * w + x)];
        color[1] = obj.data[4 * (y * w + x) + 1];
        color[2] = obj.data[4 * (y * w + x) + 2];
        color[3] = obj.data[4 * (y * w + x) + 3];
        return color;
    },

第四步：鼠标松开触发mouseup方法

mouseup(){
     this.start = false
 },

效果图如下：

点击确定按钮，触发savaImg方法，canvas生成base64的图片：

 saveImg(){
        const canvas = document.getElementById("imgCanvas");
        var tempSrc = canvas.toDataURL('image/png');
        var formDatas = new FormData();
        formDatas.append("file", tempSrc);
        this.dataURLtoFile(tempSrc,'a.jpg')//此方法作用是将base64格式的图片转为文件格式之后方便再次上传到后端（若不需要上传可直接返回tempSrc即可展示）
      },
dataURLtoFile(dataurl, filename) {//将base64转换为文件，dataurl为base64字符串，filename为文件名（必须带后缀名，如.jpg,.png）
          var arr = dataurl.split(','), mime = arr[0].match(/:(.*?);/)[1],
              bstr = atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n);
          while(n--){
              u8arr[n] = bstr.charCodeAt(n);
          }
          this.fileList = new File([u8arr], filename, {type:mime});
          let formDatas = new FormData();
          formDatas.append('file',this.fileList,this.fileList.name);
          upLoadImage(formDatas).then(res => { //此为上传图片的方法不需要上传可不需要调用此方法
            this.$set(this.wg[this.damaIndex],'url',res.data.url)
            this.detailInfo.img.forEach((oldItem)=>{
              if(oldItem.id == this.damaId){
                console.log(oldItem.img_url)
                oldItem.img_url = res.data.url
                console.log(oldItem.img_url)
              }
            })
            this.showCanvas = false
          })
      },