100字范文,内容丰富有趣,生活中的好帮手!
100字范文 > 在微信小程序中 调用前置摄像头拍照 后置摄像头拍照扫码

在微信小程序中 调用前置摄像头拍照 后置摄像头拍照扫码

时间:2023-09-16 00:46:46

相关推荐

在微信小程序中 调用前置摄像头拍照  后置摄像头拍照扫码

1.需求:点击扫码按钮,扫描二维码识别单号

实现:

<view class="getcode" bindtap="scanCode">

<image src="../../we7/img/sao.png" class="saoimg"></image>

</view>

scanCode: function() {

var that = this;

wx.scanCode({

success(res) {

app.showToast('扫描成功')

that.setData({

kuaidi: res.result

});

},

fail(res) {

app.showToast('扫描失败,重新扫描')

},

})

},

2.需求,点击拍照,调用后置摄像头,拍照上传图片

phoTo是跟在bindTap后面调用的函数

如果只是简单的调用后置摄像头拍照,建议选择wx.chooseImage的API,不会涉及到微信的授权问题,比较方便,直接指定camera,返回的res.tempFilePaths可以直接显示在页面上,不会涉及到编写相机的样式。

phoTo:function() {

var t = this;

wx.chooseImage({

count: 1,

sizeType: ['compressed'],

sourceType: ['camera'],

success(res) {

const tempFilePaths = res.tempFilePaths

wx.uploadFile({

url: app.util.rootlink + 'api/common/updateImage',

filePath: tempFilePaths[0],

header: {

'content-type': 'multipart/form-data'

},

name: 'image',

formData: null,

success: function (res) {

var result = JSON.parse(res.data)

if (result.code == 200) {

var params = {

method: 'post',

data: { id: t.data.id, img: result.data.path },

token: wx.getStorageSync('token'),

success: function (res) {

if (res.data.code && res.data.code == 200) {

app.showToast(res.data.msg);

setTimeout(function () {

wx.navigateTo({

url: './confirmtwo?id=' + t.data.id,

})

},1000)

}

},

fail: function (result) {

console.log('失败: ', result);

}

}

app.util.ajax(params, 'api/user/signImg');

} else {

app.showToast(result.msg)

}

},

fail: function (res) {

app.showToast('请重新拍照')

}

})

},

fail(err) {

app.showToast('拍照失败')

}

})

},

3.需求,调用前置摄像头拍照

提示:这里使用微信的组件camera,会涉及到用户授权,样式也是需要自己去调整,默认是调用后置摄像头,device-position="front" 就会设置是前置摄像头

<camera mode="normal" device-position="front" flash="auto" binderror="error" style="width: 100%; height:400px;"></camera>

<button type="primary" bindtap="takePhoto">拍照</button>

//拍照

takePhoto() {

const ctx = wx.createCameraContext()

ctx.takePhoto({

quality: 'high',

success: (res) => {

this.setData({

src: res.tempImagePath //返回的路径 可以作为src显示在页面上

})

}

})

},

//用户拒绝授权后调用的函数

error(e) {

console.log(e.detail)

},

本内容不代表本网观点和政治立场,如有侵犯你的权益请联系我们处理。
网友评论
网友评论仅供其表达个人看法,并不表明网站立场。