微信小程序 Image API實例詳解
選擇圖片時可設(shè)置圖片是否是原圖,圖片來源。這用的也挺常見的,比如個人中心中設(shè)置頭像,可以與wx.upLoadFile()API使用
主要方法:
wx.chooseImage(object)
wxml
<!--監(jiān)聽按鈕--> <button type="primary" bindtap="listenerButtonChooseImage">點擊我選擇相冊</button> <!--通過數(shù)據(jù)綁定的方式動態(tài)獲取js數(shù)據(jù)--> <image src="{{source}}" mode="aspecFill" style="width: 640rpx; height: 640rpx"/>
js
Page({ data:{ // text:"這是一個頁面" source: '' }, /** * 選擇相冊或者相機 配合上傳圖片接口用 */ listenerButtonChooseImage: function() { var that = this; wx.chooseImage({ count: 1, //original原圖,compressed壓縮圖 sizeType: ['original'], //album來源相冊 camera相機 sourceType: ['album', 'camera'], //成功時會回調(diào) success: function(res) { //重繪視圖 that.setData({ source: res.tempFilePaths }) } }) },
wx.previewImage(object)
這又是一個奇葩API真實搞不懂怎么用這個。先模仿下官方咋使用但是沒有效果,搞懂了在補充下自己的使用
wxml
<!--圖片預(yù)覽--> <button type="primary" bindtap="listenerButtonPreviewImage">展示圖片</button>
js
Page({ data:{ // text:"這是一個頁面" source: '' }, /** * 預(yù)覽圖片 又一個奇葩接口 */ listenerButtonPreviewImage: function() { wx.previewImage({ current: 'http://img.souutu.com/2016/0511/20160511055648316.jpg', urls: [ 'http://img.souutu.com/2016/0511/20160511055648316.jpg', 'http://img.souutu.com/2016/0511/20160511055650751.jpg', 'http://img.souutu.com/2016/0511/20160511054928658.jpg' ], //這根本就不走 success: function(res) { console.log(res); }, //也根本不走 fail: function() { console.log('fail') } }) } })
感謝閱讀本文,希望能幫助到大家,謝謝大家對本站的支持!
相關(guān)文章
JS前端可視化canvas動畫原理及其推導(dǎo)實現(xiàn)
這篇文章主要為大家介紹了JS前端可視化canvas動畫原理及其推導(dǎo)實現(xiàn),有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2022-08-08微信小程序Server端環(huán)境配置詳解(SSL, Nginx HTTPS,TLS 1.2 升級)
這篇文章主要介紹了微信小程序Server端環(huán)境配置詳解(SSL, Nginx HTTPS,TLS 1.2 升級)的相關(guān)資料,需要的朋友可以參考下2017-01-01微信小程序 image組件binderror使用例子與js中的onerror區(qū)別
這篇文章主要介紹了微信小程序 image組件binderror使用例子與js中的onerror區(qū)別的相關(guān)資料,需要的朋友可以參考下2017-02-02