Vue网页调用摄像头拍照

文章资料：https://www.cnblogs.com/ljx20180807/p/10839713.html
实际上我们只需要一段代码：

<input ref="file" type="file" accept="image/*" capture="user">

加亿点细节：预览图片、限制图片个数、删除图片、相同图片文件判断、图片大小判断。

预览图片这里使用的是viewer组件。

1.安装依赖

npm install v-viewer

2.配置在man.js中

  import 'viewerjs/dist/viewer.css'import Viewer from 'v-viewer'import Vue from 'vue'Vue.use(Viewer)

3.页面代码

文章资料：https://blog.csdn.net/ccc_cccc_ccc/article/details/106334012

 <template><!-- 新建时可以进行图片的新增和删除。修改时只能展示之前上传的图片，点重新上传会将之前上传的图片清空，之后可以进行重新上传图片的新增和删除 --><div class="img-group" v-if="isInsert"><span class="control-label">上传图片</span><span class="help-block">(建议图片格式为：JPEG/BMP/PNG/GIF，大小不超过5M，最多可上传5张)</span><div class="control-form"><ul class="upload-imgs"><li v-if="imgLen>=5 ? false : true"><inputtype="file"class="upload"@change="addImg"ref="inputer"multipleaccept="image/png, image/jpeg, image/gif, image/jpg"/><a class="add"><i class="iconfont icon-plus"></i><p>点击上传</p></a></li><li v-for="(value, key) in imgs" :key="key"><div class="imgBox"><p class="img"><viewer :images="images"><img :src="getObjectURL(value)" /></viewer><a class="close" @click="delImg(key)">×</a></p><div class="picName">{{value.name}}</div></div></li></ul></div></div><div class="img-group" v-else style="margin-left: 35px;"><span class="control-label">重新上传图片</span><span class="help-block">(重新上传会覆盖之前图片！建议图片格式为：JPEG/BMP/PNG/GIF，大小不超过5M，最多可上传5张)</span><div class="control-form"><ul class="upload-imgs" style="margin: 10px 0 30px 51px;"><li v-if="imgLen>=5 ? false : true"><inputtype="file"class="upload"@change="addImg"ref="inputer"multipleaccept="image/png, image/jpeg, image/gif, image/jpg"/><a class="add"><i class="iconfont icon-plus"></i><p>点击重新上传</p></a></li><template v-if="!isReUpload"><li v-for="(value, key) in reImgs" :key="key"><div class="imgBox"><p class="img"><viewer :images="images"><img :src="value" /></viewer></p></div></li></template><template v-else><li v-for="(value, key) in imgs" :key="key"><div class="imgBox"><p class="img"><viewer :images="images"><img :src="getObjectURL(value)" /></viewer><a class="close" @click="delImg(key)">×</a></p><div class="picName">{{value.name}}</div></div></li></template></ul></div></div></template><script>export default {data() {return {formData: new FormData(),imgs: {},   // 循环生成的li的数据来源imgLen: 0,  // 上传图片的数量isInsert: true, // 判断是否为新增reImgs: [], // 详情传来的img的urlisReUpload: false, // 重新上传images: [], // 详情预览大图数组};},methods: {addImg(event) {this.isReUpload = truethis.reImgs = []let inputDOM = this.$refs.inputer;// 通过DOM取文件数据this.fil = inputDOM.files;let oldLen = this.imgLen;let len = this.fil.length + oldLen;if (len > 5) {alert("最多可上传5张，您还可以上传" + (5 - oldLen) + "张");return false;}for (let i = 0; i < this.fil.length; i++) {let size = Math.floor(this.fil[i].size / 1024);if (size > 5 * 1024 * 1024) {alert("请选择5M以内的图片！");return false;}if (this.fil[i].name in this.imgs) {alert("该文件已上传，请重新选择！")} else {this.imgLen++;this.$set(this.imgs, this.fil[i].name, this.fil[i]);}//解决 input type=”file“ 相同文件change事件只执行一次的问题this.$refs.inputer.value = null;}},getObjectURL(file) {var url = null;if (window.createObjectURL != undefined) {// basicurl = window.createObjectURL(file);} else if (window.URL != undefined) {// mozilla(firefox)url = window.URL.createObjectURL(file);} else if (window.webkitURL != undefined) {// webkit or chromeurl = window.webkitURL.createObjectURL(file);}return url;},delImg(key) {this.$delete(this.imgs, key);this.imgLen--;},
},}</script>
<style  >
.img-group {margin-left: 63px;margin-top: 30px;font-size: 14px;color: #606266;font-weight: 700;.control-label {margin-right: 12px;}.control-form {margin-top: 30px;}}.upload-imgs {margin: 10px 0 30px 22px;overflow: hidden;font-size: 0;}.upload-imgs li {position: relative;width: 168px;height: 188px;font-size: 14px;display: inline-block;padding: 10px;margin-right: 25px;border: 2px dashed #ccc;text-align: center;vertical-align: middle;input {opacity: 0;}}.upload-imgs .add {display: block;background-color: #ccc;color: #ffffff;height: 50px;padding: 10px 0;p {font-size: 20px;line-height: 83px;}}.upload-imgs .add .iconfont {padding: 10px 0;font-size: 40px;}.upload-imgs li .upload {position: absolute;top: 0;bottom: 0;left: 0;right: 0;width: 168px;height: 168px;}.upload-imgs .img {position: relative;width: 144px;height: 144px;line-height: 144px;margin: 0;}.upload-imgs .img img {width: 144px;height: 144px;vertical-align: middle;}.upload-imgs li .img .close {display: block;position: absolute;right: -6px;top: -14px;line-height: 1;font-size: 26px;color: rgb(211, 23, 23);font-weight: 400;}.imgBox {position: relative;}.picName {position: absolute;left: 8px;bottom: -27px;line-height: 1.5;font-size: 14px;max-width: 130px;color: #606266;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}</style>

效果：

修改细节，只需拍一张照片，数量限制为1，使用图标代替按钮。

  <li class="addImage" v-if="imgLen>=1 ? false : true">//隐藏input<inputtype="file"class="upload"@change="addImg"capture="user"ref="inputer"multiplestyle="display:none"accept="image/png, image/jpeg, image/gif, image/jpg"/>//使用iview的相机图标<Icon style="margin-top: 34px;" type="ios-camera" size="66" @click="choiceImg"/>                 </li>

在script中添加方法点击图标调用input。

methods：{
choiceImg(){this.$refs.inputer.dispatchEvent(new MouseEvent('click'))},}

效果：

4.处理图片

处理部分手机拍照图片方向会变为横向的问题。（待做）
查找资料后发现需要转base64，利用Exif获取图片的方向，并进行旋转角度，这样会导致Viewer 无效，因为图片路径变成了base64，其无法解析图片。你可以转回图片文件然后显示。

5.上传图片

5.1 上传

错误记录：文件上传之transformRequest配置导致其他接口错误

根据文章配置后直接调用。

最后效果

页面修改后代码：

    <template> <div class="img-group" v-if="isInsert"><span class="control-label">上传图片</span><span class="help-block">(建议图片格式为：JPEG/BMP/PNG/GIF，大小不超过5M，最多可上传1张)</span><div class="control-form"><ul class="upload-imgs"><li class="addImage" v-if="imgLen>=1 ? false : true"><!-- //隐藏input --><inputtype="file"class="upload"@change="addImg"capture="user"ref="inputer"multiplestyle="display:none"accept="image/png, image/jpeg, image/gif, image/jpg"/><!-- //使用iview的相机图标 --><Icon style="margin-top: 34px;" type="ios-camera" size="66" @click="choiceImg"/>                 </li><li v-for="(value, key) in imgs" :key="key"><div class="imgBox"><p class="img"><viewer :images="images"><img :src="getObjectURL(value)" /></viewer><a class="close" @click="delImg(key)">×</a></p><div class="picName">{{value.name}}</div></div></li></ul></div></div>
</template><script>export default {data() {return {formData: new FormData(),imgs: {},   // 循环生成的li的数据来源imgLen: 0,  // 上传图片的数量isInsert: true, // 判断是否为新增reImgs: [], // 详情传来的img的urlisReUpload: false, // 重新上传images: [], // 详情预览大图数组};},methods: {choiceImg(){this.$refs.inputer.dispatchEvent(new MouseEvent('click'))},addImg(event) {this.isReUpload = truethis.reImgs = []let inputDOM = this.$refs.inputer;// 通过DOM取文件数据this.fil = inputDOM.files;let oldLen = this.imgLen;let len = this.fil.length + oldLen;if (len > 1) {alert("最多可上传1张，您还可以上传" + (1 - oldLen) + "张");return false;}for (let i = 0; i < this.fil.length; i++) {let size = Math.floor(this.fil[i].size / 1024);if (size > 5 * 1024 * 1024) {alert("请选择5M以内的图片！");return false;}if (this.fil[i].name in this.imgs) {alert("该文件已上传，请重新选择！")} else {this.imgLen++;this.$set(this.imgs, this.fil[i].name, this.fil[i]);//上传this.addRecord(this.fil[i])}//解决 input type=”file“ 相同文件change事件只执行一次的问题this.$refs.inputer.value = null;}},getObjectURL(file) {var url = null;if (window.createObjectURL != undefined) {// basicurl = window.createObjectURL(file);} else if (window.URL != undefined) {// mozilla(firefox)url = window.URL.createObjectURL(file);} else if (window.webkitURL != undefined) {// webkit or chromeurl = window.webkitURL.createObjectURL(file);}return url;},delImg(key) {this.$delete(this.imgs, key);this.imgLen--;},addRecord(imgs){console.info(imgs)alert(this.getObjectURL(imgs))var self=thisvar formData=new FormData();// 创建form对象formData.append('userfile',imgs);// 通过append向form对象添加数据,可以通过append继续添加数据 formData.append('name',imgs.name);self.$ajax.POSTFILE("/inspectorAdmin/addImg",formData).then((data)=>{console.log(data)if(data){self.$Message.success('新增成功'); }else{self.$Message.error('新增失败');}})},
},}</script>
<style  >
.img-group {margin-left: 63px;margin-top: 30px;font-size: 14px;color: #606266;font-weight: 700;.control-label {margin-right: 12px;}.control-form {margin-top: 30px;}}.upload-imgs {margin: 10px 0 30px 22px;overflow: hidden;font-size: 0;}.upload-imgs li {position: relative;width: 168px;height: 188px;font-size: 14px;display: inline-block;padding: 10px;margin-right: 25px;border: 2px dashed #ccc;text-align: center;vertical-align: middle;input {opacity: 0;}}.upload-imgs .add {display: block;background-color: #ccc;color: #ffffff;height: 50px;padding: 10px 0;p {font-size: 20px;line-height: 83px;}}.upload-imgs .add .iconfont {padding: 10px 0;font-size: 40px;}.upload-imgs li .upload {position: absolute;top: 0;bottom: 0;left: 0;right: 0;width: 168px;height: 168px;}.upload-imgs .img {position: relative;width: 144px;height: 144px;line-height: 144px;margin: 0;}.upload-imgs .img img {width: 144px;height: 144px;vertical-align: middle;}.upload-imgs li .img .close {display: block;position: absolute;right: -6px;top: -14px;line-height: 1;font-size: 26px;color: rgb(211, 23, 23);font-weight: 400;}.imgBox {position: relative;}.picName {position: absolute;left: 8px;bottom: -27px;line-height: 1.5;font-size: 14px;max-width: 130px;color: #606266;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;}</style>

Vue网页调用摄像头拍照相关推荐

vue中调用摄像头拍照，并把拍照的base64格式转换为file传递后台
需求: 在vue项目中使用摄像头拍摄照片传递,进行上传,如果上传成功可以获取到url链接,进行下一步的操作内容梳理 1.首先进入页面打开摄像头 2.点击手动拍照进行拍摄照片,实时显示拍照效果 3.拿 ...
java 利用网页显示摄像头_web网页调用摄像头拍照
var CameraInit=(function(window,document,undefined){functionMyCamera(videoDom,canvasDom) {this.media ...
vue实现PC端调用摄像头拍照人脸录入、移动端调用手机前置摄像头人脸录入、及图片旋转矫正、压缩上传base64格式/文件格式
PC端调用摄像头拍照上传base64格式到后台,这个没什么花里胡哨的骚操作,直接看代码 (canvas + video) <template><div><!--开启摄像头 ...
HTML5+JavaScript调用摄像头拍照或者摄像
调用摄像头拍照或者摄像有多种方法,之前介绍过两种: HTML5 <input type="file">标签直接调用:https://blog.csdn.net/qq_2 ...
Ionic系列——调用摄像头拍照和选择图库照片功能的实现
2019独角兽企业重金招聘Python工程师标准>>> 1.需求描述最近要做一个功能就是调用摄像头拍照,然后上传照片的功能,或者直接打开图库选择照片然后上传. 2.准备 ①.添加插 ...
android: 调用摄像头拍照
很多应用程序都可能会使用到调用摄像头拍照的功能,比如说程序里需要上传一张图片作为用户的头像,这时打开摄像头拍张照是最简单快捷的.下面就让我们通过一个例子来学习一下,如何才能在应用程序里调用手机的摄 ...
android 7调用摄像头,Android调用摄像头拍照（兼容7.0）
[实例简介] Android调用摄像头拍照(兼容7.0)Demo,原博客文章https://blog.csdn.net/u010356768/article/details/70808162 [实例截 ...
Python:opencv库实现调用摄像头拍照并保存到本地
导入 opencv-python库,复制代码即可运行 import cv2def picture_shoot(image_name='img.png', image_path=r'E:/') -> ...
jquery.webcam.js实现调用摄像头拍照兼容各个浏览器
jquery.webcam.js实现调用摄像头拍照兼容各个浏览器 1.demo 可直接复制使用,需要在环境里运行. 2.所需 js 文件和 swf 控件可在官方博客下载,地址http://www.xa ...