IT基地
用户登陆
我要注册
用户名或密码错误
登 陆
注 册
IT基地 >Mr.Li的博客 >我要发文
微信小程序生成名片并保存到系统相册
作者:Mr.Li   发布时间:2019-07-18 13:43:12   点击数:217

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

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


本站部分数据来自软件的自动采集,仅用于学习交流,决不用于商用,如有侵犯您的合法权益,请联系我们删除。
发表技术文档,,记录个人生活,聚集意见领袖,众多IT精英,以我们的技术让开发更便捷。
IT基地版权所有,伪版必究 京ICP备17064610号-1
微信QQ空间QQ好友新浪微博FacebookTwitter