搜索
简帛阁>技术文章>在Vue中用canvas实现二维码和图片合成海报的方法

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

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

简单来说,就是利用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:不适用于微信浏览器,只能提示用户长按保存。

项目中经常会遇到需要将不同二维码放到一张通用图片上,提供用户下载简单来说,就是利用canvas将同等比例二维码图片上叠加,生成海报1设置相应比例一般来说海报背景都是固定,可以直接放publ
本文实例为大家分享了canvas二维码图片合成海报具体代码,供大家参考,具体内容如下思路:微信中登录,后台传来是一个链接、一个名字、一张图片。把图片当做背景,画满整个画布。之后需要把链接转为二
思路:微信中登录,后台传来是一个链接、一个名字、一张图片。把图片当做背景,画满整个画布。之后需要把链接转为二维码,使用jqqrcode转化,转化完成后是一个canvas,把这个canvas再转成
data(){return{logoimg:'',//logo图片ctx:'',qrBase64:'',//二维码地址}}//点击下载按钮访问downloadposterPicture(){varca
前言最近接到一个需求,用文字图片合成一个海报,用于活动结尾页微信长按分享,接到需求第一时间,我就想到用canvas来画,但是看到canvas繁琐绘制过程,不由得感到头大,后几经搜索,果然发现已
效果图代码<!DOCTYPEhtml><htmllangen><head><metacharsetUTF8><title>Title<
不多说,只是想分享踩坑经验,若有不好,请谅解//想看实际效果的话,可以关注公众号“捧场客”,商品详情里面分享,是海报合成,可以研究下//若不嫌弃,可以直接拿过去复制,只需要改成自己图片地址就行/
景:1用户点击分享朋友圈,将二维码与一张背景图合成一张图片,然后将其显示。2用户点击保存图片图片保存到手机相册里面。问题:用户点击分享盆友圈合成图片显示空白。控制台可以打印出来链接。实现合成
本文实例讲述了微信小程序实现canvas合成图片功能。分享给大家供大家参考,具体如下:先要获取图片信息然后将需要合成内容用canvas绘制出来,得到一个合成画布,接下来用wxcanvasT
审核业务中难免会有需要对图片进行标注需求,本次用一个最小demo来演示如何对图片进行矩形标注。首先我们要理解canvas是一块画布,而这块画布需要我们要标注图片上层,图片canvas外层