微信小程序生成图片保存到相册以及分享给好友
这个功能我研究了一天半，最开始的头疼到后面成功实现，其中艰辛不言而喻，值得记录一下，经常写博客后，会发现自己在遇到问题和技术的时候就会习惯性的写博客，这是一个好习惯
言归正传
html添加canvas标签
js:
在页面初始化时进行画布展示
onShow() {
const ctx = wx.createCanvasContext('myCanvas')
ctx.drawImage(this.shareImage, 0, 0, 325, 450) //图片背景图
ctx.save();
//绘制头像
ctx.arc(105, 151, 20, 0, 2 * Math.PI);
ctx.drawImage(this.headImg, 130, 40, 70, 70);//根据微信getUserInfo接口获取到用户头像
// 圆环
ctx.beginPath();//开始绘制
ctx.arc(166, 76, 35, 0, 3 * Math.PI);
ctx.strokeStyle = "#fff";//将线条颜色设置为白色
ctx.lineWidth = 3.0;
ctx.stroke();// 方法默认颜色是黑色（如果没有上面一行，则会是黑色）。
//绘制用户昵称
ctx.arc(100, 150, 20, 0, 2 * Math.PI);//显示在最上层
ctx.setTextAlign('center')
ctx.setFillStyle('#fff')
ctx.setFontSize(20)
ctx.fillText(this.name, 170, 150)//用户昵称
/*绘制二维码*/
ctx.arc(130, 140, 20, 0, 2 * Math.PI);
ctx.drawImage(this.erweima, 100, 180, 140, 140);
ctx.save()
//绘制扫描二维码即可开通
ctx.arc(100, 130, 20, 0, 2 * Math.PI);//显示在最上层
ctx.setTextAlign('center')
ctx.setFillStyle('#fff')
ctx.setFontSize(20)
ctx.fillText(this.texta, 170, 390)//扫描二维码即可开通
//绘制成为见习萌主哦
ctx.arc(100, 140, 20, 0, 2 * Math.PI);//显示在最上层
ctx.setTextAlign('center')
ctx.setFillStyle('#fff')
ctx.setFontSize(20)
ctx.fillText(this.texta1, 175, 425)//成为见习萌主哦
// 保留上一次的绘制结果
ctx.draw(true)
},点击微信进行好友分享：
shareFriend(){
wx.canvasToTempFilePath({ //将canvas生成图片
canvasId: 'myCanvas',
x: 0,
y: 0,
width: 370,
height: 472,
// destWidth: 370, //截取canvas的宽度
// destHeight: 500, //截取canvas的高度
success: function (res) {
let urls = res.tempFilePath //图片临时路径
wx.showShareImageMenu({ //分享给朋友
path: urls,
success: (res) => {
console.log("分享成功：", res);
},
fail: (err) => {
console.log("分享失败：", err);
wx.showToast({
title: "分享失败",
duration: 2000
})
},
})
}
})
}点击保存，保存到本地相册
//保存至相册imgUrl
clickSaveImg() {
var _this = this
wx.canvasToTempFilePath({ //将canvas生成图片
canvasId: 'myCanvas',
x: 0,
y: 0,
width: 335,
height: 472,
// destWidth: 400, //截取canvas的宽度
// destHeight: 500, //截取canvas的高度
success: function (res) {
_this._data.imgUrl = res.tempFilePath
wx.saveImageToPhotosAlbum({ //保存图片到相册
filePath: res.tempFilePath, //生成图片临时路径
success: function () {
wx.showToast({
title: "图片已保存至相册！",
duration: 2000
})
}
})
},
fail: error => {
wx.showToast({
title: "保存图片失败",
duration: 2000
})
if (error.errMsg === "saveImageToPhotosAlbum:fail:auth denied" || error.errMsg === "saveImageToPhotosAlbum:fail auth deny" || error.errMsg === "saveImageToPhotosAlbum:fail authorize no response") {
// 这边微信做过调整，必须要在按钮中触发，因此需要在弹框回调中进行调用
wx.showModal({
title: '提示',
content: '需要您授权保存相册',
showCancel: false,
success: modalSuccess => {
wx.openSetting({
success(settingdata) {
console.log("settingdata", settingdata)
if (settingdata.authSetting['scope.writePhotosAlbum']) {
wx.showModal({
title: '提示',
content: '获取权限成功',
showCancel: false,
})
} else {
wx.showModal({
title: '提示',
content: '获取权限失败，将无法保存到相册哦~',
showCancel: false,
})
}
},
})
}
})
}
}
})
},完整代码如下：
微信
保存