微信小程序canvas画布图片保存到相册官方授权、自定义授权、保存

关键步骤介绍

wx.getSetting可以获取授权信息。

wx.authorize首次授权时会打开弹框让用户授权，若用户已选择同意或拒绝，后续不会再显示授权弹框。

如果授权信息显示未进行相册授权，则打开自定义弹框（show_auth: true）让用户选择是否自行配置授权。

如果授权信息显示已进行相册授权，则保存canvas为图片并保存到相册。

.js

javascript 复制代码

  download_canvas(e){
    wx.getSetting()
    .then(get_s_res=>{
      wx.authorize({
        scope: 'scope.writePhotosAlbum',
      })
      if(!get_s_res.authSetting['scope.writePhotosAlbum']){
        this.setData({
          show_auth: true
        })
      }else{
        wx.canvasToTempFilePath({
          x: 0,
          y: 0,
          width: this.data.canvas.width/this.data.pixelRatio,
          height: this.data.canvas.height/this.data.pixelRatio,
          destWidth: this.data.canvas.width,
          destHeight: this.data.canvas.height,
          canvas: this.data.canvas
        })
        .then(c_res=>{
          wx.saveImageToPhotosAlbum({
            filePath: c_res.tempFilePath,
          })
          .then(s_res=>{
            wx.showToast({
              title: '保存到相册成功',
              icon: 'success',
              duration: 2000
            })
          })
          .catch(s_res=>{
            console.log('error',s_res)
          })
        })
        .catch(c_res=>{
          console.log('error',c_res)
        })
      }
    })
    .catch(g_s_res=>{
      console.log('error',g_s_res)
    })

Component实现自定义授权弹框

在component定义授权确认弹框，点击确认，打开settings界面让用户设置授权信息。

.wxml

title和content显示内容由调用主体传入。

html 复制代码

<view class="modal-mask" wx:if="{{show}}">
  <view class="modal" wx:if="{{show}}">
    <view class="info">
      <label class="title">{{title}}</label>
      <text class="content">{{content}}</text>
    </view>   
    <view class="op-button">
      <button size="mini" bind:tap="cancel_and_close" style="box-shadow: 0 0 5rpx darkgray;">取消</button>
      <button size="mini" bind:tap="open_setting" type="primary">确认</button>
    </view>
  </view>
</view>

wxss:

modal-mask实现遮罩效果。

css 复制代码

.modal-mask{
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.5);
  z-index: 999;
}
.modal{
  position: fixed;
  top: 40%;
  left:15%;
  width: 70%;
  height: 20%;
  background-color: white;
  box-shadow: 0 0 5rpx darkgray;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  border-radius: 30rpx;
  z-index: 1000;
}
.info{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 10rpx
}
.title{
  font-weight: bold;
  white-space:pre-wrap;
  word-wrap:break-word;
  margin-bottom: 10rpx;
}
.content{
  white-space:pre-wrap;
  word-wrap:break-word;
}
.op-button{
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 10rpx;
}

.js

wx.openSetting需要通过点击按钮调用，不可直接调用。

javascript 复制代码

// components/show-modal/show-modal.js
Component({

  /**
   * 组件的属性列表
   */
  properties: {
    show:{
      type:Boolean,
      value:false
    },
    title:{
      type:String,
      value:""
    },
    content:{
      type:String,
      value:""
    }
  },

  /**
   * 组件的初始数据
   */
  data: {

  },

  /**
   * 组件的方法列表
   */
  methods: {
    cancel_and_close(){
      this.setData({
        show: false
      })
    },
    open_setting(){
      this.setData({
        show: false
      })
      wx.openSetting()
    }
  }
})

在主体调用component：

.wxml

html 复制代码

<show-modal show="{{show_auth}}" title="警告" content="未完成相册授权，无法保存到相册，请完成授权后继续。"></show-modal>

点击确认，打开settings让用户自行配置授权：

更多微信小程序内容，欢迎关注、评论、私信博主。