官网里面的代码,使用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\')
}
}
}
})
},
})
请发表评论