iphone手机html5上传图片方向问题解决

golden_hamster 发布于2019-08-19 17:27 / 2830人阅读

摘要：用编写图片裁切上传，在手机上可能会遇到图片方向错误问题，在此把解决方法和大家分享一下，用到了的和，如果还没有接触的同学，先了解一下其方法。

用html5编写图片裁切上传，在iphone手机上可能会遇到图片方向错误问题，在此把解决方法和大家分享一下，
用到了html5的 FileReader和Canvas，如果还没有接触的同学，先了解一下其方法。

 //此方法为file input元素的change事件
 function change(){
    var file = this.files[0];
    var orientation;
    //EXIF js 可以读取图片的元信息  https://github.com/exif-js/exif-js
    EXIF.getData(file,function(){
        orientation=EXIF.getTag(this,"Orientation");
    });
    var reader = new FileReader();
    reader.onload = function(e) {   
        getImgData(this.result,orientation,function(data){
            //这里可以使用校正后的图片data了 
        }); 
    }
    reader.readAsDataURL(file);
}

// @param {string} img 图片的base64
// @param {int} dir exif获取的方向信息
// @param {function} next 回调方法，返回校正方向后的base64
function getImgData(img,dir,next){
  var image=new Image();
  image.onload=function(){
    var degree=0,drawWidth,drawHeight,width,height;
    drawWidth=this.naturalWidth;
    drawHeight=this.naturalHeight;
    //以下改变一下图片大小
    var maxSide = Math.max(drawWidth, drawHeight);
    if (maxSide > 1024) {
        var minSide = Math.min(drawWidth, drawHeight);
        minSide = minSide / maxSide * 1024;
        maxSide = 1024;
        if (drawWidth > drawHeight) {
            drawWidth = maxSide;
            drawHeight = minSide;
        } else {
            drawWidth = minSide;
            drawHeight = maxSide;
        }
    }
    var canvas=document.createElement("canvas");
    canvas.width=width=drawWidth;
    canvas.height=height=drawHeight; 
    var context=canvas.getContext("2d");
    //判断图片方向，重置canvas大小，确定旋转角度，iphone默认的是home键在右方的横屏拍摄方式
    switch(dir){
       //iphone横屏拍摄，此时home键在左侧
        case 3:
            degree=180;
            drawWidth=-width;
            drawHeight=-height;
            break;
        //iphone竖屏拍摄，此时home键在下方(正常拿手机的方向)
        case 6:
            canvas.width=height;
            canvas.height=width; 
            degree=90;
            drawWidth=width;
            drawHeight=-height;
            break;
        //iphone竖屏拍摄，此时home键在上方
        case 8:
            canvas.width=height;
            canvas.height=width; 
            degree=270;
            drawWidth=-width;
            drawHeight=height;
            break;
    }
    //使用canvas旋转校正
    context.rotate(degree*Math.PI/180);
    context.drawImage(this,0,0,drawWidth,drawHeight);
    //返回校正图片
    next(canvas.toDataURL("image/jpeg",.8));
 }
  image.src=img;
}

云服务器 GPU云服务器 html5+图片上传图片上传html5 手机端上传图片手机网站上传图片

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/78531.html

html5 上传本地图片处理各种问题

摘要：原文还是在简书上上传本地图片处理各种问题这是最近给公司写一个项目，项目要求大概是这样子上传手机本地图片，然后裁剪后加的需求能够旋转图片，用于裁剪后面加的需求填写各种文字，选择颜色，之后把文字和个相关的图片，水印到裁剪的图片上，上传服务器生成原文还是在简书上： html5 上传本地图片处理各种问题这是最近给公司写一个项目，项目要求大概是这样子：1.上传手机本地图片，然后裁剪（后加的需...

iOS122 2019-08-19 17:16 评论0 收藏0
html5 上传本地图片处理各种问题

摘要：原文还是在简书上上传本地图片处理各种问题这是最近给公司写一个项目，项目要求大概是这样子上传手机本地图片，然后裁剪后加的需求能够旋转图片，用于裁剪后面加的需求填写各种文字，选择颜色，之后把文字和个相关的图片，水印到裁剪的图片上，上传服务器生成原文还是在简书上： html5 上传本地图片处理各种问题这是最近给公司写一个项目，项目要求大概是这样子：1.上传手机本地图片，然后裁剪（后加的需...

Taste 2019-08-01 14:59 评论0 收藏0
移动端图片上传旋转、压缩的解决方案

摘要：上传的文件经过就可以实现预览图片了，这方面不清楚的可以查看进阶系列文件上传下载旋转旋转需要用到的方法。前言在手机上通过网页 input 标签拍照上传图片，有一些手机会出现图片旋转了90度d的问题，包括 iPhone 和个别三星手机。这些手机竖着拍的时候才会出现这种问题，横拍出来的照片就正常显示。因此，可以通过获取手机拍照角度来对照片进行旋转，从而解决这个问题。 Orientatio...

blair 2019-08-20 17:38 评论0 收藏0