Methods to implement QR code and image synthesis poster using canvas in Vue

In projects, you often encounter the need to put different QR codes on a common picture and provide users with downloads

Simply put, it is to use canvas to superimpose the same proportion of QR codes on the picture to generate posters

1. Set the corresponding proportion

Generally speaking, the background of the poster is fixed and can be placed directly in the public folder. The QR code can return data according to the background, or can be generated by canvas. I will not elaborate on it here.

import posterBgImg from '../public/images/poster_bg.png';// Poster bottom pictureimport qrcodeImg from '../public/images/';// QR codeexport default{
  name: 'qrcode-in-poster',
  data(){
    return {
      posterBgImg,
      qrcodeImg,
      posterSize: 930/650,// Poster height and width ratio      qrCodeSize: {// The corresponding ratio of QR code to poster =》 is used to set the position of QR code in poster        width: 270/650,
        height: 270/930,
        left: 190/650,
        top: 448/650
      },
      poster: '',// Synthesize pictures    }
  }
};

2. Get screen width

Limited maximum width of mobile terminal is 480px

computed: {
  screenWidth(){
    let w =  ||  || 375;
    return w > 480 ? 480 : w ;
  }
};

3. Combination pictures

methods: {
  combinedPoster(_url){
    let that = this,
      qrcode = ; // QR code address  
    ("open draw: ", _url, qrcode)
    let base64 = '',
      canvas = ('canvas'),
      ctx = ("2d"),
      _w =  * 2, // Image width: Since the retina screen will be rendered multiple times when the mobile phone screen is displayed, only 2 times will be set here. If it is set directly to the mobile phone screen, the generated image resolution will be insufficient and blurred      _h =  * _w, // Picture height      _qr_w =  * _w, // QR code width = proportion * width      _qr_h =  * _h, // QR code height = proportion * height      _qr_t =  * _w, // QR code top distance = proportion * width      _qr_l =  * _w; // The distance to the left of the QR code = proportion * width    // Set the width and height of canvas     = _w; 
     = _h;
    (0, 0, _w, _h);
     = '#ffff'; // Fill color    ();
    // Iterative generation: first layer (base map) + second layer (QR code)    // file: file, size: [top distance, left distance, width, height]    let _list = [ 
      {
        file: _url,
        size: [0, 0, _w, _h]
      }, {
        file: qrcode,
        size: [_qr_l, _qr_t, _qr_w, _qr_h]
      }
    ];
    // Start painting    let drawing = (_index) =&gt; {
      // Determine whether the current index =》 has been drawn      if (_index &lt; _list.length) {
        // Draw pictures after preloading        let img = new Image(),
          timeStamp = new Date().getTime();
        // Prevent cross-domain        ('crossOrigin', 'anonymous')
        // Add a time stamp to the link         = _list[_index].file + '?' + timeStamp
         = function() {
          // Draw pictures          (img, ..._list[_index].size)
          // Recursive_list          drawing(_index + 1)
        }
      } else {
        // Generate pictures        base64 = ("image/png")
        if (base64) {
          // Assign the corresponding poster          this.$set(that, 'poster', base64)
        }
      }
    }
    drawing(0)
  }
};
mounted(){
  // Pictures that need to be synthesized on posters  ()
}

4. Download

Click to download the synthetic image

methods: {
  handleDownload(){
    if(){
      let a = ("a");
      ("download", "Poster download-"+(new Date().getTime()));
       = 
      ()
    }else{
      ("The poster does not exist, please regenerate it!")
    }
  }
}

tips: Not applicable to WeChat browser, users can only be prompted to press and save.

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.