【uniapp小程序-生成二维码+多个图片文字合并一张图】

<!-- 二维码 --><canvas id="qrcode" canvas-id="qrcode" width="120" ></canvas><!-- 生成带小程序码的分享图片 --><canvas canvas-id="shareCanvas" class="share-canvas"></canvas>

#qrcode{opacity: 0;position: absolute;left: -800rpx;
}
.share-canvas {width: 720px;height: 1280px;background: #fff;position: fixed;left: -720px;top: 0;
}

下载uqrcodejs：https://uqrcode.cn/doc/guide/getting-started.html

import UQRCode from 'uqrcodejs'; 
export default{data(){return{val: 'https', // 要生成的二维码的地址src: '', // 二维码生成后的图片地址或base64bgUrl:'https',//背景图片}},methods:{andImg() {//分享生成图片uni.showLoading({title: "正在生成图片"})if(this.activity_id==11){// 获取uQRCode实例var qr = new UQRCode();// 设置二维码内容qr.data = this.val// 设置二维码大小，必须与canvas设置的宽高一致qr.size = 120;// 调用制作二维码方法qr.make();// 获取canvas上下文var canvasContext = uni.createCanvasContext('qrcode', this); // 如果是组件，this必须传入// 设置uQRCode实例的canvas上下文qr.canvasContext = canvasContext;// 调用绘制方法将二维码图案绘制到canvas上qr.drawCanvas();this.$nextTick(()=>{uni.canvasToTempFilePath({canvasId: 'qrcode',width: 120,height: 120,success: res => {if(res.errMsg=='canvasToTempFilePath:ok'){this.src = res.tempFilePath//获取生成的二维码地址this.onImg()}},fail: err => {console.log(err);}}, );})},onImg() {function toFormateStr (ctx, str, draw_width, lineNum, startX, startY, steps ) {var strWidth = ctx.measureText(str).width;     // 测量文本源尺寸信息（宽度）var startpoint = startY, keyStr = '', sreLN = strWidth / draw_width;var liner = Math.ceil(sreLN);     // 计算文本源一共能生成多少行let strlen = parseInt(str.length / sreLN); 	// 等比缩放测量一行文本显示多少个字符// 若文本不足一行，则直接绘制，反之大于传入的最多行数（lineNum）以省略号（...）代替if (strWidth  < draw_width) {ctx.fillText(str, startX, startpoint);} else {for (var i = 1; i < liner + 1; i++) {let startPoint = strlen * (i-1);if (i < lineNum || lineNum == -1) {keyStr = str.substr(startPoint, strlen);ctx.fillText(keyStr, startX, startpoint);} else {keyStr = str.substr(startPoint, strlen-5) + '...';ctx.fillText(keyStr, startX, startpoint);break;}startpoint = startpoint + steps;}}}const that = this//绘制图片that.csimg = truethat.iconlogo = true//创建canvaslet shareCanvas = uni.createCanvasContext('shareCanvas')//绘制背景图片//canvas绘制图片（drawImage）无效，显示不了，//uniapp的drawImage绘制图片和微信小程序一样，图片路径不能使用网络路径，必须先下载到本地（使用uni.downloadFile()下载成临时文件路径也行）uni.downloadFile({url:that.bgUrl,success(res){shareCanvas.drawImage(res.tempFilePath, 0, 120, 720, 1280)if(that.companyInfo.company_abbr){if(that.companyInfo.company_abbr.length <= 6){shareCanvas.setFontSize('56')}else if(that.companyInfo.company_abbr.length > 6 && that.companyInfo.company_abbr.length <= 10){shareCanvas.setFontSize('48')}else if(that.companyInfo.company_abbr.length > 10 && that.companyInfo.company_abbr.length <= 15){shareCanvas.setFontSize('32')}else if(that.companyInfo.company_abbr.length > 15){shareCanvas.setFontSize('26')}}shareCanvas.setTextAlign('center')// 公司名称function title() {const grds = shareCanvas.createLinearGradient(360, 795, 360, 826)shareCanvas.setFontSize('36')shareCanvas.setFillStyle('#e7c998')toFormateStr(shareCanvas, that.companyInfo.company_abbr, 400, 3, 360, 620, 40);}// 奖项function prize_title() {const grds = shareCanvas.createLinearGradient(360, 795, 360, 826)shareCanvas.setFontSize('36')shareCanvas.setFillStyle('#e7c998')toFormateStr(shareCanvas,that.companyInfo.prize.prize_title, 400, 3,360, 800, 40);}if(that.companyInfo.company_abbr){title()}prize_title()shareCanvas.setFontSize('24')shareCanvas.drawImage(that.src, 300, 1045, 120, 120)shareCanvas.draw(false, () => {uni.canvasToTempFilePath({canvasId: "shareCanvas",destWidth: 720, //分享图片尺寸=画布尺寸1*缩放比0.5*像素比21067destHeight: 1300,success(canvasres) {that.csimg = canvasres.tempFilePathuni.previewImage({urls: [canvasres.tempFilePath]})uni.hideLoading()},})})}})},}
}