使用canvas一步步实现图片打码功能的方法

admin html5 2022-02-06 00:37:06 canvas 图片打码"

原文地址
https://github.com/MY729/front-common-funtion/blob/master/picture-code-demo/README.md

预览地址
https://my729.github.io/front-common-funtion/picture-code-demo/picture-code.html

准备工作

demo 基于 vue + elelment-ui

首先创建一个html文件, 并引入 vue 和 elelment-ui(注意还有样式文件)




  
  
  
  Document

接下来就可以写我们的打码功能啦

实现思路

创建canvas画布，并将要打码的图片绘制上去
监听鼠标在图片上的点击，移动、松开事件，在canvas画布上绘制要打码的区域
处理绘制的打码区域
保存打码后的图片

将要打码的图片绘制到canvas画布上

// 初始化 绘制图片
toCode (currentImg) {
  this.$nextTick(() => {
    // 获取将要绘制的canvas的父元素节点
    let parentId = document.getElementById('parentId')
    // 初始化图片
    let drawImg = new Image()
    drawImg.setAttribute('crossOrigin', 'anonymous')
    drawImg.crossOrigin = 'Anonymous'
    drawImg.src = currentImg
    // 创建canvas元素并添加到父节点中
    let addCanvas = document.createElement('canvas')
    parentId.appendChild(addCanvas)
    let canvas = parentId.lastElementChild
    canvas.id = 'imgCanvas'
    if (canvas.getContext) {
      let ctx = canvas.getContext('2d')
      // 绘制图片
      drawImg.onload = function () {
        canvas.width = 720
        canvas.height = 500
        ctx.drawImage(drawImg, 0, 0, 720, 500)
      }
    }
  })
}

点击打码按钮，绘制打码区域

思路：

鼠标点击，获取点击时的坐标，每次点击前可能会存在打过码的区域，先清除画布，重新绘制图片
鼠标移动，开始绘制打码的矩形，通过移动的坐标和上面点击的点坐标确定绘制的矩形坐标和宽高
将绘制的打码矩形，分割成一个个宽高15像素的小正方形，并给每个小正方形生产随机颜色
鼠标松开，停止绘制矩形

// 打码
dialogCode (img) {
  let parentId = document.getElementById('parentId')
  let canvas = document.getElementById('imgCanvas')
  if (canvas.getContext) {
    let ctx = canvas.getContext('2d')
    let drawImage = new Image()
    drawImage.crossOrigin = 'Anonymous'
    drawImage.src = img
    drawImage.onload = () => {
      ctx.drawImage(drawImage, 0, 0, 720, 500)
    }
    // 鼠标点击
    parentId.onmousedown = e => {
      ctx.clearRect(0, 0, canvas.width, canvas.height)
      ctx.drawImage(drawImage, 0, 0, 720, 500)
      this.flag = true
      this.clickX = e.offsetX // 鼠标点击时的X
      this.clickY = e.offsetY // 鼠标点击时的Y
    }
    // 鼠标松开
    parentId.onmouseup = () => {
      this.flag = false
    }
    // 鼠标按下
    parentId.onmousemove = e => {
      if (this.flag) {
        ctx.clearRect(0, 0, canvas.width, canvas.height)
        ctx.drawImage(drawImage, 0, 0, 720, 500)
        ctx.beginPath()
        let pixels = [] // 二维数组，每个子数组有5个值（绘制矩形左上角的X坐标、y坐标，矩形的宽、高，生成的4位随机数用于颜色值）
        for (let x = 0; x < (e.offsetX - this.clickX) / 15; x++) {
          for (let y = 0; y < (e.offsetY - this.clickY) / 15; y++) {
            pixels.push([(x * 15 + this.clickX), (y * 15 + this.clickY), 15, 15, Math.floor(Math.random() * 9999)])
          }
          for (let y = 0; y > (e.offsetY - this.clickY) / 15; y--) {
            pixels.push([(x * 15 + this.clickX), (y * 15 + this.clickY), 15, 15, Math.floor(Math.random() * 9999)])
          }
        }
        for (let x = 0; x > (e.offsetX - this.clickX) / 15; x--) {
          for (let y = 0; y > (e.offsetY - this.clickY) / 15; y--) {
            pixels.push([(x * 15 + this.clickX), (y * 15 + this.clickY), 15, 15, Math.floor(Math.random() * 9999)])
          }
          for (let y = 0; y < (e.offsetY - this.clickY) / 15; y++) {
            pixels.push([(x * 15 + this.clickX), (y * 15 + this.clickY), 15, 15, Math.floor(Math.random() * 9999)])
          }
        }
        // 遍历数组绘制小正方形块
        for (let i = 0; i < pixels.length; i++) {
          ctx.fillStyle = '#bf' + pixels[i][4]
          ctx.fillRect(pixels[i][0], pixels[i][1], pixels[i][2], pixels[i][3])
        }
        ctx.fill()
        ctx.closePath()
      }
    }
  }
}

保存

// 保存
dialogUpload () {
  let canvas = document.getElementById('imgCanvas')
  let tempImg = canvas.toDataURL('image/png')
  let imgURL = document.getElementById('imgURL')
  imgURL.crossOrigin = 'Anonymous'
  imgURL.src = tempImg
}

源码

复制到html文件可预览




  
  
  
  使用canvas一步步实现图片打码功能
  
  
  


  
    
      vue项目中使用canvas一步步实现图片打码功能
      打码
      保存
    
    
      点击打码按钮，在图片上绘制打码区域； 点击保存，生成打码后的图片
      保存后的图片