快捷導(dǎo)航

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

更新時(shí)間：2022年04月13日 15:00:34 作者：我是來(lái)寫(xiě)bug的吧

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

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

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

首先相機(jī)頁(yè)面是通過(guò)wx:if來(lái)讓其隱藏的，通過(guò)點(diǎn)擊我們頁(yè)面的拍照按鈕來(lái)使條件為true，從而讓我們的相機(jī)頁(yè)面顯示出來(lái)。然后我這里寫(xiě)了三個(gè)按鈕，一個(gè)是返回按鈕，一個(gè)是點(diǎn)擊快門(mé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（畫(huà)布）、camera（系統(tǒng)相機(jī)）、live-pusher（實(shí)時(shí)音視頻播放），只支持嵌套 cover-view、cover-image，可在 cover-view 中使用 button。

cover-image：

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

device-position：

是用來(lái)切換前置攝像頭還是后置攝像頭，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è)裁剪圖片的功能，這里沒(méi)有寫(xiě)上去。

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: