小程序獲取本地相冊(cè)及開(kāi)發(fā)拍照功能
2018-02-28|HiShop
導(dǎo)讀：圖片類小程序中，相冊(cè)獲取圖片授權(quán)，使用相機(jī)拍照，本地圖片上傳都是最基本的功能，下面是開(kāi)發(fā)授權(quán)本地相冊(cè)及拍照功能的開(kāi)發(fā)步驟。...
圖片類小程序中，相冊(cè)獲取圖片授權(quán)，使用相機(jī)拍照，本地圖片上傳都是最基本的功能，下面是開(kāi)發(fā)授權(quán)本地相冊(cè)及拍照功能的開(kāi)發(fā)步驟。
| 小程序開(kāi)發(fā)上傳圖片如何實(shí)現(xiàn) | 保存圖片到手機(jī) | 相機(jī)組件控制 wx.createCameraContext |
小程序獲取本地相冊(cè)開(kāi)發(fā)文檔：
1.index.wxml
<!--index.wxml-->
<button style="margin:30rpx;" bindtap="chooseimage">獲取圖片</button>
<image src="{{tempFilePaths }}" mode="aspecFill" style="width: 100%; height: 450rpx"/>
2.index.js
//index.js
//獲取應(yīng)用實(shí)例
var app = getApp()
Page({
data: {
tempFilePaths: ''
},
onLoad: function () {
},
chooseimage: function () {
var _this = this;
wx.chooseImage({
count: 1, // 默認(rèn)9
sizeType: ['original', 'compressed'], // 可以指定是原圖還是壓縮圖，默認(rèn)二者都有
sourceType: ['album', 'camera'], // 可以指定來(lái)源是相冊(cè)還是相機(jī)，默認(rèn)二者都有
success: function (res) {
// 返回選定照片的本地文件路徑列表，tempFilePath可以作為img標(biāo)簽的src屬性顯示圖片
_this.setData({
tempFilePaths:res.tempFilePaths
})
}
})
}
})
API 說(shuō)明:
這里說(shuō)說(shuō)sourcetype.默認(rèn)是從相冊(cè)獲取和使用相機(jī)拍照,跟微信現(xiàn)在選擇圖片的界面一樣,第一格是拍照,后面的是相冊(cè)照片.
這里注意:返回的是圖片在本地的路徑.如果需要將圖片上傳到服務(wù)器,需要用到另一個(gè)API.
示例代碼:
wx.chooseImage({
success: function(res) {
var tempFilePaths = res.tempFilePaths
wx.uploadFile({
url: 'http://example.weixin.qq.com/upload', //僅為示例，非真實(shí)的接口地址
filePath: tempFilePaths[0],
name: 'file',
formData:{
'user': 'test'
},
success: function(res){
var data = res.data
//do something
}
})
}
})
HiShop小程序工具提供多類型商城/門店小程序制作，可視化編輯 1秒生成5步上線。通過(guò)拖拽、拼接模塊布局小程序商城頁(yè)面，所看即所得，只需要美工就能做出精美商城。
更多小程序開(kāi)發(fā)案例，盡在：http://m.descansotropical.com/xiaocx/kaifa.html
- 關(guān)注官方公眾號(hào) -
提供多種電商軟件及解決方案