html标签部分
因为这个需要用户授权 所以需要使用button，画布使用的是canvas，这个可以参考，代码如下
复制代码
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证书；