首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >小程序调用拍照功能

小程序调用拍照功能

作者头像
王小婷
修改2020-09-27 14:51:50
1.4K0
修改2020-09-27 14:51:50
举报
文章被收录于专栏:编程微刊编程微刊

今天一位粉丝问了一个问题,关于小程序本地相册选择图片或相机拍照底部弹框功能,小程序根据文档来写,为什么没有底部弹框,点击按钮就直接打开了手机相册了。看了一下不是他代码的原因,也不是什么bug,而是只写了部分功能。今天把这两个功能连起来说一说。

老规矩,放上小程序官方文档:https://developers.weixin.qq.com/miniprogram/dev/api/wx.chooseImage.html

官网里面的代码,使用chooseImage即可,count表示最多可以选择的图片张数, sizeType表示所选的图片的尺寸sourceType表示选择图片的来源,详情可以仔细阅读一下文档。

wx.chooseImage({  count: 1,  sizeType: ['original', 'compressed'],  sourceType: ['album', 'camera'],  success(res) {    // tempFilePath可以作为img标签的src属性显示图片    const tempFilePaths = res.tempFilePaths  }})

有很多功能设计的时候是这样的,点击按钮之后会从手机的底部弹出来一个询问按钮,询问是从手机里选择一张照片,还是调用摄像功能拍摄照片,这个时候其实只要多调用一下这个函数showActionSheet就可以了。

效果如下:点击按钮,选择图片进行替换,或者拍到一张照片,进行更换。

代码:

wxml:

<view class="container">  <view>    <button class="btn" bindtap="chooseimage">点击更换图片</button>  </view>   <view>    <image src="{{img}}" catchTap="chooseImageTap" mode="aspectFit" class="img" />  </view></view>

wxss:

.btn {  margin: 140rpx;} .img {  width: 100%;  height: 480rpx;} 

js

Page({  data: {    img: '../../images/1.jpg'  },  onLoad: function() {},   chooseWxImage: function(type) {    var that = this;    wx.chooseImage({      sizeType: ['original', 'compressed'],      sourceType: [type],      success: function(res) {        console.log(res);        that.setData({     // tempFilePath可以作为img标签的src属性显示图片          img: res.tempFilePaths[0],        })      }    })  },   chooseimage: function() {    var that = this;    wx.showActionSheet({      itemList: ['从相册中选择', '拍照'],      itemColor: "#a3a2a2",      success: function(res) {        if (!res.cancel) {          if (res.tapIndex == 0) {            that.chooseWxImage('album')          } else if (res.tapIndex == 1) {            that.chooseWxImage('camera')          }        }      }    })   },})

本文系转载,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文系转载前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
相关产品与服务
云开发 CloudBase
云开发(Tencent CloudBase,TCB)是腾讯云提供的云原生一体化开发环境和工具平台,为200万+企业和开发者提供高可用、自动弹性扩缩的后端云服务,可用于云端一体化开发多种端应用(小程序、公众号、Web 应用等),避免了应用开发过程中繁琐的服务器搭建及运维,开发者可以专注于业务逻辑的实现,开发门槛更低,效率更高。
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档