h5摄像头拍照上传php,H5调用摄像头拍照上传
图片描述
:src="item"
alt
style="width:100px;height:100px;border:1px solid #ccc;display: inline-block;"
/>
import $ from "jquery";
import Exif from "exif-js";
import { stringify } from "querystring";
export default {
data() {
return {
headerImage: "",
picValue: "",
imgList: []
};
},
created() {},
mounted() {
$(document).ready(function() {
$("#my-img").click(function() {
$("#upload").click();
});
});
},
methods: {
upload(e) {
let files = e.target.files || e.dataTransfer.files;
if (!files.length) return;
this.picValue = files[0];
this.imgPreview(this.picValue);
},
imgPreview(file) {
let self = this;
let Orientation;
//去获取拍照时的信息,解决拍出来的照片旋转问题
Exif.getData(file, function() {
Orientation = Exif.getTag(this, "Orientation");
});
// 看支持不支持FileReader
if (!file || !window.FileReader) return;
if (/^image/.test(file.type)) {
// 创建一个reader
let reader = new FileReader();
// 将图片2将转成 base64 格式
reader.readAsDataURL(file);
// 读取成功后的回调
reader.onloadend = function() {
let result = this.result;
let img = new Image();
img.src = result;
//判断图片是否大于100K,是就直接上传,反之压缩图片
// if (this.result.length <= (100 * 1024)) {
// self.headerImage = this.result;
// self.postImg();
// }else {
img.onload = function() {
let data = self.compress(img, Orientation);
self.headerImage = data;
if (self.imgList.length
self.imgList.push(self.headerImage);
console.log(self.imgList, "list");
} else {
alert("上传照片不得大于9张");
}
self.postImg(self.picValue);
};
// }
};
}
},
postImg(file) {
// 这里写接口
console.log(file,'file');
this.$apiFetch.update('web.oss.upload',{ file:file}).then((data) => {
console.log(data,'adta')
}).catch((err) => {
console.log(err)
})
},
rotateImg(img, direction, canvas) {
//最小与最大旋转方向,图片旋转4次后回到原方向
const min_step = 0;
const max_step = 3;
if (img == null) return;
//img的高度和宽度不能在img元素隐藏后获取,否则会出错
let height = img.height;
let width = img.width;
let step = 2;
if (step == null) {
step = min_step;
}
if (direction == "right") {
step++;
//旋转到原位置,即超过最大值
step > max_step && (step = min_step);
} else {
step--;
step
}
//旋转角度以弧度值为参数
let degree = (step * 90 * Math.PI) / 180;
let ctx = canvas.getContext("2d");
switch (step) {
case 0:
canvas.width = width;
canvas.height = height;
ctx.drawImage(img, 0, 0);
break;
case 1:
canvas.width = height;
canvas.height = width;
ctx.rotate(degree);
ctx.drawImage(img, 0, -height);
break;
case 2:
canvas.width = width;
canvas.height = height;
ctx.rotate(degree);
ctx.drawImage(img, -width, -height);
break;
case 3:
canvas.width = height;
canvas.height = width;
ctx.rotate(degree);
ctx.drawImage(img, -width, 0);
break;
}
},
compress(img, Orientation) {
let canvas = document.createElement("canvas");
let ctx = canvas.getContext("2d");
//瓦片canvas
let tCanvas = document.createElement("canvas");
let tctx = tCanvas.getContext("2d");
let initSize = img.src.length;
let width = img.width;
let height = img.height;
//如果图片大于四百万像素,计算压缩比并将大小压至400万以下
let ratio;
if ((ratio = (width * height) / 4000000) > 1) {
console.log("大于400万像素");
ratio = Math.sqrt(ratio);
width /= ratio;
height /= ratio;
} else {
ratio = 1;
}
canvas.width = width;
canvas.height = height;
// 铺底色
ctx.fillStyle = "#fff";
ctx.fillRect(0, 0, canvas.width, canvas.height);
//如果图片像素大于100万则使用瓦片绘制
let count;
if ((count = (width * height) / 1000000) > 1) {
console.log("超过100W像素");
count = ~~(Math.sqrt(count) + 1); //计算要分成多少块瓦片
// 计算每块瓦片的宽和高
let nw = ~~(width / count);
let nh = ~~(height / count);
tCanvas.width = nw;
tCanvas.height = nh;
for (let i = 0; i
for (let j = 0; j
tctx.drawImage(
img,
i * nw * ratio,
j * nh * ratio,
nw * ratio,
nh * ratio,
0,
0,
nw,
nh
);
ctx.drawImage(tCanvas, i * nw, j * nh, nw, nh);
}
}
} else {
ctx.drawImage(img, 0, 0, width, height);
}
//修复ios上传图片的时候 被旋转的问题
if (Orientation != "" && Orientation != 1) {
switch (Orientation) {
case 6: //需要顺时针(向左)90度旋转
this.rotateImg(img, "left", canvas);
break;
case 8: //需要逆时针(向右)90度旋转
this.rotateImg(img, "right", canvas);
break;
case 3: //需要180度旋转
this.rotateImg(img, "right", canvas); //转两次
this.rotateImg(img, "right", canvas);
break;
}
}
//进行最小压缩
let ndata = canvas.toDataURL("image/jpeg", 0.1);
console.log("压缩前:" + initSize);
console.log("压缩后:" + ndata.length);
console.log(
"压缩率:" + ~~((100 * (initSize - ndata.length)) / initSize) + "%"
);
tCanvas.width = tCanvas.height = canvas.width = canvas.height = 0;
return ndata;
},
delimg(index) {
for (let i = 0; i
if (i == index) {
this.imgList.splice(index, 1); //删除第index个元素
}
}
console.log(this.imgList, "imgList2del");
}
}
};
* {
margin: 0;
padding: 0;
}
#upload {
display: none;
}
.show {
width: 100px;
height: 100px;
overflow: hidden;
position: relative;
border-radius: 50%;
border: 1px solid #d5d5d5;
}
.picture {
width: 100%;
height: 100%;
overflow: hidden;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
}
ul > li {
width: 120px;
padding: 5px;
display: inline-block;
position: relative;
.delimg {
width: 5px;
height: 5px;
position: absolute;
top: 0;
right: 10px;
}
}
#my-img {
width: 5rem;
}
h5摄像头拍照上传php,H5调用摄像头拍照上传相关推荐
- vue中如何调用ios摄像头_如何使用Vue2.0调用摄像头进行拍照
这次给大家带来如何使用Vue2.0调用摄像头进行拍照,使用Vue2.0调用摄像头进行拍照的注意事项有哪些,下面就是实战案例,一起来看一下. import {Exif} from './exif.js' ...
- 硬触发控制相机拍照matlab代码,使用matlab调用摄像头拍照并发到邮箱
之前在网上看到有用matlab调用摄像头的,也有用matlab发送电子邮件的,所以突发奇想,何不将这两者结合起来,即使用matlab先调用摄像头拍照,再将照片发到邮箱里面,如果能将程序编译成exe文件 ...
- 摄像头自建html直播,html5调用摄像头实现拍照
html5调用摄像头实现拍照 拍照 var video=document.getElementById("video"); var context=canvas.getContex ...
- python打开摄像头获取图片_Python基于opencv调用摄像头获取个人图片的实现方法
接触图像领域的应该对于opencv都不会感到陌生,这个应该算是功能十分强劲的一个算法库了,当然了,使用起来也是很方便的,之前使用Windows7的时候出现多该库难以安装成功的情况,现在这个问题就不存在 ...
- android intent拍照,Android通过Intent方式调用相机拍照取得图片
Android通过Intent方式调用相机拍照取得图片 AndroidManifest.XML 权限设置: XML布局设置: 代码: public classMainActivityextendsAp ...
- vue移动端页面调用手机拍照_vue实现PC端调用摄像头拍照、移动端调用手机前置摄像头人脸录入、及图片旋转矫正、压缩上传base64格式/文件格式...
export default { () { return {} }, methods: { # // 压缩图片 and 旋转角度纠正 下方代码 # 需要自行去掉 个人只作为着色效果加上 compres ...
- h5前端调用android拍照功能,H5中,嵌入式webview中,调用摄像头拍照功能的实现
参考资料: 1.https://github.com/robnyman/robnyman.github.com/tree/master/camera-api[老外写的demo] 2.https://w ...
- HTML5+JavaScript调用摄像头拍照或者摄像
调用摄像头拍照或者摄像有多种方法,之前介绍过两种: HTML5 <input type="file">标签直接调用:https://blog.csdn.net/qq_2 ...
- js 如何调用摄像头拍照
今天业务逻辑需要人脸验证,需要通过调用摄像头获取人脸来调用接口做对比,所以学习了一下js关于调用摄像头拍照.主要通过video调用摄像头和canvas截取画面. 话不多说直接上代码: <!DOC ...
- 织梦后台上传文章的php文件是那个,如何在织梦文章中上传视频及调用视频
在上一篇文章中,我弄好了zblog如何在文章中上传视频和调用视频,那么因为我有很多个站,所以,这篇文章研究一下如何在织梦系统的文章中进行上传视频和调用视频,上传视频的话,一般推荐直接FTP传到自己的服 ...
最新文章
- C# 实现HTTP不同方法的请求示例
- django处理静态文件
- coxphfit+matlab,Cox Proportional Hazards Model
- 阿里平头哥研发专用 SoC 芯片;部分 MacBook Pro 被禁止上飞机;VS Code 1.37 发布 | 极客头条...
- python中的变量的学习
- linux教程,linux视频教程,linux…
- MIKE水动力笔记6_如何自己制作实测数据的时间序列文件dfs0
- 系统架构师论文-图书馆网络应用体系安全设计
- 1-1-5、行为型设计模式
- 学会计学java,Java 属于以下哪种语言?_学小易找答案
- android usb 流程
- 电脑的ppt打不开计算机二级,打不开电脑中的ppt文件并提示访问出错的解决方法...
- android ellipsize 属性详解
- Linux中Uboot详解
- 领域建模的思想和方法
- [图文讲解]强大的谷歌搜索技巧,百度360搜狗什么的就是渣渣
- MySQL优化:批量插入大数据4种实用、讲究方案的测试
- 金证股份-Java开发工程师招聘(中高级)
- 利用 MQL5 面向对象编程法编写“EA 交易“
- MySql主从复制实战及排坑说明