基于原生javaScript生成帶圖片二維碼的方法

這篇文章主要介紹了基于原生javaScript生成帶圖片二維碼的方法，具有一定借鑒價值，感興趣的朋友可以參考下，希望大家閱讀完這篇文章之后大有收獲，下面讓小編帶著大家一起了解一下。

使用鏈接生成二維碼主要是使用qr.js或者其他，把鏈接轉(zhuǎn)化為二維碼的形式，在使用canvas時需要設(shè)置畫布的尺寸，生成的顏色。

<div class="qr_code">
  <img src="" id="imgcode" />
  <canvas ref="canvas" hidden></canvas>
<div>

js

  function createQr () { // 生成帶圖片二維碼
   const qrcode = qr('http://baidu.com') // 轉(zhuǎn)化鏈接
   const canvas = this.$refs.canvas
   const ctx = canvas.getContext('2d')
   const size = 128 / qrcode.moduleCount //128設(shè)置的二維碼尺寸
   const scale = window.devicePixelRatio / getPixelRatio(ctx)
   canvas.height = canvas.width = 128e * scale
   ctx.scale(scale, scale)
   qrcode.modules.forEach((row, rdx) => {
    row.forEach((cell, cdx) => {
     ctx.fillStyle = cell ? '#000' : '#fff' // 設(shè)置二維碼顏色和背景顏色
     var w = (Math.ceil((cdx + 1) * size) - Math.floor(cdx * size))
     ctx.fillRect(Math.round(cdx * size), Math.round(rdx * size), w, w)
    })
   })
   var image = document.createElement('img')
   var imgcode =  document.getElementById('imgcode')
   image.src = 'https://cache.yisu.com/upload/information/20200622/114/10385.png' //二維碼中間圖標(biāo)
   image.onload = () => {
    var dwidth = 128 * 0.2 // 設(shè)置圖片大小
    var dx = (128 - dwidth) / 2
    var dheight = image.height / image.width * dwidth
    var dy = (this.size - dheight) / 2
    image.width = dwidth
    image.height = dheight
    ctx.drawImage(image, dx, dy, dwidth, dheight)
    imgcode.src = canvas.toDataURL()
   }
 },
 getPixelRatio (ctx) {
   return ctx.webkitBackingStorePixelRatio || ctx.backingStorePixelRatio || 1
 }

感謝你能夠認(rèn)真閱讀完這篇文章，希望小編分享的“基于原生javaScript生成帶圖片二維碼的方法”這篇文章對大家有幫助，同時也希望大家多多支持億速云，關(guān)注億速云行業(yè)資訊頻道，更多相關(guān)知識等著你來學(xué)習(xí)!