微信小程序保存图片到本地

<!-- 模板提示 -->
<view class="danger-swapper" wx:if="{{dangHint}}">
  <view class="mbBox">
     <view  bindtap="submitMb">快来点我呀</view>
      <view class="mb7" bindtap="saveCanvas">确 定</view>
  </view>
</view>
<!-- 输入签名 -->
<view class="danger-swapper" wx:if="{{dangeMb}}">
  <view style="width:100%">
    <view class="container">
      <canvas canvas-id="firstCanvas" id='firstCanvas' disable-scroll="true" bindtouchstart="bindtouchstart" bindtouchmove="bindtouchmove"></canvas>
      <view class="canBtnBox">
        <view bindtap='clear' class="clear canBtn">
          清 空
        </view>
        <view bindtap='export' class="submit canBtn">
          提 交
        </view>
      </view>
      </view>
  </view>
</view>

答完题跳转到新页面的时候在新页面需要签名

  // 跳转
  onFinish: function () {
        const check = () => {
          if (this.data.user.id== 97) {
             return false;
          }
          if (this.data.user.id== 101) {
            return false;
          }
          return true;
        };
        const id= check();
        if(this.data.user.id== 7 && id){
          // 保存dangHint在本地 控制下次进入页面是否弹出
          wx.setStorage({key:"dangHint",data:true})
        }
        wx.reLaunch({ url: '下一个页面地址' });
  },

进入新页面时需要弹出提示信息 通过dangHint控制

data:{
	context: null,
    imgUrl:'', // 手写签名img
    bkgimgUrl:'./../../img/abc.jpg', 
	dangeMb:false, //控制画板
    dangHint:wx.getStorageSync('dangHint') //进页面是否显示提示内容
}
onShow:function(){
	  this.setData({ dangHint: wx.getStorageSync('dangHint') });
	  if(this.data.dangHint){
	    wx.showModal({
	      title: '提 示',
	      content: '点击屏幕任意位置弹出签名框',
	      showCancel: false,
	    });
	  }
}
 // 点击弹出画板 输入签名
 submitMb(){
    this.setData({
      dangeMb:true
    })
 },
  // 导出图片 自己写出来的签名图
  export: function () {
    let that = this;
    that.data.context.draw(true, wx.canvasToTempFilePath({
      fileType: 'jpg',
      canvasId: 'firstCanvas',
      success:(res) => {
        let { tempFilePath } = res;
        this.setData({ 
                imgUrl:tempFilePath,
                dangeMb:false
        });
      },
      fail() {
        wx.showToast({
          title: '导出失败',
          icon: 'none',
          duration: 2000
        })
      }
    }))
  },
  // 开始触摸 记录开始点
bindtouchstart: function(e) {
  console.log("bindtouchstart", e);
  this.data.context.moveTo(e.changedTouches[0].x, e.changedTouches[0].y)
  },
 // 记录移动点，刷新绘制
 bindtouchmove: function(e) {
    console.log("bindtouchstart", e);
    this.data.context.lineTo(e.changedTouches[0].x, e.changedTouches[0].y);
    this.data.context.stroke();
    this.data.context.draw(true);
    this.data.context.moveTo(e.changedTouches[0].x, e.changedTouches[0].y);
  },
  // 清空画布
 clear: function() {
  this.data.context.draw();
  },
  // 保存
  saveCanvas(e){
  // 调用后台保存接口
    request
      .submit_fpm_user_commitment(this, { url:this.data.imgUrl })
      .then((res) => {
        if(res.data.success){
          //获取相册授权
          wx.getSetting({
            success:(res) => {
              console.log(res.authSetting)
              if (!res.authSetting['scope.writePhotosAlbum']) {
                wx.authorize({
                  scope: 'scope.writePhotosAlbum',
                  success:() => {
                    //用户同意授权
                    this.saveImgToLocal();
                    console.log(2)
                  },
                  fail() {//用户拒绝授权
                    wx.showModal({
                      title: '提示',
                      content: '保存失败，请手动打开相册授权',
                      showCancel: false
                    })
                  }
                })
              } else {//用户已经授权过了
                this.saveImgToLocal();
                console.log(1)
              }
            }
          })
        }else{
          wx.showModal({
            title: '提示',
            content: '保存失败',
            showCancel: false
          })
        }
      })
      .catch(() => {
      })
      .finally(() => {
        this.setData({
          dangHint:false,
        })
        wx.setStorage({key:"dangHint",data:false})
        wx.removeStorageSync('dangHint')
      });
  },
  saveImgToLocal: function (e) {
    const user = wx.getStorageSync('User');
    console.log(user)
    let imgUrl = this.data.imgUrl;
    let mobile = user.mobile ? user.mobile : '';
    // 我比较懒 因为导出的图片布局很恶心 所以我索性贴上去一张图片 只用把动态的数据画上去就可以了
    // 哈哈 整个背景布局是img 签名是img 手机号不是
    const ctx = wx.createCanvasContext('share');
    // 第一个参数 距离left距离
    // 第二个参数 距离top距离
    // 第三第四 宽高
    ctx.drawImage('./../../img/abc.jpg',0,0,300 ,550); // 背景布局
    ctx.drawImage(imgUrl,210,370,50,40); // 签名
    // ctx.setFontSize(18)
    ctx.fillText(mobile,210,423) // 手机号
    ctx.draw()
    // ctx.draw(true)
    
    //将生成好的图片保存到本地，需要延迟一会，绘制期间耗时
    setTimeout(function() {
      wx.canvasToTempFilePath({
          canvasId: 'share',
          success:(res) => {
              var tempFilePath = res.tempFilePath;
              console.log('tempFilePath地址是' + tempFilePath)
                   wx.saveImageToPhotosAlbum({
                    filePath: tempFilePath,
                    success: (data) => {
                      wx.showToast({
                        title: '保存成功',
                        icon: 'success',
                        duration: 2000
                      })
                    },
                    fail: function(res) {
                      console.log(res);
                   }
                  })
              // 不要加下面这些！！！！微信开发者工具可以正常使用 真机调试就报错
              // wx.downloadFile({
              //   url: tempFilePath,
              //   success:(res) => {
              //     console.log(res);
              //     //图片保存到本地
              //     wx.saveImageToPhotosAlbum({
              //       filePath: tempFilePath,
              //       success: (data) => {
              //         wx.showToast({
              //           title: '保存成功',
              //           icon: 'success',
              //           duration: 2000
              //         })
              //       },
              //     })
              //   },
              //   fail: function(res) {
              //       console.log('downloadFile报错')
              //       console.log(res);
              //   }
              // })
          },
          fail: function(res) {
              console.log(res);
          }
      });
  }, 500);
  },

遇到的问题
canvasToTempFilePath绘制图片到画布上，真机不显示，开发工具显示，相关域名都配置上了，打印看到的是地址返回不一样；
真机返回的是：wxfile://tmp_666.png
开发工具返回的是："http://tmp/666
第一次用 咱也找不到原因 只能自己摸索 发现把 wx.downloadFile 去掉就ok了 应该因为我是本地图片不需要走wx.downloadFile的原因吧 但是wx你难道不能给我一个提示吗？？？
亲测已成功 如果我说的不对 欢迎讨论