梳理文本文档，搜刮出1个H5启用照相机照相并缩小照片的案例编码，略微梳理精简1下做下共享。
情况
近期要做1个h5的网页页面，关键作用便是启用照相机照相或是相册选图而且把相片缩小转base64以后提交到后台管理服务器，随后服务器回到鉴别結果。
前端开发的关键作用点有：
H5启用照相机/相册
启用照相机最简易的方式便是应用input file[camera]特性：
<input type="file" capture=camera accept="image/*">//照相机 <input type="file" accept="image/*">//相册
这个种方式适配性還是有难题的，在iphone手机上上能够一切正常开启照相机，可是在安卓系统手机上上点一下以后是照相机、图库、文档管理方法器等混和挑选项。在网络上搜了许多都沒有甚么好的处理方法，只能再次往下写了。。。
照片缩小
照片缩小就要用到FileReader和<canvas>了。
FileReader目标容许Web运用程序流程多线程载入储存在测算机上的文档的內容，应用File或Blob目标特定要载入的文档或数据信息。
<canvas>是1个可使用脚本制作在这其中绘图图型的HTML元素，能够绘图图型和简易的动漫。
照片缩小要缩小照片的辨别率和品质，辨别率缩小我这里是设定了照片的最大边为800，另外一边依照照片原来占比放缩，还可以设定照片总体的放缩占比。
var MAX_WH=800;
var image=new Image();
image.onload=function () {
if(image.height > MAX_WH) {
// 宽度等占比放缩 *=
image.width *= MAX_WH/ image.height;
image.height = MAX_WH;
}
if(image.width > MAX_WH) {
// 宽度等占比放缩 *=
image.height *= MAX_WH/ image.width;
image.width = MAX_WH;
}
}
image.src=dataURL;//dataURL根据FileReader获得
随后便是缩小照片的品质了，这里设定缩小了80%，假如设定很小照片就失真了。动态性建立<canvas>标识随后缩小照片：
var quality=80;
var cvs = document.createElement('canvas');
cvs.width = image.width;
cvs.heigh = image.height;
var context=cvs.getContext("2d");
context.drawImage(image, 0, 0,image.width, image.height);
dataURL = cvs.toDataURL('image/jpeg', quality/100);
随后便是提交到服务器并展现服务器的結果啦，但是事儿并沒有那末圆满。。。ios手机上照相缩小以后照片莫名的转动了，再次处理难题。
处理IOS照片转动
最先引入exif.js，根据EXIF.getData和EXIF.getTag获得照相方位信息内容。
//file根据input标识获得
EXIF.getData(file,function(){
orientation=EXIF.getTag(file,'Orientation');
});
下面得出每一个orientation值对应到iphone手机上照相的含意：
switch (orientation) {
case 6:
case 8:
cvs.width = height;
cvs.height = width;
break;
}
var context=cvs.getContext("2d");
switch(orientation){
//iphone横屏拍攝，此时home键在左边
case 3:
// 180度向左转动
context.translate(width, height);
context.rotate(Math.PI);
break;
//iphone竖屏拍攝，此时home键在正下方(一切正常擅长机的方位)
case 6:
context.rotate(0.5 * Math.PI);
context.translate(0, -height);
break;
//iphone竖屏拍攝，此时home键在上方
case 8:
// 逆时针转动90度
context.rotate(-0.5 * Math.PI);
context.translate(-width, 0);
break;
}
随后再提交照片，发如今IOS下照片早已一切正常了。
下面得出详细编码：
$('input[type=file]').change(function(e) {
var file = this.files[0];
var mime_type=file.type;
var orientation=0;
if (file && /^image\//i.test(file.type)) {
EXIF.getData(file,function(){
orientation=EXIF.getTag(file,'Orientation');
});
var reader = new FileReader();
reader.onloadend = function () {
var width,height;
var MAX_WH=800;
var image=new Image();
image.onload=function () {
if(image.height > MAX_WH) {
// 宽度等占比放缩 *=
image.width *= MAX_WH / image.height;
image.height = MAX_WH;
}
if(image.width > MAX_WH) {
// 宽度等占比放缩 *=
image.height *= MAX_WH / image.width;
image.width = MAX_WH;
}
//缩小
var quality=80;
var cvs = document.createElement('canvas');
cvs.width = width = image.width;
cvs.height =height = image.height;
switch (orientation) {
case 6:
case 8:
cvs.width = height;
cvs.height = width;
break;
}
var context=cvs.getContext("2d");
//处理ios照片转动难题
switch(orientation){
//iphone横屏拍攝，此时home键在左边
case 3:
// 180度向左转动
context.translate(width, height);
context.rotate(Math.PI);
break;
//iphone竖屏拍攝，此时home键在正下方(一切正常擅长机的方位)
case 6:
context.rotate(0.5 * Math.PI);
context.translate(0, -height);
break;
//iphone竖屏拍攝，此时home键在上方
case 8:
// 逆时针转动90度
context.rotate(-0.5 * Math.PI);
context.translate(-width, 0);
break;
}
context.drawImage(image, 0, 0,image.width, image.height);
dataURL = cvs.toDataURL('image/jpeg', quality/100);
//获得鉴别結果
...
}
image.src=dataURL;
};
reader.readAsDataURL(file);
}else{
alert("只能鉴别照片！")
}
});
以上便是本文的所有內容，期待对大伙儿的学习培训有一定的协助，也期待大伙儿多多适用脚本制作之家。
Copyright © 2002-2020 小游戏源代码_互动小游戏微信_自制小游戏_html5游戏_制作游戏大概多少钱 版权所有 （网站地图） 粤ICP备10235580号