欢迎您光临本站
faddei头像
faddei

2021-07-10

评论者
微信小程序
0 1

微信小程序生成名片并保存到系统相册


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
})
}


版权声明:本站所提供的文章、图片等内容均为用户发布或互联网整理而来,仅供学习参考,如有侵犯您的版权,请联系我们客服人员删除。

296

精彩推荐

暂无评论

文明用语