微信小程序利用canvas合成图片，并下载图片(邀请好友功能)

2024-07-13 11:20| 来源: 网络整理| 查看: 265

这个需求是邀请好友功能，可以下载当前的海报图，分享给好友，好友通过扫描二维码跳转至小程序。如果整张图是不变的，就在本地项目中，那就可以直接下载，不用做任何处理，例如：

wx.saveImageToPhotosAlbum({ filePath: /pages/imgs/qrcode_bg.png，//这里是要下载图片的地址 success(res) { console.log(res) } })

但需求是邀请好友，肯定是根据当前登录者的信息去生成二维码，不然邀请到的好友怎么绑定到该用户下，所以会将二维码嵌入背景海报中，合成一张图后，生成一个临时地址，再去下载图片，代码如下：

html部分：

分享微信好友保存图片

js部分：

//生成二维码的js库，下载地址：( https://pan.baidu.com/s/1iEHNl-_F8kGwRDV-enMz5Q 密码: c4hm） import Qr from "../../../utils/wxqrcode.js" Page({ data: { img: '' // 合成后图片的临时路径 }, getQRcode() { let codeUrl = Qr.createQrCodeImg('https://www.baidu.com/') this.toQrcode(codeUrl) }, toQrcode(codeUrl) { var self = this; var imgsrcArray = ['/pages/component/photo/borrow_qrcode_bg.png', codeUrl]; //第一个路径为海报图的本地路径，codeUrl为生成的二维码路径 wx.createSelectorQuery() .select('#myCanvas') .fields({ node: true, size: true, }) .exec(res => { const canvas = res[0].node var ctx = canvas.getContext('2d'); canvas.width = 750; canvas.height = 1100; var imglen = imgsrcArray.length; var drawimg = (function f(n) { if (n ctx.save(); if (n == 0) { ctx.drawImage(img, 0, 0, 750, 1210); } else { ctx.drawImage(img, 220, 500, 300, 300); } f(n + 1); }; img.src = imgsrcArray[n]; } else { **//以下代码是在页面添加文字，修改文字样式，根据业务删减** // let userData = wx.getStorageSync('userData') || {}; // let text = userData.companyName || 'wwwwwwwwwwww'; // let text2 = ''; // const MAXLEN = 16; // if (text.length > MAXLEN) { // text2 = text.slice(MAXLEN); // text = text.substr(0, MAXLEN); // } // ctx.font = '32px bold 黑体'; // ctx.fillStyle = '#1B44D5'; // ctx.textAlign = 'center'; // ctx.textBaseline = 'middle'; // ctx.fillText(text, 375, 180); // text2 && ctx.fillText(text2, 375, 220); **//方法一：这种打印出的img是一个base64格式，直接下载是不行的** // let downloadUrl = canvas.toDataURL('image/jpeg'); // self.setData({ // img: downloadUrl // }) **//方法二：根据此方法获取合成后图片的临时路径** wx.canvasToTempFilePath({ canvasId: 'myCanvas', canvas: canvas, success: function (res) { let tempFilePath = res.tempFilePath; self.setData({ img: tempFilePath }) }, fail: function (res) { console.log(res); } }, this); } })(0); }) }, //下载图片 saveImg() { //调用微信内部方法，下载图片 wx.saveImageToPhotosAlbum({ filePath: this.data.img, success(res) { console.log(res) } }) }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { this.getQRcode() },

最终效果图：在这里插入图片描述

【本文地址】

公司简介

联系我们