小程序 canvas 画名片 vue.js

【小程序 canvas 画名片】用cancas画名片涉及到技术原型头像、文字超出换行、字体大小颜色、背景图
wxml 页面内容

wxjs内容
线上图片需要通过localImge 函数将线上路径转为本地路径方可。
步骤先开机相机权限canvasKapian---->然后开始绘制名片canvasClick---->最后下载名片downFn

Page({ data: { width: 320, height: 300, isDisable: false,//防止多次点击 }, onLoad: function (options) { this.canvasKapian(); }, //绘制名片 canvasKapian() { wx.getSetting({ success: res => { console.log(res); if (!res.authSetting['scope.writePhotosAlbum']) { wx.authorize({ scope: 'scope.writePhotosAlbum', success: res => { this.canvasClick(); }, fail: err => { wx.showModal({ title: "提示", content: '图片保存失败，您需要开启相册权限并且重新保存,是否开启?', success: res => { if (res.confirm) { wx.openSetting({ success: (res) => { if (res.authSetting['scope.writePhotosAlbum']) { this.canvasClick(); } else { wx.showToast({ title: '获取权限失败,无法使用保存图片或视频到您的相册', icon: 'none' }) } }, }) } } }) } }) } else { this.canvasClick(); } } }) }, canvasClick() { this.setData({ isDisable: true }) wx.showLoading({ title: '名片生成中...', }) // let image1 = this.localImge(this.data.background); // let image2 = this.localImge(this.data.wxCode); // let image3 = this.localImge(this.data.headerImg); // Promise.all([image1, image2, image3]).then(res => { //let background1 = res[0]; //let wxCode1 = res[1]; //let headerImg1 = res[2]; const ctx = wx.createCanvasContext("shareKapian"); ctx.setFillStyle("#22DDB8"); //背景色 // 背景图 ctx.drawImage('../../image/bc.jpg', 0, 0, this.data.width, this.data.height); ctx.fillRect(0, 0, this.data.width, this.data.height); let top = 30; let left = 30; // 头像 this.circleImg(ctx, '../../image/bc.jpg', left, top, 20) //活动 ctx.fillStyle="#9B712E"; ctx.setFontSize(18); ctx.font = 'bold'; ctx.fillText('bingxiaoxiao', left + 50, top); // 介绍 ctx.setFontSize(14); this.drawText(ctx, '2020年7月24日上午，中国外交部通知美国驻华使馆，中方决定撤销对美国驻成都总领事馆的设立和运行许可，并对该总领事馆停止一切业务和活动提出具体要求。', left + 50, top + 25 , 0, 135) ctx.draw(false, () => { wx.canvasToTempFilePath({ canvasId: "shareKapian", success: res => { wx.hideLoading(); this.setData({ catShopUrl: res.tempFilePath }); this.downFn(); }, fail: err => { console.log('生成失败', err); } }); }); // }).catch(err => { //console.log(err); //wx.hideLoading(); //wx.showToast({ //title: '图片加载失败,请返回重试', //icon: 'none' //}) // }) }, //保存图片 downFn() { let imgurl = ''; wx.showLoading({ title: '保存中...', }) imgurl = this.data.catShopUrl; wx.saveImageToPhotosAlbum({ filePath: imgurl, success: res => { wx.hideLoading() wx.showToast({ title: "保存成功，从相册中分享到朋友圈吧", icon: "none", duration: 4000 }); this.setData({ isDisable: false }) }, fail: function (err) { console.log(err) if (err.errMsg === "saveImageToPhotosAlbum:fail:auth denied" || err.errMsg === "saveImageToPhotosAlbum:fail auth deny") { wx.hideLoading(); wx.showModal({ title: "提示", content: '图片保存失败，您需要开启相册权限并且重新保存,是否开启?', success: res => { if (res.confirm) { wx.openSetting({ complete: (res) => { console.log(res); }, }) } } }) } } }); }, //生成本地图片 localImge: function (src) { console.log('src', src); return new Promise(function (resolve, reject) { wx.downloadFile({ url: src, success: function (res) { resolve(res.tempFilePath); }, fail: err => { reject(err) } }); }); }, // 超出换行 drawText: function (ctx, str, leftWidth, initHeight, titleHeight, canvasWidth) { var lineWidth = 0; var lastSubStrIndex = 0; //每次开始截取的字符串的索引 for (let i = 0; i < str.length; i++) { lineWidth += ctx.measureText(str[i]).width; if (lineWidth > canvasWidth) { ctx.fillText(str.substring(lastSubStrIndex, i), leftWidth, initHeight); //绘制截取部分 initHeight += 16; //16为字体的高度防止文字重叠 lineWidth = 0; lastSubStrIndex = i; titleHeight += 30; } if (i == str.length - 1) { //绘制剩余部分 ctx.fillText(str.substring(lastSubStrIndex, i + 1), leftWidth, initHeight); } } // 标题border-bottom 线距顶部距离 titleHeight = titleHeight + 10; return titleHeight }, // 圆形图片 circleImg: function (ctx, img, x, y, r) { ctx.save() ctx.beginPath() var d = 2 * r; var cx = x + r; var cy = y + r; ctx.arc(cx, cy, r, 0, 2 * Math.PI); ctx.clip(); ctx.drawImage(img, x, y, d, d); ctx.restore() }, })