使用canvas怎么實(shí)現(xiàn)一個圖片打碼功能？很多新手對此不是很清楚，為了幫助大家解決這個難題，下面小編將為大家詳細(xì)講解，有這方面需求的人可以來學(xué)習(xí)下，希望你能有所收獲。

成都創(chuàng)新互聯(lián)是一家網(wǎng)站設(shè)計(jì)公司，集創(chuàng)意、互聯(lián)網(wǎng)應(yīng)用、軟件技術(shù)為一體的創(chuàng)意網(wǎng)站建設(shè)服務(wù)商，主營產(chǎn)品：成都響應(yīng)式網(wǎng)站建設(shè)公司、成都品牌網(wǎng)站建設(shè)、網(wǎng)絡(luò)營銷推廣。我們專注企業(yè)品牌在網(wǎng)站中的整體樹立，網(wǎng)絡(luò)互動的體驗(yàn)，以及在手機(jī)等移動端的優(yōu)質(zhì)呈現(xiàn)。成都網(wǎng)站設(shè)計(jì)、網(wǎng)站制作、移動互聯(lián)產(chǎn)品、網(wǎng)絡(luò)運(yùn)營、VI設(shè)計(jì)、云產(chǎn)品.運(yùn)維為核心業(yè)務(wù)。為用戶提供一站式解決方案，我們深知市場的競爭激烈，認(rèn)真對待每位客戶，為客戶提供賞析悅目的作品，網(wǎng)站的價(jià)值服務(wù)。

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

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

實(shí)現(xiàn)思路

• 創(chuàng)建canvas畫布，并將要打碼的圖片繪制上去

• 監(jiān)聽鼠標(biāo)在圖片上的點(diǎn)擊，移動、松開事件，在canvas畫布上繪制要打碼的區(qū)域

• 處理繪制的打碼區(qū)域

• 保存打碼后的圖片

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

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

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

思路：

• 鼠標(biāo)點(diǎn)擊，獲取點(diǎn)擊時(shí)的坐標(biāo)，每次點(diǎn)擊前可能會存在打過碼的區(qū)域，先清除畫布，重新繪制圖片

• 鼠標(biāo)移動，開始繪制打碼的矩形，通過移動的坐標(biāo)和上面點(diǎn)擊的點(diǎn)坐標(biāo)確定繪制的矩形坐標(biāo)和寬高

• 將繪制的打碼矩形，分割成一個個寬高15像素的小正方形，并給每個小正方形生產(chǎn)隨機(jī)顏色

• 鼠標(biāo)松開，停止繪制矩形

// 打碼
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)
    }
    // 鼠標(biāo)點(diǎn)擊
    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 // 鼠標(biāo)點(diǎn)擊時(shí)的X
      this.clickY = e.offsetY // 鼠標(biāo)點(diǎn)擊時(shí)的Y
    }
    // 鼠標(biāo)松開
    parentId.onmouseup = () => {
      this.flag = false
    }
    // 鼠標(biāo)按下
    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坐標(biāo)、y坐標(biāo)，矩形的寬、高，生成的4位隨機(jī)數(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
}

源碼

復(fù)制到html文件可預(yù)覽

  
  
  
  
  
  
  
    .rc-code__buttons {
      margin: 20px;
    }
  


  
    
      
vue項(xiàng)目中使用canvas一步步實(shí)現(xiàn)圖片打碼功能
      打碼
      保存