在前端中怎么實現(xiàn)圖片打碼？使用canvas完成打碼案例！

猿友 2021-08-03 13:54:03 瀏覽數(shù) (2304)

反饋

在現(xiàn)在網(wǎng)絡上要是遇到分享一些有關于自己的形成機票或者高鐵機票的時候都會進行一個打碼保護個人隱私，那么今天我們就來講講有關于：“在前端中怎么實現(xiàn)圖片打碼？”這個問題，順便教大家如何在前端中對圖片打碼！內(nèi)容如下所示！

原文地址
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

首先創(chuàng)建一個html文件, 并引入 vue 和 elelment-ui(注意還有樣式文件)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <!-- elelment-ui樣式 -->
  <link rel="stylesheet" >
</head>
<body>
  
</body>
<!-- 引入vue -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<!-- 引入element-ui -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
</html>

接下來就可以寫我們的打碼功能啦

實現(xiàn)思路

創(chuàng)建canvas畫布，并將要打碼的圖片繪制上去
監(jiān)聽鼠標在圖片上的點擊，移動、松開事件，在canvas畫布上繪制要打碼的區(qū)域
處理繪制的打碼區(qū)域
保存打碼后的圖片

將要打碼的圖片繪制到canvas畫布上

// 初始化 繪制圖片
toCode (currentImg) {
  this.$nextTick(() => {
    // 獲取將要繪制的canvas的父元素節(jié)點
    let parentId = document.getElementById('parentId')
    // 初始化圖片
    let drawImg = new Image()
    drawImg.setAttribute('crossOrigin', 'anonymous')
    drawImg.crossOrigin = 'Anonymous'
    drawImg.src = currentImg
    // 創(chuàng)建canvas元素并添加到父節(jié)點中
    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)
      }
    }
  })
}

點擊打碼按鈕，繪制打碼區(qū)域

思路：

鼠標點擊，獲取點擊時的坐標，每次點擊前可能會存在打過碼的區(qū)域，先清除畫布，重新繪制圖片
鼠標移動，開始繪制打碼的矩形，通過移動的坐標和上面點擊的點坐標確定繪制的矩形坐標和寬高
將繪制的打碼矩形，分割成一個個寬高15像素的小正方形，并給每個小正方形生產(chǎn)隨機顏色
鼠標松開，停止繪制矩形

// 打碼
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 = [] // 二維數(shù)組，每個子數(shù)組有5個值（繪制矩形左上角的X坐標、y坐標，矩形的寬、高，生成的4位隨機數(shù)用于顏色值）
        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)])
          }
        }
        // 遍歷數(shù)組繪制小正方形塊
        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文件可預覽：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>使用canvas一步步實現(xiàn)圖片打碼功能</title>
  <!-- elelment-ui樣式 -->
  <link rel="stylesheet" >
  <style type="text/css">
    .rc-code__buttons {
      margin: 20px;
    }
  </style>
</head>
<body>
  <div id="app">
    <div class="rc-code__buttons">
      <h1>vue項目中使用canvas一步步實現(xiàn)圖片打碼功能</h1>
      <el-button type="primary" @click="dialogCode(data.img_url)">打碼</el-button>
      <el-button type="success" @click="dialogUpload()">保存</el-button>
    </div>
    <el-row>
      <el-col :span="12"><h3>點擊打碼按鈕，在圖片上繪制打碼區(qū)域； 點擊保存，生成打碼后的圖片</h3></el-col>
      <el-col :span="12"><h3>保存后的圖片</h3></el-col>
      <el-col :span="12"><div id="parentId"></div></el-col>
      <el-col :span="12"><img id="imgURL"/></el-col>
    </el-row>
  </div>
</body>
<!-- 引入vue -->
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<!-- 引入element-ui -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
new Vue({
  el: '#app',
  data () {
    return {
      data: {
        img_url: 'https://avatars0.githubusercontent.com/u/26196557?s=460&v=4'
      },
      flag: false, // 是否繪制矩形
      clickX: '', // 開始繪制矩形時，鼠標點擊時的x坐標
      clickY: '' // 開始繪制矩形時，鼠標點擊時的y坐標
    }
  },
  mounted() {
    this.toCode(this.data.img_url)
  },
  methods: {
    // 初始化 繪制圖片
    toCode (currentImg) {
      this.$nextTick(() => {
        let parentId = document.getElementById('parentId')
        let drawImg = new Image()
        drawImg.setAttribute('crossOrigin', 'anonymous')
        drawImg.crossOrigin = 'Anonymous'
        drawImg.src = currentImg
        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)
          }
        }
      })
    },
    // 打碼
    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 = [] // 二維數(shù)組，每個子數(shù)組有5個值（繪制矩形左上角的X坐標、y坐標，矩形的寬、高，生成的4位隨機數(shù)用于顏色值）
            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
    }
  }
})
</script>
</html>

那么以上就是有關于：“在前端中怎么實現(xiàn)圖片打碼？”這個問題實現(xiàn)方法，如果你有其他的實現(xiàn)方法也可以分享給大家一起學習進步，有喜歡html5這方面的小伙伴更是可以在W3Cschool觀看相關課程和文章進行學習。

HTML5

0 人點贊

在前端中怎么實現(xiàn)圖片打碼？使用canvas完成打碼案例！

在前端中怎么實現(xiàn)圖片打碼？使用canvas完成打碼案例！