介绍
这篇文章主要介绍了H5调用相机拍照并压缩图片的方法,具有一定借鉴价值,需要的朋友可以参考下。希望大家阅读完这篇文章后大有收获。下面让小编带着大家一起了解一下。
整理文档,搜刮出一个H5调用相机拍照并压缩图片的实例代码,稍微整理精简一下做下分享。
<强>背景
最近要做一个编辑的页面,主要功能就是调用相机拍照或者是相册选图并且把照片压缩转base64之后上传到后台服务器,然后服务器返回识别结果。
前端的主要功能点有:
<李> H5如何调用相机
<李> 图片如何压缩
<李> 图片转base64
<强> H5调用相机/相册
调用相机最简单的方法就是使用输入文件(相机)属性:
& lt;输入类型=癴ile"捕捉=相机接受=巴枷?*“祝辞//相机
& lt;输入类型=癴ile"接受=巴枷?*“祝辞//相册 这个种方法兼容性还是有问题的,在iphone手机上可以正常打开相机,但是在安卓手机上点击之后是相机,图库,文件管理器等混合选择项。在网上搜了很多都没有什么好的解决办法,只能继续往下写了…
<强>图片压缩
图片压缩就要用到<代码> FileReader 和<代码> & lt; canvas> 了。
FileReader对象允许Web应用程序异步读取存储在计算机上的文件的内容,使用文件或Blob对象指定要读取的文件或数据。
& lt; canvas>是一个可以使用脚本在其中绘制图形的HTML元素,可以绘制图形和简单的动画。
图片压缩要压缩图片的分辨率和质量,分辨率压缩我这里是设置了图片的最大边为800年,另一边按照图片原有比例缩放,也可以设置图片整体的缩放比例。
var MAX_WH=800;
var=新形象形象();
的形象。onload=function () {
如果(图片。高度比;MAX_WH) {//宽度等比例缩放*=的形象。宽度*=MAX_WH/image.height;
的形象。身高=MAX_WH;
}
如果(图片。宽度比;MAX_WH) {//宽度等比例缩放*=的形象。高度*=MAX_WH/image.width;
的形象。宽度=MAX_WH;
}
}
image.src=https://www.yisu.com/zixun/dataURL;//dataURL通过FileReader获取 然后就是压缩图片的质量了,这里设置压缩了80%,如果设置太小图片就失真了。动态创建& lt; canvas>标签然后压缩图片:
var质量=80;
cvs var=document.createElement(& # 39;帆布# 39;);
cvs。宽度=image.width;
cvs。嗨!=image.height;
var=cvs.getContext上下文(“2 d");
上下文。drawImage(图片,0,0,形象。宽度,image.height);
dataURL=cvs.toDataURL(& # 39;图像/jpeg # 39;,质量/100); 然后就是上传到服务器并展示服务器的结果啦,然而事情并没有那么顺利…ios手机拍照压缩之后图片莫名的旋转了,继续解决问题。
<>强解决ios图片旋转
首先引用exif.js,通过EXIF.getData和EXIF。getTag获取拍照方向信息。
//文件通过输入标签获取
EXIF.getData(文件,函数(){
取向=EXIF.getTag(文件,& # 39;方向# 39;);
}); 下面给出每个方向值对应到iphone手机拍照的含义:
取向描述iphone 3横屏拍摄,此键时家里在左侧,图片相对于原始位置旋转了180度6 iphone竖屏拍摄,此键时家里在下方(正常拿手机的方向),图片相对于原始位置逆时针旋转可90度8 iphone竖屏拍摄,此键时回家在上,方图片相对于原始位置顺时针旋转了90度获取图片的方向信息之后,根据获取到的值作相应的旋转操作。
开关(方向){
例6:
例8:
cvs。宽度=高度;
cvs。身高=宽度;
打破;
}
var=cvs.getContext上下文(“2 d");
开关(方向){//iphone横屏拍摄,此键时家里在左侧
案例3://180度向左旋转
上下文。翻译(宽度、高度);
context.rotate (Math.PI);
打破;//iphone竖屏拍摄,此键时家里在下方(正常拿手机的方向)
例6:
context.rotate (0.5 * Math.PI);
上下文。翻译(0,高度);
打破;//iphone竖屏拍摄,此键时回家在上方
例8://逆时针旋转90度
context.rotate (-0.5 * Math.PI);
上下文。翻译(- width, 0);
打破;
} 然后再上传图片,发现在IOS下图片已经正常了。
下面给出完整代码:
美元(& # 39;输入[类型=文件]& # 39;).change(函数(e) {
var文件=this.files [0];
var mime_type=file.type;
面向var=0;
如果(文件,,/^ \/形象/信息技术(file.type)) {
EXIF.getData(文件,函数(){
取向=EXIF.getTag(文件,& # 39;方向# 39;);
}）;
var=new FileReader读者();
读者。onloadend=function () {
var宽度、高度;
var MAX_WH=800;
var=新形象形象();
的形象。onload=function () {
如果(图片。高度比;MAX_WH) {//宽度等比例缩放*=的形象。宽度*=MAX_WH/image.height;
的形象。身高=MAX_WH;
}
如果(图片。宽度比;MAX_WH) {//宽度等比例缩放*=的形象。高度*=MAX_WH/image.width;
的形象。宽度=MAX_WH;
}//压缩
var质量=80;
cvs var=document.createElement(& # 39;帆布# 39;);
cvs。宽度==image.width宽度;
cvs。身高=身高=image.height;
开关(方向){
例6:
例8:
cvs。宽度=高度;
cvs。身高=宽度;
打破;
}
var=cvs.getContext上下文(“2 d");//解决ios图片旋转问题
开关(方向){//iphone横屏拍摄,此键时家里在左侧
案例3://180度向左旋转
上下文。翻译(宽度、高度);
context.rotate (Math.PI);
打破;//iphone竖屏拍摄,此键时家里在下方(正常拿手机的方向)
例6:
context.rotate (0.5 * Math.PI);
上下文。翻译(0,高度);
打破;//iphone竖屏拍摄,此键时回家在上方
例8://逆时针旋转90度
context.rotate (-0.5 * Math.PI);
上下文。翻译(- width, 0);
打破;
}
上下文。drawImage(图片,0,0,形象。宽度,image.height);
dataURL=cvs.toDataURL(& # 39;图像/jpeg # 39;,质量/100);//获取识别结果
…
}
image.src=https://www.yisu.com/zixun/dataURL;
};
reader.readAsDataURL(文件);
其他}{
alert("只能识别图片!”)
}
});
