小程序保存图片到相册
首先我保存图片的目的是有一个分享功能，分享可以分享一张图片，图片保存到相册里
（打马赛克是希望不要有什么麻烦）
做出来的效果大概就是这样的，有一张背景图，左上角的头像和昵称是小程序的用户信息，还需要画上连续打卡几天（那一行蓝色的字）还有就是小程序码，去做你害怕的事害怕便会自然消失，这句话也是后期写上去的
首先贴上HTML
canvas 标签是需要画图的容器，但是canvas有个问题就是在显示图片的时候会有一点模糊，所以把canvas隐藏显示图片会更加清晰也更容易做一些css样式
在onload里获取用户信息，头像和昵称，然后获取接口里取出来的分享信息，打卡天数什么的，最后画图。
onLoad: function(options) {
this.getUserInfo().then(() => {
this.getShareInfoObj().then(res => {
this.handleSaveImg() // 画图的方法
})
})
},
取分享信息和处理图片，图片在取到的时候是不能直接画在图上的，必须要保存到本地然后再去画图
getShareInfoObj() {
return new Promise((resolve, reject) => {
let that = this;
getShareInfo().then(res => {
this.setData({
continue_share_count: res.continue_share_count,
})
wx.downloadFile({
url: res.qr_code, // 先把小程序码保存到本地
success: function(qr_res) {
// 只要服务器有响应数据，就会把响应内容写入文件并进入 success 回调，业务需要自行判断是否下载到了想要的内容
if (qr_res.statusCode === 200) {
that.setData({
qr_code: qr_res.tempFilePath
})
wx.downloadFile({
url: that.data.avatarUrl, // 这个是头像保存到本地
success: function(avatar_res) {
// 只要服务器有响应数据，就会把响应内容写入文件并进入 success 回调，业务需要自行判断是否下载到了想要的内容
if (avatar_res.statusCode === 200) {
that.setData({
avatarUrl: avatar_res.tempFilePath
})
}
resolve()
},
fail: function(avatar_err) {
reject()
}
})
}
},
fail: function(qr_err) {
reject()
}
})
})
})
},
handleSaveImg() {
return new Promise((resolve, reject) => {
let that = this;
let unit = that.data.screenWidth / 375 // 设备宽度/375
let path1 = "../../images/share-bg.jpg" // 这张图片是背景图
let avatarUrl = that.data.avatarUrl // 处理过的头像
let qr_code = that.data.qr_code // 处理过的小程序码
let nickName = that.data.nickName 昵称
let context = wx.createCanvasContext('shareCanvas') 获取canvas上下文实例
let r = unit * 30 头像的半径
let qr_r = unit * 70 小程序码的半径
//设置画板显示，才能开始绘图 初始化，让canvas组件显示出来
that.setData({
is_show_gongxi_shell: false,
is_show_canvas: true,
})
context.drawImage(path1, 0, 0, unit * 225, unit * 398) 画背景图
context.setFontSize(unit * 9) 字体大小
context.setFillStyle("#333") 颜色
context.fillText(nickName, unit * 53, unit * 34) 写昵称和位置
context.save(); 先保存一下
context.beginPath(); //开始绘制
context.arc(r / 2 + unit * 20, r / 2 + unit * 23, r / 2, 0, 2 * Math.PI); 先画圆
context.clip();
context.drawImage(avatarUrl, unit * 20, unit * 23, r, r) 然后头像会在这个圆里面
context.restore();
context.drawImage(qr_code, unit * 132, unit * 140, qr_r, qr_r) 小程序码
//把画板内容绘制成图片，并回调 画板图片路径
context.draw(false, function() {
wx.canvasToTempFilePath({
x: 0,
y: 0,
width: unit * 225,
height: unit * 398,
destWidth: unit * 1800, 设置大一点清晰度会高
destHeight: unit * 3200,
canvasId: 'shareCanvas',
success: function(res) {
that.setData({
shareImgPath: res.tempFilePath,
is_show: true
})
if (!res.tempFilePath) {
wx.showModal({
title: '提示',
content: '图片绘制中，请稍后重试',
showCancel: false
})
}
resolve()
},
fail: function(err) {
reject()
}
})
})
})
},
// 长按canvas图片的时候保存图片
saveImageToPhotosAlbum() {
//画板路径保存成功后，调用方法吧图片保存到用户相册
wx.saveImageToPhotosAlbum({
filePath: this.data.shareImgPath,
//保存成功失败之后，都要隐藏画板，否则影响界面显示。
success: (res) => {
completeShare().then(res => {
wx.showToast({
title: '保存成功',
icon: 'success',
duration: 2000
})
})
},
fail: (err) => {
wx.showToast({
title: '保存失败',
icon: 'none',
duration: 2000
})
}
})
},
以上就是画图的全过程，其中可以添加自己想做的操作，例如可以在保存图片成功后跳转页面什么的
然后就可以在手机上看到保存的图片啦