微信小程序调用本地相册与拍照

小程序调用相册与拍照

微信小程序提供了许多方便api给开发者使用，比如说wx. showActionSheet()调用菜单栏，wx.chooseImage()从本地相册选择图片或使用相机拍照。我们可以利用这些模拟用户设置头像，就是从本地调用图片设置在页面上并缓存到storage，刷新页面时图片不刷掉。

1、点击头像时弹出底部菜单栏

2、由于我是直接使用电脑测试，所以点击拍照或者相册都是弹出本地图片对话框，如果手机测试的是可以调用摄像头拍照的。

3、我们选择图片并确认后，在storage上会多出我们选择的图片数据。这时我们的图片就成功缓存到了storage上了

废话不多说了，直接上代码（看注释）

index.wxml

<view class='header'><view class='avatar'><image bindtap='buttonclick' src="{{tempFilePaths}}"/></view><view class='login-info'><view class='login'>登录/注册</view></view><view class='arrow'><image src="/assets/images/arrow-right.png"/></view>
</view>

index.wxss

.header {position: relative;display: flex;background: #3399FF;height: 170rpx;padding: 12rpx 30rpx;color: #fff;
}.avatar image {width: 140rpx;height: 140rpx;border-radius: 70rpx;background: #f2f2f2;vertical-align: middle;
}.login-info {vertical-align: middle;margin-left: 30rpx;
}.login-info .login {font-size: 36rpx;margin-top: 38rpx;
}
.arrow {position: absolute;right: 30rpx;margin-top: 30rpx;
}.arrow image {width: 60rpx;height: 60rpx;
}

index.js

Page({data: {tempFilePaths:'',sourceType: ['camera', 'album']},onLoad: function () {this.setHeader();//页面数据刚加载时调用setHeader();},//头像点击处理事件，使用wx.showActionSheet()调用菜单栏buttonclick: function () {const that = thiswx.showActionSheet({itemList: ['拍照', '相册'],itemColor: '',//成功时回调success: function (res) {if (!res.cancel) {/*res.tapIndex返回用户点击的按钮序号，从上到下的顺序，从0开始比如用户点击本例中的拍照就返回0，相册就返回1我们res.tapIndex的值传给chooseImage()*/that.chooseImage(res.tapIndex)}},//失败时回调fail: function (res) {console.log('调用失败')},complete: function (res) { },})},/*
判断storage是否缓存图片，如果是就将图片从storage取出并赋值给tempFilePaths
否则就使用默认的图片
*/
setHeader(){const tempFilePaths = wx.getStorageSync('tempFilePaths');if (tempFilePaths) {this.setData({tempFilePaths: tempFilePaths})} else {this.setData({tempFilePaths: '/assets/images/header.png'})}
},chooseImage(tapIndex) {const checkeddata = trueconst that = thiswx.chooseImage({//count表示一次可以选择多少照片count: 1,//sizeType所选的图片的尺寸，original原图，compressed压缩图sizeType: ['original', 'compressed'],//如果sourceType为camera则调用摄像头，为album时调用相册sourceType: [that.data.sourceType[tapIndex]],success(res) {// tempFilePath可以作为img标签的src属性显示图片const tempFilePaths = res.tempFilePaths//将选择到的图片缓存到本地storage中wx.setStorageSync('tempFilePaths', tempFilePaths)/*由于在我们选择图片后图片只是保存到storage中，所以我们需要调用一次             setHeader()方法来使页面上的头像更新*/that.setHeader();wx.showToast({title: '设置成功',icon: 'success',duration: 2000})}})},
})

文章为本人原创，欢迎大家转载，但是注意标明文章出处或链接

微信小程序调用本地相册与拍照相关推荐

微信小程序开发（3） - 微信小程序调用摄像头静默隐藏拍照功能实现方式
微信小程序最近非常火热,小编最近做了一个微信小程序开发新项目,使用小程序开发考试系统,在使用App参加考试的时候调用摄像头抓拍用户是否作弊,在开发过程中遇到点问题,下面小编把问题描述和解决方法分享给大 ...
微信小程序开发选取相册照片/拍照API调用
作者最近在探索微信小程序,有一个需求是让用户通过手机相册或者手机摄像头拍照上传图片.效果如下图所示: 由于作者之前没有接触过微信小程序,看了微信小程序的开发手册后就开始写了. 一开始的想法是这样的: ...
微信小程序从本地相册加载图片并显示
需求从本地相册获取照片并且生成轮播图,然后通过照片的元数据读取时间.地点等信息. 实现图片主要通过url访问,微信api读取图片时会返回图片的url,通过设定数组,存储图片的url. 对象设置: ...
微信小程序调用相机相册功能实现
这个其实很简单,微信提供了api 1 一般我们做个人图像选择的时候可以简单的使用 click1:function(){wx.chooseImage({success: function(res) {} ...
微信小程序调用相册和相机
首先来写好wxml部分:给一个图片列表(img_list)和上传图片的按钮(addimg) <view class="container"><view class ...
微信小程序调用导航，uniapp打开本地导航软件
微信小程序使用本地导航注:openLocation使用的GCJ02坐标哦 wx.openLocation({ latitude: GCJ02GPS.lat, longitude: GCJ02GPS. ...
微信小程序调用相机选择图片生成水印
项目近期有一个需求,是在小程序使用相机拍照时,页面缩略图和上传服务器(或保存本地)的都是带水印的,水印文案是当前的时间和当前所处的地点. 前期使用了微信小程序的wx.chooseImage相机拍照,再 ...
微信小程序调用Vant组件库
微信小程序调用Vant组件库 Vant Weapp 微信小程序引入Vant Weapp 调用Vant Weapp组件 Vant Weapp 轻量.可靠的小程序 UI 组件库链接: vant开发指南. ...
（转）微信小程序保存图片到相册
这篇文章主要为大家详细介绍了微信小程序保存图片到相册权限设置,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下微信小程序保存图片到相册可以分成两种:一种是保存网络图片,一 ...

微信小程序调用本地相册与拍照

小程序调用相册与拍照

微信小程序调用本地相册与拍照相关推荐

最新文章

热门文章