微信小程序实现自定义拍摄组件
更新时间：2022年08月28日 11:57:10 作者：sx_lz_1119
这篇文章主要为大家详细介绍了微信小程序实现自定义拍摄组件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
微信小程序实现自定义摄像头（在摄像头内添加提示信息），供大家参考，具体内容如下
摄像头组件（wxml）
<!-- 拍照功能 自定义摄像头
bindtap：takePhotoDepot----从图库获取
bindtap：takePhoto----拍照
bindtap：takeFrontBack---转换摄像头
-->
<view wx:if="{{useCameraTakePhoto}}" class="scan_view">
<!-- 摄像头组件 -->
<camera device-position="back" mode="normal" flash="off" binderror="error" device-position="{{phopo_camera?'front':'back'}}" style="width: 100%; height: 100vh;">
<!-- 摄像头返回按钮 -->
<cover-view class="camera_view">
<cover-view class="back" bindtap="closeCamera">
返回
</cover-view>
<cover-view style="overflow: hidden;margin-top: 80vh;">
<cover-image bindtap="takePhotoDepot" class="take_photo_depot"src="../../images/phopo.png"></cover-image>
<cover-image bindtap="takePhoto" class="take_photo" src="../../images/starCamera.png"></cover-image>
<cover-image bindtap="takeFrontBack" class="take_photo_frontBack" src="../../images/transition.png"></cover-image>
</cover-view>
</cover-view>
</camera>
</view>唤醒摄像头组件（wxml）
<view class="conPhopo_camera" bindtap="changePhoto"> <text>拍摄照片</text> </view>
自定义展示拍照后的图片（wxml）
<view style="width:100%; overflow: hidden;" wx:if="{{tempFileList.length>0}}">
<!-- 图片缩小状态 -->
<view style="position: relative;width: 80rpx;height: 120rpx;float: left;margin-right: 10rpx; margin-top: 10rpx;" wx:for="{{tempFileList}}" wx:key="index">
<view class="fileShow" wx:if="{{item.type ==='image' && item.thumb}}">
<image style="display: inline-block;width: 80rpx;height: 120rpx; " src="data:image/png;base64,{{item.thumb}}" alt="" bindtap="changeMinImage" data-item="{{item}}" data-index="{{index}}" data-src='{{item.thumb}}' data-thumb='true' />
</view>
<view class="fileShow" wx:elif="{{item.type ==='image' &&item.path}}">
<image style="display: inline-block;width: 80rpx;height: 120rpx; margin-top: 10rpx;" src="{{item.path}}" alt="" bindtap="changeMinImage" data-item="{{item}}" data-index="{{index}}" data-src='{{item.path}}' />
</view>
</view>
<!-- 点击缩小图片放大展示-->
<view wx:if="{{isSrc}}" style="position: absolute;left:0;top: 0; width: 100vw;height: 100vh;background-color: rgba(0, 0, 0, 0.8);padding-top: 20%;">
<view wx:if="{{thumb=='true'}}">
<image style="display: block; width: 80%;height: 80%;margin: 0 auto;opacity: 1; background-color: #09ce9a;" src="data:image/png;base64,{{src.src}}" alt="" />
</view>
<view wx:elif="{{thumb!='true'}}">
<image style="display: block; width: 80%;height: 80%;margin: 0 auto;opacity: 1; background-color: aqua;" src="{{src.src}}" />
</view>
<i class="iconfont .icon-quxiao" bindtap="changeMaxImage" style="position: absolute;left: 20rpx;top: 20rpx;color: #fff;font-size: 44rpx;"></i>
</view>
</view>接下来就是关键了，主要还得看js怎么实现
实现的方法
打开摄像头并且拍照
// 控制摄像头是否显示
changePhoto(e) {
const {
currentTab,
isVideoModel,
} = this.data;
let casePhotoList = this.data.casePhotoList;
let facePhotoList = this.data.facePhotoList;
let abnormalPhotoList = this.data.abnormalPhotoList;
let accessoryPhotoList = this.data.accessoryPhotoList;
const that = this;
if (currentTab == 2) {
// 摄像开始
wx.chooseVideo({
count: 1,
mediaType: ['video'],
sourceType: ['camera'],
success: (res) => {
// 添加formData
let formData = new FormData();
formData.append('type', currentTab);
let src = {
tempVideoPath: res.tempFilePath,
size: res.size
};
abnormalPhotoList.push(src);
that.setData({
abnormalPhotoList: abnormalPhotoList,
useCameraTakePhoto: false,
isVideoModel: !isVideoModel,
});
for (const iterator of abnormalPhotoList) {
formData.appendFile('files[]', iterator.tempVideoPath);
}
let tempFilesPath = abnormalPhotoList.map(item => ({
type: item.type ? item.type : 'video', // 文件类型
path: item.tempVideoPath, // 文件本地路径
size: item.size ? item.size : '', // 文件大小
}))
let {
videoTempFileList
} = that.data;
that.setData({
videoTempFileList: videoTempFileList.concat(tempFilesPath)
})
let data = formData.getData();
// 2.2.异步上传，发送请求 这里就不写了
...
}
})
} else {
this.setData({
useCameraTakePhoto: true,
isjustSrc: e.currentTarget.dataset.isphoto
})
// 拍照开始
wx.chooseMedia({
success: res => {
let newTempFiles = {
tempImagePath:res.tempFiles[0].tempFilePath,
type:res.tempFiles[0].fileType,
size:res.tempFiles[0].size
}
let formData = new FormData();
formData.append('type', currentTab);
if (currentTab == 0) {
casePhotoList.push(res.tempFiles[0])
that.setData({
casePhotoList: casePhotoList,
useCameraTakePhoto: false
})
for (const iterator of newTempFiles) {
console.log(newTempFiles,244);
formData.appendFile('files[]', newTempFiles.tempImagePath);
}
// 2.选择文件后，页面显示选择的文件的本地临时文件，且进行异步上传
// 2.1.返回选定文件的本地文件路径列表，可以作为img标签的src属性显示图片
let tempFilesPath = casePhotoList.map(item => ({
type: newTempFiles.fileType ? newTempFiles.fileType : 'image', // 文件类型
path: newTempFiles.tempImagePath, // 文件本地路径
size: newTempFiles.size ? newTempFiles.size : '', // 文件大小
}))
let {
tempFileList
} = that.data;
console.log(tempFileList,257);
that.setData({
tempFileList: tempFileList.concat(newTempFiles)
},()=>{console.log(that.data);})
} else if (currentTab == 1) {
facePhotoList.push(...newTempFiles)
that.setData({
facePhotoList: facePhotoList,
useCameraTakePhoto: false
})
for (const iterator of [...newTempFiles]) {
formData.appendFile('files[]', iterator.tempImagePath);
}
let tempFilesPath = facePhotoList.map(item => ({
type: item.type ? item.type : 'image', // 文件类型
path: item.tempImagePath, // 文件本地路径
size: item.size ? item.size : '', // 文件大小
}))
let {
facetTempFileList
} = that.data;
that.setData({
facetTempFileList: facetTempFileList.concat(tempFilesPath)
})
} else if (currentTab == 3) {
accessoryPhotoList.push(...newTempFiles)
that.setData({
accessoryPhotoList: accessoryPhotoList,
useCameraTakePhoto: false
})
for (const iterator of accessoryPhotoList) {
formData.appendFile('files[]', iterator.tempImagePath);
}
}
let data = formData.getData();
// 2.2.异步上传，发送请求 上传照片
}
})
}
},转换摄像头
// 转换摄像头
takeFrontBack() {
const {
phopo_camera
} = this.data
this.setData({
phopo_camera: !phopo_camera
})
},打开手机相册
// 打开手机相册
takePhotoDepot() {
const that = this;
const {
currentTab,
} = this.data;
let casePhotoList = this.data.casePhotoList;
let facePhotoList = this.data.facePhotoList;
let abnormalPhotoList = this.data.abnormalPhotoList;
let accessoryPhotoList = this.data.accessoryPhotoList;
if (currentTab == 2) {
wx.chooseVideo({
count: 1,
mediaType: ['video'],
sourceType: ['album'],
success: (res) => {
let src = {
tempVideoPath: res.tempFilePath,
size: res.size
};
abnormalPhotoList.push(src);
this.setData({
abnormalPhotoList: abnormalPhotoList,
useCameraTakePhoto: false,
isVideoModel: false,
});
}
})
} else {
wx.chooseMedia({
count: 1, // 选择数量
mediaType: ['image'], // 文件类型 图片
sourceType: ['album'], // 图片来源 album：从相册选
success: res => {
let formData = new FormData();
formData.append('type', currentTab);
let src = {
tempImagePath: res.tempFiles[0].tempFilePath,
size: res.tempFiles[0].size,
fileType: res.tempFiles[0].fileType,
}
if (currentTab == 0) {
casePhotoList.push(src)
that.setData({
casePhotoList: casePhotoList,
useCameraTakePhoto: false
})
for (const iterator of casePhotoList) {
formData.appendFile('files[]', iterator.tempImagePath);
}
// 2.选择文件后，页面显示选择的文件的本地临时文件，且进行异步上传
// 2.1.返回选定文件的本地文件路径列表，可以作为img标签的src属性显示图片
let tempFilesPath = casePhotoList.map(item => ({
type: item.type ? item.type : 'image', // 文件类型
path: item.tempImagePath, // 文件本地路径
size: item.size ? item.size : '', // 文件大小
}))
let {
tempFileList
} = that.data;
that.setData({
tempFileList: tempFileList.concat(tempFilesPath)
})
} else if (currentTab == 1) {
facePhotoList.push(src)
that.setData({
facePhotoList: facePhotoList,
useCameraTakePhoto: false
})
for (const iterator of [facePhotoList]) {
formData.appendFile('files[]', iterator.tempImagePath);
}
let tempFilesPath = facePhotoList.map(item => ({
type: item.type ? item.type : 'image', // 文件类型
path: item.tempImagePath, // 文件本地路径
size: item.size ? item.size : '', // 文件大小
}))
let {
facetTempFileList
} = that.data;
that.setData({
facetTempFileList: facetTempFileList.concat(tempFilesPath)
})
} else if (currentTab == 3) {
accessoryPhotoList.push(src)
that.setData({
accessoryPhotoList: accessoryPhotoList,
useCameraTakePhoto: false
})
for (const iterator of accessoryPhotoList) {
formData.appendFile('files[]', iterator.tempImagePath);
}
}
let data = formData.getData();
// 2.2.异步上传，发送请求 上传图片
...
},
})
}
},关闭相机
//关闭系统相机页面
closeCamera: function () {
this.setData({
useCamera: false,
useCameraTakePhoto: false,
})
},点击小图片放大功能
// 点击拍照后的图片
changeMinImage(e) {
wx.showLoading({
title: '加载中',
icon: 'loading'
})
let item = e.target.dataset.item;
const that = this;
// 1. 预览分为本地预览和下载预览， 进行判断
if (item.type === 'image' && item.path) {
// 1.1.本地预览，在新页面中全屏预览图片
wx.previewImage({
urls: [item.path], // 需要预览的图片http链接列表 Array.<string>
success() {
wx.hideLoading()
},
fail() {
wx.showToast({
title: '预览失败',
icon: 'none',
duration: 2000
})
}
})
} else {
// 1.2.下载预览，下载文件资源到本地，单次下载允许的最大文件为200MB
wx.downloadFile({
url: `${app.host}order/attachments/${item.store_name}/download`,
header: {
'Content-Type': 'application/json',
'token': '自己的Token'
},
success(res) {
wx.hideLoading()
if (item.type == "video") {
that.setData({
isSrc: true,
src: res.tempFilePath,
})
wx.openVideoEditor({
filePath: res.tempFilePath,
success(res) {}
})
} else {
wx.previewImage({ // 在新页面中全屏预览图片
urls: [res.tempFilePath], // 需要预览的图片http链接列表 Array.<string>
})
}
},
fail() {
wx.showToast({
title: '预览失败',
icon: 'none',
duration: 2000
})
}
})
}
},放大后的图片关闭
// 点击放大后的图片进行关闭
changeMaxImage() {
this.setData({
isSrc: false,
src: {}
})
},到这里就写完了，样式就不多写了，主要的是js实现
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
您可能感兴趣的文章:
相关文章
JavaScript中解决多浏览器兼容性23个问题的快速解决方法
下面小编就为大家带来一篇JavaScript中解决多浏览器兼容性23个问题的快速解决方法。小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2016-05-05
这篇文章主要为大家介绍了前端必会的Webpack优化技巧示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-07-07
这篇文章主要介绍了JS常用加密编码与算法,结合实例形式总结分析了javascript常见的utf8、base64编码及md5、md4、SHA1等算法实现方法,需要的朋友可以参考下2016-12-12
这篇文章主要介绍了es6数据变更同步到视图层的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2019-03-03
这篇文章主要为大家详细介绍了bootstrap警告框示例代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-05-05
发两个小东西，ASP/PHP 学习工具。 用JavaScript写的
发两个小东西，ASP/PHP 学习工具。 用JavaScript写的...2007-04-04
写js时遇到的一些小问题,需要的朋友可以参考下。2010-12-12
这篇文章主要介绍了JavaScript基于面向对象实现的无缝滚动轮播,结合实例形式分析了JavaScript面向对象实现的无缝滚动轮播相关对象定义、初始化及功能实现技巧,需要的朋友可以参考下2020-01-01
这篇文章主要介绍了javascript实现回车键提交表单方法,实例总结了纯javascript与jQuery的实现技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-01-01
string和array作为javascript内置对象,其中许多方法无论是在开发过程中,还是在面试的时候都有机会被面试官问到，下面这篇文章主要给大家介绍了关于JavaScript中Array方法你该知道的正确打开方法，需要的朋友可以参考下2018-09-09
最新评论