小程序保存图片到相册,申请相机权限

wxml代码:

<view class="downImg" bindtap="downImgEven">
    <image src="/img/downimg.png"></image>
    <text>下载</text>
  </view>

js代码:

 downImgEven: function () { 
    wx.getSetting({  //先授权相册
      success: res => {
        if (!res.authSetting['scope.writePhotosAlbum']) { //未授权的话发起授权
          wx.authorize({
            scope: 'scope.writePhotosAlbum',
            success: () => { //用户允许授权,保存到相册
              this.saveImg();
            },
            fail: () => { //用户拒绝授权,然后就引导授权(这里的话如果用户拒绝,)
              wx.showModal({    // 直接调wx.openSetting在真机调试正常,但在体验版无法调起,因为官方文档做了限制,请看下面什么
                content: '请允许打开设置页授权',
                success: function (res2) {
                  if (res2.confirm) {
                    wx.openSetting({
                      success: () => {
                        wx.authorize({
                          scope: 'scope.writePhotosAlbum',
                          succes: () => { //授权成功,保存图片
                            this.saveImg();
                          }
                        })
                      }
                    })
                  } 
                }
              })
            }
          })
        } else { //已经授权
          this.saveImg();
        }
      }
    })
  },
saveImg() { //保存到相册
    let {
      downurl    //需要保存到相册的图片地址
    } = this.data;

    //文件名设置为时间戳
    // let fileName = new Date().valueOf();

    wx.downloadFile({ 
      url: downurl,
      // filePath: wx.env.USER_DATA_PATH + '/' + fileName + '.png',
      success: (res) => {
        wx.saveImageToPhotosAlbum({
          filePath: res.tempFilePath,
          success: (res) => {
            wx.showToast({
              title: '保存成功!'
            })
          },
          faile: (err) => {
            console.log('失败!')
          }
        })
      }
    })
  },

打开小程序设置页(wx.openSetting)接口调整官方

开发者可以通过 wx.openSetting 接口来打开小程序设置界面并返回用户的设置结果。在原来的 wx.openSetting 接口中,我们允许开发者直接调用此接口,但目前我们发现有不少开发者滥用此接口,使用户在无任何操作时,不断地强行跳转至设置页,导致用户无法正常使用甚至无法退出小程序。

为保证用户获得更顺畅的小程序使用体验,避免此类滥用情况,我们对该接口进行了调整。

调整后“打开小程序设置页”将支持以下两种实现方式:

方法1:使用 button 组件来使用此功能,示例代码如下:

<button open-type="openSetting" bindopensetting="callback">打开设置页</button>

方法2:由点击行为触发wx.openSetting接口的调用,示例代码如下:

<button bindtap="openSetting">打开设置页</button>  openSetting() {  wx.openSetting()}

方法2已在最新版开发者工具中支持(基础库切到2.2.4及以上),开发者可以尽早适配。

此次调整会对直接调用wx.openSetting接口造成影响

原无需用户点击即可直接调用wx.openSetting接口的实现方式将不再支持,即将废弃的错误使用方式示例如下:

onShow() {  wx.openSetting()}

10月10日起新提交发布的版本将会受到此调整的影响。

需要各位开发者注意,10月10日起新提交发布的小程序版本将不再支持无需用户点击即可直接调用的“打开小程序设置页”接口,请开发者尽早适配。

调整策略在基础库 2.3.0 及以上版本生效,该基础库版本对应微信客户端6.7.2版本。另外,考虑到兼容性等问题,在基础库版本 2.3.0 以下的环境中不受此策略影响。

微信小程序的Canvas组件可以绘制图片、文字和形状,并支持将绘制结果保存为图片。因此,可以使用Canvas组件将需要保存的DOM元素绘制到画布上,然后将画布保存为图片。下面是实现的具体步骤: 1. 在wxml文件中,添加一个Canvas组件,设置宽高和id: ``` <canvas canvas-id="myCanvas" style="width: 100%; height: 100%;"></canvas> ``` 2. 在js文件中,获取需要保存的DOM元素,将其绘制到Canvas上: ``` // 获取需要保存的DOM元素 const query = wx.createSelectorQuery() query.select('#my-dom').boundingClientRect() query.exec(res => { // 将DOM元素绘制到Canvas上 const canvasCtx = wx.createCanvasContext('myCanvas') const width = res[0].width const height = res[0].height canvasCtx.drawImage('#my-dom', 0, 0, width, height) canvasCtx.draw(false, () => { // 保存Canvas为图片 wx.canvasToTempFilePath({ canvasId: 'myCanvas', success(res) { console.log(res.tempFilePath) } }) }) }) ``` 其中,`wx.createSelectorQuery()`用于获取DOM元素的尺寸,`wx.createCanvasContext()`用于创建Canvas上下文,`canvasCtx.drawImage()`用于将DOM元素绘制到Canvas上,`canvasCtx.draw()`用于将Canvas上的绘制结果显示出来,`wx.canvasToTempFilePath()`用于将Canvas保存为图片。 3. 在wxml文件中,将需要保存的DOM元素添加id: ``` <view id="my-dom">这是要保存的DOM元素</view> ``` 通过以上步骤,即可将需要保存的DOM元素绘制到Canvas上,并将Canvas保存为图片。需要注意的是,Canvas的绘制和保存都是异步操作,因此需要使用回调函数来处理结果。同时,由于涉及到Canvas的操作,因此需要在小程序的app.json文件中声明Canvas组件的权限: ``` "permission": { "scope.userLocation": { "desc": "你的位置信息将用于小程序定位" }, "scope.record": { "desc": "你的录音功能将用于小程序录音" }, "scope.writePhotosAlbum": { "desc": "你的相册将用于小程序保存图片" }, "scope.camera": { "desc": "你的相机将用于小程序拍照" }, "scope.userInfo": { "desc": "你的用户信息将用于小程序登录" }, "scope.invoiceTitle": { "desc": "你的发票抬头将用于小程序申请发票" }, "scope.invoice": { "desc": "你的发票信息将用于小程序申请发票" }, "scope.werun": { "desc": "你的微信运动数据将用于小程序计步" }, "scope.writePhotosAlbum": { "desc": "你的相册将用于小程序保存图片" }, "scope.camera": { "desc": "你的相机将用于小程序拍照" }, "scope.record": { "desc": "你的录音功能将用于小程序录音" }, "scope.userLocationBackground": { "desc": "你的位置信息将在后台持续更新" }, "scope.album": { "desc": "你的相册将用于小程序保存图片" }, "scope.address": { "desc": "你的收货地址将用于小程序购物" }, "scope.invoice": { "desc": "你的发票信息将用于小程序申请发票" }, "scope.camera": { "desc": "你的相机将用于小程序拍照" }, "scope.userInfo": { "desc": "你的用户信息将用于小程序登录" }, "scope.userLocation": { "desc": "你的位置信息将用于小程序定位" }, "scope.record": { "desc": "你的录音功能将用于小程序录音" }, "scope.writePhotosAlbum": { "desc": "你的相册将用于小程序保存图片" }, "scope.camera": { "desc": "你的相机将用于小程序拍照" }, "scope.userLocationBackground": { "desc": "你的位置信息将在后台持续更新" } } ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值