在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: \ 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：不适⽤于微信浏览器，只能提⽰⽤户长按保存。

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