微信小程序?qū)崿F(xiàn)拍照功能

更新時間：2022年04月13日 15:00:34 作者：我是來寫bug的吧

這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)拍照功能，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

小程序?qū)崿F(xiàn)一個拍照功能，親測可用。

頁面的樣式都是我自己寫的，當然你們也可以自己排版寫樣式。下面一共有三個按鈕，返回按鈕、拍照按鈕、切換攝像頭按鈕。

首先相機頁面是通過wx:if來讓其隱藏的，通過點擊我們頁面的拍照按鈕來使條件為true，從而讓我們的相機頁面顯示出來。然后我這里寫了三個按鈕，一個是返回按鈕，一個是點擊快門拍照的按鈕，一個是攝像頭的前置攝像頭和后置攝像頭的轉(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)相機）、live-pusher（實時音視頻播放），只支持嵌套 cover-view、cover-image，可在 cover-view 中使用 button。

cover-image：

覆蓋在原生組件之上的圖片視圖，可覆蓋的原生組件同cover-view，支持覆蓋在cover-view里。

device-position：

是用來切換前置攝像頭還是后置攝像頭，front是前置攝像頭，back是后置攝像頭

index.js

// 照相
? getPhoto() {
? ? // c創(chuàng)建相機上下文對象,獲取唯一的相機對象
? ? var context = wx.createCameraContext()
? ? // 照相功能
? ? context.takePhoto({
? ? ? quality: "high",
? ? ? success: res => {
? ? ? ? // 照相成功的回調(diào)
? ? ? ? console.log(res); ?// 圖片的信息
? ? ? ? this.setData({
? ? ? ? ? // 隱藏相機
? ? ? ? ? // ?showCamera:false,
? ? ? ? ? imageUrl: res.tempImagePath,
? ? ? ? ? imgwidth: res.width,
? ? ? ? ? imgheight: res.height
? ? ? ? })
? ? ? ? console.log(this.data.imageUrl)
? ? ? },
? ? ? fail: () => {
? ? ? ? wx.showToast({
? ? ? ? ? title: '出現(xiàn)錯誤',
? ? ? ? })
? ? ? }
? ? })
? },
?
// 相機前后鏡頭轉(zhuǎn)換
? changePos() {
? ? this.setData({
? ? ? cameraPos: this.data.cameraPos == "back" ? "front" : "back"
? ? })
? },
?
// 關(guān)閉相機
? goBack() {
? ? this.setData({
? ? ? showCamera: false,
? ? })
? },

拍照成功回調(diào)函數(shù)的res是我們拍照照片的一些信息，其中res.tempImagePath是我們圖片的本地路徑，我當時還有一個裁剪圖片的功能，這里沒有寫上去。

以上就是本文的全部內(nèi)容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: