在Vue中用canvas实现二维码和图片合成海报的方法

前端  /  管理员 发布于 5年前   738

在项目中经常会遇到需要将不同的二维码放到一张通用图片上，提供用户下载

简单来说，就是利用canvas将同等比例的二维码在图片上叠加，生成海报

1. 设置相应比例

一般来说海报背景都是固定的，可以直接放在public文件夹，二维码可根据后台返回数据，也可用canvas生成，在此不多赘述

import posterBgImg from '../public/images/poster_bg.png';// 海报底图import qrcodeImg from '../public/images/qrcode.png';// 二维码export default{  name: 'qrcode-in-poster',  data(){    return {      posterBgImg,      qrcodeImg,      posterSize: 930/650,// 海报高宽比例      qrCodeSize: {// 二维码与海报对应比例 =》 用于设置二维码在海报中的位置        width: 270/650,        height: 270/930,        left: 190/650,        top: 448/650      },      poster: '',// 合成图片    }  }};

2. 获取屏幕宽度

限定移动端最大宽度为 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, // 图片宽度： 由于手机屏幕时retina屏，都会多倍渲染，在此只设置2倍，如果直接设置等于手机屏幕，会导致生成的图片分辨率不够而模糊      _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; // 二维码左侧距离 = 比例 * 宽度    // 设置canvas宽高      canvas.width = _w;     canvas.height = _h;    ctx.rect(0, 0, _w, _h);    ctx.fillStyle = '#fff'; // 填充颜色    ctx.fill();    // 迭代生成： 第一层（底图）+ 第二层（二维码）    // file：文件，size：[顶部距离，左侧距离，宽度，高度]    let _list = [       {        file: _url,        size: [0, 0, _w, _h]      }, {        file: qrcode,        size: [_qr_l, _qr_t, _qr_w, _qr_h]      }    ];    // 开始绘画    let drawing = (_index) => {      // 判断当前索引 =》 是否已绘制完毕      if (_index < _list.length) {        // 等图片预加载后画图        let img = new Image(),          timeStamp = new Date().getTime();        // 防止跨域        img.setAttribute('crossOrigin', 'anonymous')        // 链接加上时间戳        img.src = _list[_index].file + '?' + timeStamp        img.onload = function() {          // 画图          ctx.drawImage(img, ..._list[_index].size)          // 递归_list          drawing(_index + 1)        }      } else {        // 生成图片        base64 = canvas.toDataURL("image/png")        if (base64) {          // 赋值相应海报上          this.$set(that, 'poster', base64)        }      }    }    drawing(0)  }};mounted(){  // 需要合成海报的图片  this.draw(this.posterBgImg)}

4. 下载

点击下载合成图片

methods: {  handleDownload(){    if(this.poster){      let a = document.createElement("a");      a.setAttribute("download", "海报下载-"+(new Date().getTime()));      a.href = this.poster      a.click()    }else{      console.log("海报不存在，请重新生成！")    }  }}

tips：不适用于微信浏览器，只能提示用户长按保存。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

您可能感兴趣的文章:

• Vue使用Canvas绘制图片、矩形、线条、文字，下载图片
• Vue中使用canvas方法总结
• 使用canvas实现一个vue弹幕组件功能
• vue+canvas实现炫酷时钟效果的倒计时插件（已发布到npm的vue2插件，开箱即用）
• 基于vue2的canvas时钟倒计时组件步骤解析
• vue实现pdf导出解决生成canvas模糊等问题(推荐)
• vue 使用html2canvas将DOM转化为图片的方法
• Vue利用canvas实现移动端手写板的方法
• 基于vue+canvas的excel-like组件实例详解