本文实例为大家分享了微信小程序实现拍照和相册选取图片的具体代码,供大家参考,具体内容如下 布局: <!--pages/camera/camera.wxml--> &l
本文实例为大家分享了微信小程序实现拍照和相册选取图片的具体代码,供大家参考,具体内容如下
布局:
<!--pages/camera/camera.wxml-->
<view
class="tui-menu-list"
id="view1"
style="display:flex;flex-direction:space-between">
<button
id="b1"
size="mini"
type="primary"
bindtap="chooseimage">
获取图片
</button>
<button
id="b2"
size="mini"
type="primary"
bindtap="savePhone">
保存
</button>
</view>
<image
src="{{tempFilePaths}}"
catchtap="chooseImageTap"
mode="aspectFit"
style="width:100%;height:400px;background-color:#ffffff;">
</image>
样式:
.view1 {
height: 25px
}
.tui-menu-list {
display: flex;
flex-direction: row;
margin: 20rpx;
padding: 20rpx;
}
获取图片路径,显示图片和保存
// pages/camera/camera.js
Page({
data: {
tempFilePaths: 'Http://pic2.cxtuku.com/00/01/08/b207004f7104.jpg'
},
chooseimage: function () {
var that = this;
wx.showActionSheet({
itemList: ['从相册选择', '拍照'],
itemColor: "#CED63A",
success: function (res) {
if (!res.cancel) {
if (res.tapindex == 0) {
that.chooseWxImage('album')
} else if (res.tapIndex == 1) {
that.chooseWxImage('camera')
}
}
}
})
},
chooseWxImage: function (type) {
var that = this
wx.chooseImage({
sizeType: ['original', 'compressed'],
sourceType: [type],
count: 1,
success: function (res) {
console.log(res)
that.setData({
tempFilePaths: res.tempFilePaths[0],
})
}
})
},
savePhone: function () {
wx.getImageInfo({
src: this.data.tempFilePaths,
success: function (res) {
var path = res.path
wx.saveImageToPhotosAlbum({
filePath: path,
success: function () {
wx.showToast({
title: '保存成功',
})
},
fail: function (res) {
wx.showToast({
title: '保存失败',
icon: 'none'
})
}
})
}
})
}
})
效果图:
--结束END--
本文标题: 微信小程序实现拍照和相册选取图片
本文链接: https://lsjlt.com/news/125464.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
2024-01-12
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
2023-05-20
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
0