微信小程式實現拍照和相簿選取圖片
阿新 • • 發佈:2021-05-11
本文例項為大家分享了微信小程式實現拍照和相簿選取圖片的具體程式碼,供大家參考,具體內容如下
佈局:
<!--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>
樣式:
/* pages/camera/camera.wxss */
.view1 {
height: 25px
}
.tui-menu-list {
display: flex;
flex-direction: row;
margin: 20rpx;
程式設計客棧 padding: 20rpx;
}
獲取圖片路徑,顯示圖片和儲存
// pages/camera/http://www.cppcns.comcamera.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.tapiXIisIndex == 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.saveImageT程式設計客棧oPhotosAlbum({ filePath: path,success: function () { wx.showToast({ title: '儲存成功',}) },fail: function (res) { wx.showToast({ title: '儲存失敗',icon: 'none' }) } }) } }) } })
效果圖:
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支援我們。