How to generate QR code with pictures based on native javascript

This article mainly introduces how to generate QR codes with pictures based on native javaScript. The example code is introduced in this article in detail, which has certain reference value for everyone's learning or work. Friends who need it can refer to it.

Using links to generate QR codes is mainly used or otherwise, converting links into QR codes. When using canvas, you need to set the size of the canvas and the generated color.

&lt;div class="qr_code"&gt;
  &lt;img src=""  /&gt;
  &lt;canvas ref="canvas" hidden&gt;&lt;/canvas&gt;
&lt;div&gt;

js

  function createQr () { // Generate QR code with picture   const qrcode = qr('') // Conversion link   const canvas = this.$
   const ctx = ('2d')
   const size = 128 /  //The QR code size set by 128   const scale =  / getPixelRatio(ctx)
    =  = 128e * scale
   (scale, scale)
   ((row, rdx) =&gt; {
    ((cell, cdx) =&gt; {
      = cell ? '#000' : '#ffff' // Set the QR code color and background color     var w = (((cdx + 1) * size) - (cdx * size))
     ((cdx * size), (rdx * size), w, w)
    })
   })
   var image = ('img')
   var imgcode =  ('imgcode')
    = 'http://baidu/' //QR code middle icon    = () =&gt; {
    var dwidth = 128 * 0.2 // Set the image size    var dx = (128 - dwidth) / 2
    var dheight =  /  * dwidth
    var dy = ( - dheight) / 2
     = dwidth
     = dheight
    (image, dx, dy, dwidth, dheight)
     = ()
   }
 },
 getPixelRatio (ctx) {
   return  ||  || 1
 }

The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.