html标签部分
因为这个需要用户授权 所以需要使用button，画布使用的是canvas，这个可以参考小程序官方文档，代码如下
<button class='btn' type="default" open-type="getUserInfo" @tap='exportImg'>
生成图片保存到本地
</button>
<canvas canvas-id="shareCanvas" style='width:375px;height:515px'/>
js实现部分
（1）注意这里如果是采用网络图片作为地图的话，注意小程序download的授权问题，图片域名需要时认可的，
（2）使用网络图片之前需要先用户授权scope.writePhotosAlbum，授权成功之后再调用下载（downloadFile）的api
（3）顺序是，用户授权->调用下载api->调用选择网络图片api->创建canvas->绘制画布->绘制文本，样式->将内容绘制到画布上->生成图片->保存到系统相册，代码如下
methods = {
exportImg: () => {
// 先获取用户授权
wx.getSetting({
success: (res) => {
if (!res.authSetting['scope.writePhotosAlbum']) {
wx.authorize({
scope: 'scope.writePhotosAlbum',
success: () => {
this.methods.draw()
}
})
} else {
this.methods.draw()
}
} }) },
draw: () => {
wx.downloadFile({ // 先下载
url: 'xxx.png', // 仅为示例，并非真实的资源
success: (res) => {
if (res.statusCode === 200 ||res.statusCode === 201) {
console.log(res, '-------')
wx.getImageInfo({ // 选择网络图片
src: res.tempFilePath,
success: (res) => {
console.log('底图画好了')
console.log(res.path, '底图路径')
// createCanvasContext 创建 canvas 绘图上下文（指定 canvasId）
const ctx = wx.createCanvasContext('shareCanvas')
// drawImage 绘制图像到画布。
ctx.drawImage(res.path, 0, 0, 375, 515)
ctx.setTextAlign('center') // 用于设置文字的对齐
ctx.setFillStyle('#1AA9E3') // 文字颜色
ctx.setFontSize(35) // 文字字号
ctx.fillText('简单', 375 / 2, 515 / 3) // 在画布上绘制被填充的文本。
ctx.setFillStyle('#C9D75E')
ctx.setFontSize(22)
ctx.fillText('我从你的全世界路过了一下', 375 / 2, 220)
console.log('文字画好了')
// ctx.stroke() // 画出当前路径的边框。默认颜色色为黑色。
ctx.draw() // 将之前在绘图上下文中的描述（路径、变形、样式）画到 canvas 中。
console.log('图生成了')
/// 把当前画布指定区域的内容导出生成指定大小的图片，并返回文件路径
const wxCanvasToTempFilePath = wx.canvasToTempFilePath
// 保存图片到系统相册 需要用户授权 scope.writePhotosAlbum
const wxSaveImageToPhotosAlbum = wx.saveImageToPhotosAlbum
wxCanvasToTempFilePath({
canvasId: 'shareCanvas',
success: function(res) {
wxSaveImageToPhotosAlbum({
filePath: res.tempFilePath,
success(res) {
console.log('保存好了')
wx.showToast({
title: '已保存到相册'
}) } }) }
}) } }) } }})}};
效果图 （马赛克一下原图，嘿嘿）
注意
（1）如果使用网络图片需要注意下载图片的路由
（2）如果域名正确了，在模拟器上可以正常下载保存，但是在真机上不可以正常下载保存，可能是下载的服务器上，需要安装SSL证书；
