介绍
这篇文章给大家分享的是有关用exfe。js和帆布如何解决移动端IOS拍照上传图片翻转问题的内容。小编觉得挺实用的,因此分享给大家做个参考。一起跟随小编过来看看吧。
记得我初入前端差不多一年,公司做了一个应用,有上传头像功能,当时这个项目不是我在负责,测试的时候发现苹果用户拍照上传头像会翻转,当时几个前端的同学捯饬了一下午也没解决,结果问题转到我这里,还有半个小时下班;当时也是一脸懵逼,首先想到的是,这怎么判断它是否翻转了呢?安卓没问题啊,有些苹果手机相册里面的图片也没问题啊,js能有这种功能判断吗?上网查资料,果不其然,有!那就是exfe。js,继续研究,此时组长姐姐已经买好晚餐,老板也来慰问,最后弄到晚上9点多,算是解决了。
时隔两年,昨天又遇到这个问题,已经离开上家公司一年半了,现公司做一个万圣节活动,里面也是上传图片,合成鬼脸图,早早两天前已经做好发给项目经理(我们这边是远程,少许几个开发者),晚上快下班时,项目经理发消息”ios图片翻转,解决一下,今晚要上线,加个班”,心里一万个草泥马奔腾而过,1是我忘了ios有这个问题,2是已经发给你2天了,你快下班的时候跟我说有问题,加个班!我晚上安排要推掉!还是无偿!没有慰问餐,也没有歉意,还是很好意思的加个班,还是苦笑一声回复,“好吧,下次提前测一下”,这回毕竟遇见过,处理起来比较快,7点多搞定。后续又有什么部署的问题,不是我的问题了,又是快9点了。
只是几乎类似的场景,感慨一下。
上代码
html部分
& lt;输入类型=癴ile"接受=巴枷?*”;id=皍ploadImage"捕捉=癱amera">//获取照片方向角属性,用户旋转控制
EXIF。getData(文件,函数(){
EXIF.getAllTags(这个);
取向=EXIF。getTag(& # 39;方向# 39;);
console.log(方向);
}); 取向的值有1、3、6、8之类的,分别代表0°、180°,顺时针90°,逆时针90°
当我们知道了图片的旋转角度,我们就可以用帆布来处理他们了,最后得到我们想要的结果,这里摘抄了网上一段代码,如果有特殊功能,那就要自己写一些逻辑了,也就是判断角度,判断操作系统,然后用帆布重新绘制,生成base64,最后对dom的操作,显示图片。
上代码
函数selectFileImage (fileObj) {
var文件=fileObj.files [& # 39; 0 & # 39;];//图片方向角
面向var=零;
如果(文件){//获取照片方向角属性,用户旋转控制
EXIF。getData(文件,函数(){
EXIF.getAllTags(这个);
取向=EXIF。getTag(& # 39;方向# 39;);
console.log(方向)
}）;
var:山岳=new FileReader ();
山岳女神。onload=function (e) {
var=新形象形象();
的形象。src=https://www.yisu.com/zixun/e.target.result;
的形象。onload=function () {
var expectWidth=this.naturalWidth;
var expectHeight=this.naturalHeight;
如果这一点。naturalWidth>。naturalHeight & &。naturalWidth> 800) {
expectWidth=800;
expectHeight=expectWidth *。naturalHeight/this.naturalWidth;
如果(这其他}。naturalHeight>。naturalWidth & &。naturalHeight> 1200) {
expectHeight=1200;
expectWidth=expectHeight *。naturalWidth/this.naturalHeight;
}
画布var=document.createElement(“画布”);
var ctx=canvas.getContext (2 d);
画布。宽度=expectWidth;
画布。身高=expectHeight;
ctx。drawImage (0, 0, expectWidth expectHeight);
var base64=零;//修复ios
如果(navigator.userAgent.match (/iphone/i)) {
console.log (“iphone”);//如果方向角不为1,都需要进行旋转
如果(取向!=" " & &取向!=1){
alert('旋转处理”);
开关(方向){
案例6://需要顺时针(向左)90度旋转
rotateImg(‘左’,这帆布);
打破;
例8://需要逆时针(向右)90度旋转
rotateImg(“正确”的,这帆布);
打破;
案例3://需要180度旋转
rotateImg(“正确”的,这帆布);//转两次
rotateImg(“正确”的,这帆布);
打破;
}
}
base64=画布。toDataURL(“图像/jpeg ", 1);
}else if (navigator.userAgent.match (/Android/我)){//修复Android
var编码器=new JPEGEncoder ();
base64=encoder.encode (ctx)。getImageData (0, 0, expectWidth expectHeight), 80);
其他}{
如果(取向!=" " & &取向!=1){
开关(方向){
案例6://需要顺时针(向左)90度旋转
rotateImg(‘左’,这帆布);
打破;
例8://需要逆时针(向右)90度旋转
rotateImg(“正确”的,这帆布);
打破;
案例3://需要180度旋转
rotateImg(“正确”的,这帆布);//转两次
rotateImg(“正确”的,这帆布);
打破;
}
}
base64=画布。toDataURL(“图像/jpeg ", 1);
}
$(" #模板”)。attr (" src ", base64);
};
};
oReader.readAsDataURL(文件);
}
}//对图片旋转处理
函数rotateImg (img、方向、帆布){//最小与最大旋转方向,图片旋转4次后回到原方向
var min_step=0;
var max_step=3;
如果(img==null)返回;//img的高度和宽度不能在img元素隐藏后获取,否则会出的错
var高度=img.height;
var宽度=img.width;//var一步=img.getAttribute(步骤);
var一步=2;
如果(步骤==null) {
一步=min_step;
}
如果(==罢贰钡姆较?{
步+ +;//旋转到原位置,即超过最大值
一步> max_step & &(步骤=min_step);
其他}{
一步,;
一步
