要实现的功能：
微信小程序之canvas画图生成图片下载
点击朋友圈按钮弹出分享图片：
微信小程序之canvas画图生成图片下载
点击保存分享图片保存到手机
实现代码：
1.分享按钮点击事件
/**
* 分享
*/
weixinShare:function(){
var that = this;
console.log(111);
share.canvasImg((res)=>{
console.log(222);
that.setData({
imagePath: res.tempFilePath,
bgShare:false,
left:43
});
});
}
2.生成图片
/**
* 绘制分享图片
*/
canvasImg(callback){
//小程序二维码
let promise1 = new Promise(function (resolve, reject) {
/* 获得要在画布上绘制的图片 */
wx.getImageInfo({
src: '/images/qrcode.png',
success: function (res) {
console.log(res)
resolve(res);
}
})
});
//背景图像
let promise2 = new Promise(function (resolve, reject) {
wx.getImageInfo({
src: '/images/bg1.png',
success: function (res) {
console.log(res)
resolve(res);
}
})
});
//用户头像
let promise3 = new Promise(function (resolve, reject) {
wx.getImageInfo({
src: '/images/logo.png',
success: function (res) {
console.log(res)
resolve(res);
}
})
});
Promise.all(
[promise1, promise2, promise3]
).then(res => {
const ctx = wx.createCanvasContext('shareWeixin')
ctx.setFillStyle('#FFFFFF');
ctx.fillRect(0,0,500,600);
ctx.drawImage('../../../' + res[0].path, 220, 321, 100, 100)
ctx.drawImage('../../../' + res[1].path, 0, 0, 331, 252)
ctx.drawImage('../../../' + res[2].path, 10, 275, 30, 30)
// 绘制文字 位置自己计算 参数自己看文档
// ctx.setTextAlign('left') // 位置
ctx.setFillStyle('#000000') // 颜色
ctx.setFontSize(15);
ctx.fillText('海贼王',54,300);
ctx.setFontSize(22) // 字号
ctx.fillText('生活小记者', 10, 341)// 内容 不会自己换行 需手动换行
ctx.fillText('快来关注校园时讯', 10, 377) // 内容
ctx.setFillStyle('#ccc')
ctx.setFontSize(15)
ctx.fillText('长按识别扫码查看详情',10,410);
/* 绘制 */
ctx.stroke()
ctx.draw(true,setTimeout(function(){
wx.canvasToTempFilePath({
x: 0,
y: 0,
width: 600,
height: 800,
destWidth: 600,
destHeight: 800,
canvasId: 'shareWeixin',
success: function (res) {
// wx.saveImageToPhotosAlbum({
// filePath: res.tempFilePath,
// })
callback && callback(res)
},
fail: function (res) {
console.log(res)
}
})
},500))
})
}
3.保存到手机
// 保存到手机图片
saveToPhone:function(){
var that = this;
// console.log(that.data.imagePath);
// 保存到本地
wx.downloadFile({
url: that.data.imagePath,
success: function (res) {
tempFilePaths = res.tempFilePath
wx.saveFile({
tempFilePath: tempFilePaths,
success(res) {
savedFilePath = res.savedFilePath
// console.log('保存路径');
// console.log(savedFilePath)
// 保存到手机
wx.saveImageToPhotosAlbum({
filePath: savedFilePath,
success(res) {
console.log(res)
wx.showToast({
title: '成功',
icon: 'success',
duration: 2000
})
},
fail(res) {
console.log('保存到手机失败');
console.log(res)
}
})
}
})
}, fail: function (res) {
console.log('保存到本地失败');
console.log(res)
}
})
}
5.前端代码
<!-- 分享图片 -->
<view class='bg-shade' hidden="{{bgShare}}"></view>
<canvas canvas-id="shareWeixin" class='share-bg'></canvas>
<view hidden='{{bgShare}}' class='preview'>
<image src='{{imagePath}}' class='shareImg'></image>
<button type='primary' size='default' bindtap='saveToPhone'>保存分享图</button>
</view>
总结：
画图的时候要延迟一定事件否则会生成失败，生成一张同样大小的空白图片
下载图片的时候不要直接用临时的图片链接，可以先下载本地获得链接再保存
使用canvas绘图的时候不能隐藏canvas,否则会报错，所以可以设置左右上下距离让他定位到屏幕外
©著作权归作者所有：来自51CTO博客作者浩伟的原创作品，谢绝转载，否则将追究法律责任