微信小程序?qū)崿F(xiàn)拍照和相冊(cè)選取圖片
本文實(shí)例為大家分享了微信小程序?qū)崿F(xiàn)拍照和相冊(cè)選取圖片的具體代碼,供大家參考,具體內(nèi)容如下
布局:
<!--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/camera.js Page({ data: { tempFilePaths: 'http://pic2.cxtuku.com/00/01/08/b207004f7104.jpg' }, chooseimage: function () { var that = this; wx.showActionSheet({ itemList: ['從相冊(cè)選擇', '拍照'], 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' }) } }) } }) } })
效果圖:
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
js 轉(zhuǎn)json格式的字符串為對(duì)象或數(shù)組(前后臺(tái))的方法
下面小編就為大家?guī)?lái)一篇js 轉(zhuǎn)json格式的字符串為對(duì)象或數(shù)組(前后臺(tái))的方法。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-11-11layui動(dòng)態(tài)渲染生成select的option值方法
今天小編就為大家分享一篇layui動(dòng)態(tài)渲染生成select的option值方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-09-09Bootstrap基本樣式學(xué)習(xí)筆記之標(biāo)簽(5)
這篇文章主要介紹了Bootstrap學(xué)習(xí)筆記之標(biāo)簽基本樣式的相關(guān)資料,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2016-12-12js點(diǎn)擊事件的執(zhí)行過(guò)程實(shí)例分析【冒泡與捕獲】
這篇文章主要介紹了js點(diǎn)擊事件的執(zhí)行過(guò)程,結(jié)合實(shí)例形式分析了js事件機(jī)制中的冒泡與捕獲相關(guān)原理、操作技巧與注意事項(xiàng),需要的朋友可以參考下2020-04-04mpvue微信小程序多列選擇器用法之省份城市選擇的實(shí)現(xiàn)
這篇文章主要給大家介紹了關(guān)于mpvue微信小程序多列選擇器用法之省份城市選擇實(shí)現(xiàn)的相關(guān)資料,文中通過(guò)示例代碼以及圖文介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-03-03