草庐IT

微信小程序怎么实现拍照功能,以及授权,拍完照保存到本地。

有两把刷子 2023-04-12 原文

写微信小程序就是要不停的翻阅官方文档查阅所需要的需求。

API的使用说明

wx.getSetting 获取用户的当前设置。返回值中只会出现小程序已经向用户请求过的权限 scope.camera相机

wx.authorize 提前向用户发起授权请求。调用后会立刻弹窗询问用户是否同意授权小程序使用某项功能或获取用户的某些数据,但不会实际调用对应接口。
如果用户之前已经同意授权,则不会出现弹窗,直接返回成功
scope: 'scope.camera' 需要获取权限的 scope: scope.camera 摄像头

wx.showModal
显示模态对话框

wx.openSetting
调起客户端小程序设置界面,返回用户设置的操作结果。设置界面只会出现小程序已经向用户请求过的权限 res.authSetting['scope.camera']表示授权了相机

wx.createCameraContext
创建 camera 上下文 CameraContext 对象。
ctx.takePhoto拍摄照片 ctx.takePhoto({quality: 'high', //quality 成像质量 high 高质量})

wx.previewImage
在新页面中全屏预览图片。预览的过程中用户可以进行保存图片、发送给朋友等操作

wx.downloadFile
下载文件资源到本地。客户端直接发起一个 HTTPS GET 请求,返回文件的本地临时路径 (本地路径),单次下载允许的最大文件为 200MB。使用前请注意阅读相关说明。
注意:请在服务端响应的 header 中指定合理的 Content-Type 字段,以保证客户端正确处理文件类型。

wx.saveImageToPhotosAlbum
保存图片到系统相册。 filePath string 是 图片文件路径,可以是临时文件路径或永久文件路径 (本地路径) ,不支持网络路径

wx.showToast
显示消息提示框

index.js

// index.js

// const { Result } = require("element-ui")

// 获取应用实例
const app = getApp()

Page({
  data: {
    isAuth: false,
    src: '',
    modalType: false, //弹框默认不显示
    imgUrl: "", //模拟图片
  },

 

  async onLoad() {
    const _this = this
    let res = await app.wx('getSetting')
    if (res.authSetting['scope.camera']) {
      // 用户已经授权
      _this.setData({isAuth: true})
    } else {
      // 用户还没有授权,向用户发起授权请求
      let authorize = await app.wx('authorize', {scope: 'scope.camera' })
      if(authorize.msg) {
        _this.setData({isAuth: true })
      }else {
       _this.openSetting().then(res => {_this.setData({isAuth: true})})
      }
    }
   
  },

  // 打开授权设置界面
  openSetting() {
    const _this = this
    let promise = new Promise((resolve, reject) => {
      wx.showModal({
        title: '授权',
        content: '请先授权获取摄像头权限',
        success(res) {
          if (res.confirm) {
            wx.openSetting({
              success(res) {
                if (res.authSetting['scope.camera']) { // 用户打开了授权开关
                  resolve(true)
                } else { // 用户没有打开授权开关, 继续打开设置页面
                  _this.openSetting().then(res => {
                    resolve(true)
                  })
                }
              },
              fail(res) {
                console.log(res)
              }
            })
          } else if (res.cancel) {
            _this.openSetting().then(res => {
              resolve(true)
            })
          }
        }
      })
    })
    return promise;
  },

  takePhoto() {
    const ctx = wx.createCameraContext()
    ctx.takePhoto({
      quality: 'high',
      success: (res) => {
        this.setData({
          src: res.tempImagePath
        })
        wx.previewImage({
          current: res.tempImagePath, // 当前显示图片的http链接
          urls: [res.tempImagePath] // 需要预览的图片http链接列表
        })
        this.save(res.tempImagePath)
      }
    })

  },

  save(imgUrl) {
    let _this = this
    let fileName = new Date().valueOf();
    wx.downloadFile({
      url: imgUrl,
      filePath: wx.env.USER_DATA_PATH + '/' + fileName + '.jpg', //自定义临时资源路径
      success: (res) => {
        let filePath = res.filePath;
        wx.saveImageToPhotosAlbum({
          filePath,
          success(res) {
            console.log(res)
            app.wx('showToast',{
              title: '已保存到相册',
              icon: 'success',
              duration: 2000,
            })
          },
          fail(e) {
            console.log(e)
            wx.showToast({
              title: '保存失败,请重试',
              duration: 2000,
              icon: 'none',
            })
            if(e.errMsg == "saveImageToPhotosAlbum:fail auth deny"){
              _this.openSetting().then(res => {_this.setData({isAuth: true})})
            }
          },
        })

      }
    });

  },
})

index.wxml

<view class='camera'>
  <!-- <image src="/images/border.png" mode="widthFix"></image> -->
  <camera wx:if="{{isAuth}}" device-position="back" flash="off" binderror="error"></camera>
</view>
<button class="takePhoto" type="primary" bindtap="takePhoto">拍照</button>

index.wxss

/**index.wxss**/
.camera {
  width: 470rpx;
  height: 470rpx;
  border-radius: 50%;
  margin: 20px auto 0;
  position: relative;
}

.camera image {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 10;
}

.camera camera {
  width: 428rpx;
  height: 428rpx;
}

button.takePhoto:not([size='mini']) {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100vw;
  height: 90rpx;
  border-radius: 0;
}

app.js //这里我封装了wx 方法就是为了不使用 success函数和fail 函数,用async 和 await 就可以了。

// app.js


App({
   /**
   * 本方法就是为了使用能够async和await来获取结果,减少嵌套。
   * @attr 微信api的名字 
   * @params 需要传入的参数
   * 
   *    const app = getApp()
   *    let res = await app.wx('showModal',{title: '授权',content: '43534543',})
        console.log(432,res)
   * */ 
  wx(attr, params = {}) {
    console.log(32434, params  )
    return new Promise((result, reject) => {
      let body = {
        success: res => {
          console.log(88888,res)
            result({...res,msg:attr == 'showModal' ? res.confirm : true})
        },
        fail: rej => {
          console.log(432999,rej)
            result({...rej,msg:attr == 'showModal' ? rej.confirm : false})
        }
      }
      for(let k in params){
        body[k] = params[k];
      }
      wx[attr](body)
    })
  },
  globalData: {
    userInfo: null
  }
})

我是阿豪

有关微信小程序怎么实现拍照功能,以及授权,拍完照保存到本地。的更多相关文章

  1. ruby - 什么是填充的 Base64 编码字符串以及如何在 ruby​​ 中生成它们? - 2

    我正在使用的第三方API的文档状态:"[O]urAPIonlyacceptspaddedBase64encodedstrings."什么是“填充的Base64编码字符串”以及如何在Ruby中生成它们。下面的代码是我第一次尝试创建转换为Base64的JSON格式数据。xa=Base64.encode64(a.to_json) 最佳答案 他们说的padding其实就是Base64本身的一部分。它是末尾的“=”和“==”。Base64将3个字节的数据包编码为4个编码字符。所以如果你的输入数据有长度n和n%3=1=>"=="末尾用于填充n%

  2. ruby - 如何根据特征实现 FactoryGirl 的条件行为 - 2

    我有一个用户工厂。我希望默认情况下确认用户。但是鉴于unconfirmed特征,我不希望它们被确认。虽然我有一个基于实现细节而不是抽象的工作实现,但我想知道如何正确地做到这一点。factory:userdoafter(:create)do|user,evaluator|#unwantedimplementationdetailshereunlessFactoryGirl.factories[:user].defined_traits.map(&:name).include?(:unconfirmed)user.confirm!endendtrait:unconfirmeddoenden

  3. ruby - Ruby 中的隐式返回值是怎么回事? - 2

    所以我开始关注ruby​​,很多东西看起来不错,但我对隐式return语句很反感。我理解默认情况下让所有内容返回self或nil但不是语句的最后一个值。对我来说,它看起来非常脆弱(尤其是)如果你正在使用一个不打算返回某些东西的方法(尤其是一个改变状态/破坏性方法的函数!),其他人可能最终依赖于一个返回对方法的目的并不重要,并且有很大的改变机会。隐式返回有什么意义?有没有办法让事情变得更简单?总是有返回以防止隐含返回被认为是好的做法吗?我是不是太担心这个了?附言当人们想要从方法中返回特定的东西时,他们是否经常使用隐式返回,这不是让你组中的其他人更容易破坏彼此的代码吗?当然,记录一切并给出

  4. ruby - 怎么来的(a_method || :other) returns :other only when assigning to a var called a_method? - 2

    给定以下方法:defsome_method:valueend以下语句按我的预期工作:some_method||:other#=>:valuex=some_method||:other#=>:value但是下面语句的行为让我感到困惑:some_method=some_method||:other#=>:other它按预期创建了一个名为some_method的局部变量,随后对some_method的调用返回该局部变量的值。但为什么它分配:other而不是:value呢?我知道这可能不是一件明智的事情,并且可以看出它可能有多么模棱两可,但我认为应该在考虑作业之前评估作业的右侧...我已经在R

  5. ruby-on-rails - Cucumber 是否只是 rspec 的包装器以帮助将测试组织成功能? - 2

    只是想确保我理解了事情。据我目前收集到的信息,Cucumber只是一个“包装器”,或者是一种通过将事物分类为功能和步骤来组织测试的好方法,其中实际的单元测试处于步骤阶段。它允许您根据事物的工作方式组织您的测试。对吗? 最佳答案 有点。它是一种组织测试的方式,但不仅如此。它的行为就像最初的Rails集成测试一样,但更易于使用。这里最大的好处是您的session在整个Scenario中保持透明。关于Cucumber的另一件事是您(应该)从使用您的代码的浏览器或客户端的角度进行测试。如果您愿意,您可以使用步骤来构建对象和设置状态,但通常您

  6. ruby-on-rails - 我该怎么办 :remote location validation with CarrierWave? - 2

    我在我的Rails3示例应用程序上使用CarrierWave。我想验证远程位置上传,因此当用户提交无效URL(空白或非图像)时,我不会收到标准错误异常:CarrierWave::DownloadErrorinImageController#createtryingtodownloadafilewhichisnotservedoverHTTP这是我的模型:classPaintingtrue,:length=>{:minimum=>5,:maximum=>100}validates:image,:presence=>trueend这是我的Controller:classPaintingsC

  7. 电脑0x0000001A蓝屏错误怎么U盘重装系统教学 - 2

      电脑0x0000001A蓝屏错误怎么U盘重装系统教学分享。有用户电脑开机之后遇到了系统蓝屏的情况。系统蓝屏问题很多时候都是系统bug,只有通过重装系统来进行解决。那么蓝屏问题如何通过U盘重装新系统来解决呢?来看看以下的详细操作方法教学吧。  准备工作:  1、U盘一个(尽量使用8G以上的U盘)。  2、一台正常联网可使用的电脑。  3、ghost或ISO系统镜像文件(Win10系统下载_Win10专业版_windows10正式版下载-系统之家)。  4、在本页面下载U盘启动盘制作工具:系统之家U盘启动工具。  U盘启动盘制作步骤:  注意:制作期间,U盘会被格式化,因此U盘中的重要文件请注

  8. 华为OD机试用Python实现 -【明明的随机数】 2023Q1A - 2

    华为OD机试题本篇题目:明明的随机数题目输入描述输出描述:示例1输入输出说明代码编写思路最近更新的博客华为od2023|什么是华为od,od薪资待遇,od机试题清单华为OD机试真题大全,用Python解华为机试题|机试宝典【华为OD机试】全流程解析+经验分享,题型分享,防作弊指南华为o

  9. 【鸿蒙应用开发系列】- 获取系统设备信息以及版本API兼容调用方式 - 2

    在应用开发中,有时候我们需要获取系统的设备信息,用于数据上报和行为分析。那在鸿蒙系统中,我们应该怎么去获取设备的系统信息呢,比如说获取手机的系统版本号、手机的制造商、手机型号等数据。1、获取方式这里分为两种情况,一种是设备信息的获取,一种是系统信息的获取。1.1、获取设备信息获取设备信息,鸿蒙的SDK包为我们提供了DeviceInfo类,通过该类的一些静态方法,可以获取设备信息,DeviceInfo类的包路径为:ohos.system.DeviceInfo.具体的方法如下:ModifierandTypeMethodDescriptionstatic StringgetAbiList​()Obt

  10. 基于C#实现简易绘图工具【100010177】 - 2

    C#实现简易绘图工具一.引言实验目的:通过制作窗体应用程序(C#画图软件),熟悉基本的窗体设计过程以及控件设计,事件处理等,熟悉使用C#的winform窗体进行绘图的基本步骤,对于面向对象编程有更加深刻的体会.Tutorial任务设计一个具有基本功能的画图软件**·包括简单的新建文件,保存,重新绘图等功能**·实现一些基本图形的绘制,包括铅笔和基本形状等,学习橡皮工具的创建**·设计一个合理舒适的UI界面**注明:你可能需要先了解一些关于winform窗体应用程序绘图的基本知识,以及关于GDI+类和结构的知识二.实验环境Windows系统下的visualstudio2017C#窗体应用程序三.

随机推荐