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 = {export Img: () => {// 先获取用户授权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.writePhotosAlbumconst wxSaveImageToPhotosAlbum = wx.saveImageToPhotosAlbumwxCanvasToTempFilePath({canvasId: 'shareCanvas' ,success: function (res) {wxSaveImageToPhotosAlbum({filePath: res.tempFilePath,success(res) {console.log('保存好了' )wx.showToast({title: '已保存到相册' }) } }) }}) } }) } }})}};
复制代码 效果图 （马赛克一下原图，嘿嘿）
注意 （1）如果使用网络图片需要注意下载图片的路由 （2）如果域名正确了，在模拟器上可以正常下载保存，但是在真机上不可以正常下载保存，可能是下载的服务器上，需要安装SSL证书；
