微信小程序生成名片并保存到系统相册
html+css
.shareCanvas{ width:360px; height:385px; position: fixed; left: 50%; top: 50%; margin-left: -180px; margin-top: -185px; } <canvas canvas-id="shareCanvas" class='shareCanvas' wx:if="{{showshareCanvas}}"></canvas>
JS
onHuatu: function(e) { wx.showLoading({ title: '明信片生成中', }) var that = this that.setData({ showshareCanvas: true }) const ctx = wx.createCanvasContext('shareCanvas') //背景图 ctx.drawImage('../../images/h_bg.jpg', 0, 0, 360, 385) //画头像 ctx.drawImage(that.data.drawImage_headimg, 20, 20, 70, 70) //画二维码 ctx.drawImage('../../images/ewm.jpg', 110, 20, 70, 70) //写字-我是第N人参与 ctx.setTextAlign('left') // 文字居中 ctx.setFillStyle('#000') // 文字颜色:黑色 ctx.setFontSize(16) // 文字字号 ctx.fillText('我是第' + that.data.usercount + '名参与者', 210, 80) ctx.stroke() //写字-标题 ctx.setTextAlign('left') // 文字居中 ctx.setFillStyle('#000') // 文字颜色:黑色 ctx.setFontSize(16) // 文字字号 ctx.fillText(that.data.title, 20, 130) ctx.stroke() //写字-正文 var n = 14 var str = that.data.detail var h = 155 for (var i = 0, l = str.length; i < l / n; i++) { var a = str.slice(n * i, n * (i + 1)) ctx.setTextAlign('left') // 文字居中 ctx.setFillStyle('#333') // 文字颜色:黑色 ctx.setFontSize(12) // 文字字号 ctx.fillText(a, 20, h) h = h + 22 ctx.stroke() } //写字-发布者 ctx.setTextAlign('right') // 文字居中 ctx.setFillStyle('#888') // 文字颜色:黑色 ctx.setFontSize(12) // 文字字号 ctx.fillText(that.data.foot, 248, 365) ctx.stroke() //画宣传图 ctx.drawImage(that.data.drawImage_fengimg, 200, 126, 150, 215) //远程图片,需先下载到本地 ctx.draw() //保存图片 setTimeout(function() { wx.canvasToTempFilePath({ canvasId: 'shareCanvas', success(res) { wx.saveImageToPhotosAlbum({ filePath: res.tempFilePath, success(res) { wx.hideLoading() wx.showToast({ title: '已保存到相册', duration: 2000 }) that.setData({ showshareCanvas: false }) } }) } }) }, 2500) }
远程图片下载到本地
wx.getImageInfo({ src: res.data.data.list[0].coverimg, //远程图片地址 success(res) { that.setData({ drawImage_fengimg: res.path }) }
版权声明:本站所提供的文章、图片等内容均为用户发布或互联网整理而来,仅供学习参考,如有侵犯您的版权,请联系我们客服人员删除。