微信小程序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让用户自行配置授权:

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

相关推荐
qq_17448285751 小时前
springboot基于微信小程序的旧衣回收系统的设计与实现
spring boot·后端·微信小程序
wqq_9922502771 小时前
springboot基于微信小程序的食堂预约点餐系统
数据库·微信小程序·小程序
licy__7 小时前
微信小程序登录注册页面设计(小程序项目)
微信小程序·小程序
wqq_99225027716 小时前
springboot基于微信小程序的农产品交易平台
spring boot·后端·微信小程序
guanpinkeji1 天前
二手手机回收小程序,一键便捷高效回收
微信小程序·小程序·软件开发·手机回收小程序·二手手机回收
尘浮生1 天前
Java项目实战II基于微信小程序的私家车位共享系统(开发文档+数据库+源码)
java·开发语言·数据库·学习·微信小程序·小程序·maven
十幺卜入1 天前
基于xr-frame实现微信小程序的手部、手势识别3D模型叠加和石头剪刀布游戏功能
游戏·微信小程序·xr·手势识别·人手跟踪
坠入暮云间x2 天前
Nodejs开发仿马蜂窝旅游小程序API接口,服务器端开发,商家后台 Vue3+微信小程序+koa+mongodb+node.js
微信小程序·小程序·旅游
2401_842304862 天前
想做一个类似于东郊到家这样的预约上门小程序,app也行,这个现在好不好运营?
科技·微信小程序·小程序·生活
草字2 天前
微信小程序 https://thirdwx.qlogo.cn 不在以下 downloadFile 合法域名列表中
微信小程序·小程序