如何在Vue中用canvas實(shí)現(xiàn)二維碼和圖片合成海報(bào)

小編給大家分享一下如何在Vue中用canvas實(shí)現(xiàn)二維碼和圖片合成海報(bào)，相信大部分人都還不怎么了解，因此分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后大有收獲，下面讓我們一起去了解一下吧！

在項(xiàng)目中經(jīng)常會(huì)遇到需要將不同的二維碼放到一張通用圖片上，提供用戶(hù)下載

簡(jiǎn)單來(lái)說(shuō)，就是利用canvas將同等比例的二維碼在圖片上疊加，生成海報(bào)

1. 設(shè)置相應(yīng)比例

一般來(lái)說(shuō)海報(bào)背景都是固定的，可以直接放在public文件夾，二維碼可根據(jù)后臺(tái)返回?cái)?shù)據(jù)，也可用canvas生成，在此不多贅述

import posterBgImg from '../public/images/poster_bg.png';// 海報(bào)底圖
import qrcodeImg from '../public/images/qrcode.png';// 二維碼
export default{
  name: 'qrcode-in-poster',
  data(){
    return {
      posterBgImg,
      qrcodeImg,
      posterSize: 930/650,// 海報(bào)高寬比例
      qrCodeSize: {// 二維碼與海報(bào)對(duì)應(yīng)比例 =》 用于設(shè)置二維碼在海報(bào)中的位置
        width: 270/650,
        height: 270/930,
        left: 190/650,
        top: 448/650
      },
      poster: '',// 合成圖片
    }
  }
};

2. 獲取屏幕寬度

限定移動(dòng)端最大寬度為 480px

computed: {
  screenWidth(){
    let w = document.body.clientWidt || document.documentElement.clientWidth || 375;
    return w > 480 ? 480 : w ;
  }
};

3. 組合圖片

methods: {
  combinedPoster(_url){
    let that = this,
      qrcode = this.qrcodeImg; // 二維碼地址
  
    console.log("open draw: ", _url, qrcode)
    let base64 = '',
      canvas = document.createElement('canvas'),
      ctx = canvas.getContext("2d"),
      _w = this.screenWidth * 2, // 圖片寬度： 由于手機(jī)屏幕時(shí)retina屏，都會(huì)多倍渲染，在此只設(shè)置2倍，如果直接設(shè)置等于手機(jī)屏幕，會(huì)導(dǎo)致生成的圖片分辨率不夠而模糊
      _h = this.posterSize * _w, // 圖片高度
      _qr_w = this.qrCodeSize.width * _w, // 二維碼寬 = 比例 * 寬度
      _qr_h = this.qrCodeSize.height * _h, // 二維碼高 = 比例 * 高度
      _qr_t = this.qrCodeSize.top * _w, // 二維碼頂部距離 = 比例 * 寬度
      _qr_l = this.qrCodeSize.left * _w; // 二維碼左側(cè)距離 = 比例 * 寬度
    // 設(shè)置canvas寬高  
    canvas.width = _w; 
    canvas.height = _h;
    ctx.rect(0, 0, _w, _h);
    ctx.fillStyle = '#fff'; // 填充顏色
    ctx.fill();
    // 迭代生成： 第一層（底圖）+ 第二層（二維碼）
    // file：文件，size：[頂部距離，左側(cè)距離，寬度，高度]
    let _list = [ 
      {
        file: _url,
        size: [0, 0, _w, _h]
      }, {
        file: qrcode,
        size: [_qr_l, _qr_t, _qr_w, _qr_h]
      }
    ];
    // 開(kāi)始繪畫(huà)
    let drawing = (_index) => {
      // 判斷當(dāng)前索引 =》 是否已繪制完畢
      if (_index < _list.length) {
        // 等圖片預(yù)加載后畫(huà)圖
        let img = new Image(),
          timeStamp = new Date().getTime();
        // 防止跨域
        img.setAttribute('crossOrigin', 'anonymous')
        // 鏈接加上時(shí)間戳
        img.src = _list[_index].file + '?' + timeStamp
        img.onload = function() {
          // 畫(huà)圖
          ctx.drawImage(img, ..._list[_index].size)
          // 遞歸_list
          drawing(_index + 1)
        }
      } else {
        // 生成圖片
        base64 = canvas.toDataURL("image/png")
        if (base64) {
          // 賦值相應(yīng)海報(bào)上
          this.$set(that, 'poster', base64)
        }
      }
    }
    drawing(0)
  }
};
mounted(){
  // 需要合成海報(bào)的圖片
  this.draw(this.posterBgImg)
}

4. 下載

點(diǎn)擊下載合成圖片

methods: {
  handleDownload(){
    if(this.poster){
      let a = document.createElement("a");
      a.setAttribute("download", "海報(bào)下載-"+(new Date().getTime()));
      a.href = this.poster
      a.click()
    }else{
      console.log("海報(bào)不存在，請(qǐng)重新生成！")
    }
  }
}

tips：不適用于微信瀏覽器，只能提示用戶(hù)長(zhǎng)按保存。

為什么要使用Vue

Vue是一款友好的、多用途且高性能的JavaScript框架，使用vue可以創(chuàng)建可維護(hù)性和可測(cè)試性更強(qiáng)的代碼庫(kù)，Vue允許可以將一個(gè)網(wǎng)頁(yè)分割成可復(fù)用的組件，每個(gè)組件都包含屬于自己的HTML、CSS、JavaScript，以用來(lái)渲染網(wǎng)頁(yè)中相應(yīng)的地方，所以越來(lái)越多的前端開(kāi)發(fā)者使用vue。

以上是“如何在Vue中用canvas實(shí)現(xiàn)二維碼和圖片合成海報(bào)”這篇文章的所有內(nèi)容，感謝各位的閱讀！相信大家都有了一定的了解，希望分享的內(nèi)容對(duì)大家有所幫助，如果還想學(xué)習(xí)更多知識(shí)，歡迎關(guān)注億速云行業(yè)資訊頻道！