微信小程序?qū)崿F(xiàn)拍照功能
小程序?qū)崿F(xiàn)一個(gè)拍照功能，親測(cè)可用。
頁面的樣式都是我自己寫的，當(dāng)然你們也可以自己排版寫樣式。下面一共有三個(gè)按鈕，返回按鈕、拍照按鈕、切換攝像頭按鈕。
首先相機(jī)頁面是通過wx:if來讓其隱藏的，通過點(diǎn)擊我們頁面的拍照按鈕來使條件為true，從而讓我們的相機(jī)頁面顯示出來。然后我這里寫了三個(gè)按鈕，一個(gè)是返回按鈕，一個(gè)是點(diǎn)擊快門拍照的按鈕，一個(gè)是攝像頭的前置攝像頭和后置攝像頭的轉(zhuǎn)換按鈕。
index.wxml
<camera device-position="{{cameraPos}}" wx:if="{{showCamera}}">
? <view class="CameraOptions">
? ? <view class="takePicBtn">
? ? ? ?<!-- 攝像頭的返回按鈕 -->
? ? ? ?<cover-image class="confirm" src="" bindtap="goBack"></cover-image>
? ? ? ?<!-- 照相的按鈕 -->
? ? ? ?<cover-view bindtap="getPhoto"></cover-view>
? ? ? ?<!-- 攝像頭的前后轉(zhuǎn)換按鈕 -->
? ? ? ?<cover-image class="switch" src="" bindtap='changePos'></cover-image>
? ?</view>
? </view>
</camera>cover-view：
覆蓋在原生組件之上的文本視圖，可覆蓋的原生組件包括：map（地圖）、video（視頻）、canvas（畫布）、camera（系統(tǒng)相機(jī)）、live-pusher（實(shí)時(shí)音視頻播放），只支持嵌套 cover-view、cover-image，可在 cover-view 中使用 button。
cover-image：
覆蓋在原生組件之上的圖片視圖，可覆蓋的原生組件同cover-view，支持覆蓋在cover-view里。
device-position：
是用來切換前置攝像頭還是后置攝像頭，front是前置攝像頭，back是后置攝像頭
index.js
// 照相
? getPhoto() {
? ? // c創(chuàng)建相機(jī)上下文對(duì)象,獲取唯一的相機(jī)對(duì)象
? ? var context = wx.createCameraContext()
? ? // 照相功能
? ? context.takePhoto({
? ? ? quality: "high",
? ? ? success: res => {
? ? ? ? // 照相成功的回調(diào)
? ? ? ? console.log(res); ?// 圖片的信息
? ? ? ? this.setData({
? ? ? ? ? // 隱藏相機(jī)
? ? ? ? ? // ?showCamera:false,
? ? ? ? ? imageUrl: res.tempImagePath,
? ? ? ? ? imgwidth: res.width,
? ? ? ? ? imgheight: res.height
? ? ? ? })
? ? ? ? console.log(this.data.imageUrl)
? ? ? },
? ? ? fail: () => {
? ? ? ? wx.showToast({
? ? ? ? ? title: '出現(xiàn)錯(cuò)誤',
? ? ? ? })
? ? ? }
? ? })
? },
?
// 相機(jī)前后鏡頭轉(zhuǎn)換
? changePos() {
? ? this.setData({
? ? ? cameraPos: this.data.cameraPos == "back" ? "front" : "back"
? ? })
? },
?
// 關(guān)閉相機(jī)
? goBack() {
? ? this.setData({
? ? ? showCamera: false,
? ? })
? },拍照成功回調(diào)函數(shù)的res是我們拍照照片的一些信息，其中res.tempImagePath是我們圖片的本地路徑，我當(dāng)時(shí)還有一個(gè)裁剪圖片的功能，這里沒有寫上去。
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
- 微信小程序?qū)崿F(xiàn)拍照和相冊(cè)選取圖片
- 微信小程序使用前置攝像頭拍照
- 微信小程序 拍照或從相冊(cè)選取圖片上傳代碼實(shí)例
- 微信小程序?qū)崿F(xiàn)拍照畫布指定區(qū)域生成圖片
- 微信小程序拍照和攝像功能實(shí)現(xiàn)方法示例
- 微信小程序chooseImage的用法(從本地相冊(cè)選擇圖片或使用相機(jī)拍照)
- 微信小程序調(diào)用攝像頭隱藏式拍照功能
- 微信小程序?qū)崿F(xiàn)倒計(jì)時(shí)調(diào)用相機(jī)自動(dòng)拍照功能
- 微信小程序 chooseImage選擇圖片或者拍照
- 微信小程序-拍照或選擇圖片并上傳文件
相關(guān)文章
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)自定義右鍵菜單，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-05-05
本文介紹了根據(jù)Json串生成Html的一種方式（只是簡(jiǎn)單實(shí)現(xiàn)了文本框，密碼框，下拉框）感興趣的朋友可以了解下2013-01-01
codemirror6實(shí)現(xiàn)自定義代碼提示效果實(shí)例
這篇文章主要給大家介紹了關(guān)于codemirror6實(shí)現(xiàn)自定義代碼提示效果的相關(guān)資料,CodeMirror是一個(gè)網(wǎng)絡(luò)代碼編輯器組件,它可以在網(wǎng)站中用于實(shí)現(xiàn)支持多種編輯功能的文本輸入字段,并具有豐富的編程接口以允許進(jìn)一步擴(kuò)展,需要的朋友可以參考下2023-08-08
字符串和數(shù)字的操作在js中非常頻繁，也非常重要。以往看完書之后都能記得非常清楚，但稍微隔一段時(shí)間不用，便會(huì)忘得差不多，記性不好是硬傷啊。下面這篇文章就對(duì)字符串和數(shù)字的一些常用操作做個(gè)整理，一者加深印象，二者方便今后溫習(xí)查閱。需要的朋友們可以參考借鑒。2017-01-01
前端React?Nextjs中的TS類型過濾實(shí)用技巧
今天就來介紹一個(gè)在其它開源庫中見到的既花里胡哨，又實(shí)用的TS類型——TS類型過濾，你會(huì)發(fā)現(xiàn)這些?TS騷操作真的很重要，因?yàn)樗芎芎玫貛椭阕鲮o態(tài)類型校驗(yàn)2022-04-04
詳解微信小程序開發(fā)聊天室—實(shí)時(shí)聊天，支持圖片預(yù)覽
這篇文章主要介紹了微信小程序?qū)崟r(shí)聊天支持圖片預(yù)覽，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
這篇文章主要介紹了小程序自動(dòng)化測(cè)試，文中通過示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2020-08-08
受到同事啟發(fā),突然發(fā)現(xiàn)了幾個(gè)有趣又實(shí)用的web api,下面這篇文章主要給大家介紹了關(guān)于前端JavaScript獲取電池信息的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-04-04
本文主要給大家介紹通過一個(gè)叫jq的小工具，非常的實(shí)用，給大家參考下2014-11-11
使用OPENLAYERS3實(shí)現(xiàn)點(diǎn)選的方法
這篇文章主要為大家詳細(xì)介紹了使用OPENLAYERS3實(shí)現(xiàn)點(diǎn)選的幾種方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2017-07-07