需要的js1

需要的js2

这里主要用到Orientation属性。

Orientation属性说明如下：

旋转角度 参数
0° 1
顺时针90° 6
逆时针90° 8
180° 3

 
<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8">

    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />

    <title>图片上传</title>

    <script type="text/javascript" src="js/jquery-1.8.3.js"></script>

    <script type="text/javascript" src="js/uploadPicture/mobileBUGFix.mini.js" ></script>

    <script type="text/javascript" src="js/uploadPicture/uploadImage.js" ></script>

        <script type="text/javascript" src="js/exif.js" ></script>

</head>

<body>

    <div style="height: 50px; line-height: 50px;text-align: center;border-bottom: 1px solid #171E28;">

            上传图片:

            <input type="file" accept="image/*" id="uploadImage" capture="camera" onchange="selectFileImage(this);" />

        </div>

        <div style="margin-top: 10px;">

            <img alt="preview" src="" id="myImage"/>

        </div>

</body>

</html>  
<script type="text/javascript">

function selectFileImage(fileObj) {

    var file = fileObj.files['0'];

    //图片方向角 added by lzk

    var Orientation = null;  

    if (file) {

        console.log("正在上传,请稍后...");

        var rFilter = /^(image\/jpeg|image\/png)$/i; // 检查图片格式

        if (!rFilter.test(file.type)) {

            //showMyTips("请选择jpeg、png格式的图片", false);

            return;

        }

        // var URL = URL || webkitURL;

        //获取照片方向角属性，用户旋转控制

        EXIF.getData(file, function() {

           // alert(EXIF.pretty(this));

            EXIF.getAllTags(this);

            //alert(EXIF.getTag(this, 'Orientation'));

            Orientation = EXIF.getTag(this, 'Orientation');

            //return;

        });  

        var oReader = new FileReader();

        oReader.onload = function(e) {

            //var blob = URL.createObjectURL(file);

            //_compress(blob, file, basePath);

            var image = new Image();

            image.src = e.target.result;

            image.onload = function() {

                var expectWidth = this.naturalWidth;

                var expectHeight = this.naturalHeight;  

                if (this.naturalWidth > this.naturalHeight && this.naturalWidth > 800) {

                    expectWidth = 800;

                    expectHeight = expectWidth * this.naturalHeight / this.naturalWidth;

                } else if (this.naturalHeight > this.naturalWidth && this.naturalHeight > 1200) {

                    expectHeight = 1200;

                    expectWidth = expectHeight * this.naturalWidth / this.naturalHeight;

                }

                alert(expectWidth+','+expectHeight);

                var canvas = document.createElement("canvas");

                var ctx = canvas.getContext("2d");

                canvas.width = expectWidth;

                canvas.height = expectHeight;

                ctx.drawImage(this, 0, 0, expectWidth, expectHeight);

                alert(canvas.width+','+canvas.height);  

                var base64 = null;

                var mpImg = new MegaPixImage(image);

                    mpImg.render(canvas, {

                        maxWidth: 800,

                        maxHeight: 1200,

                        quality: 0.8,

                        orientation: Orientation

                    });  

                base64 = canvas.toDataURL("image/jpeg", 0.8);  

                //uploadImage(base64);

                $("#myImage").attr("src", base64);

            };

        };

        oReader.readAsDataURL(file);

    }

}

</script>

纯jascript解决手机端拍照、选图后图片被旋转问题的更多相关文章

  1. HTML5手机端拍照上传

    1.accept="image/*" capture="camera" 自动调用手机端拍照功能 accept="image/*" captu ...

  2. 原生js实现响应式轮播图，支持电脑端点击切图，手机端滑动切图

    轮播图的实现原理并不难,但是步骤有些繁琐.最近练习了一个轮播图,大部分是跟着网上的教程写的,然后自己做了一点兼容ie8的修改,加了点击切换图片的特效和手机端的滑动特效,让这个轮播图可以在响应式的网站中 ...

  3. fullpage 单屏高度超过屏幕高度，实现单屏内可以滚动并解决手机端单屏高度不正确的问题

    最近接触了好几次jquery.fullpage.js这个插件,实现整屏的滑动,效果很炫,用fullpage来实现也很简单,但是也碰到了一些问题和大家分享一下 1.单屏高度超过屏幕高度,实现单屏的滑动 ...

  4. megapix-image插件 使用Canvas压缩图片上传 解决手机端图片上传功能的问题

    最近在弄微信端的公众号.订阅号的相关功能,发现原本网页上用的uploadify图片上传功能到手机端有的手机类型上就不能用了,比如iphone,至于为啥我想应该不用多说了吧(uploadify使用fla ...

  5. 关于移动手机端富文本编辑器qeditor图片上传改造

    日前项目需要在移动端增加富文本编辑,上网找了下,大多数都是针对pc版的,不太兼容手机,当然由于手机屏幕小等原因也限制富文本编辑器的众多强大功能,所以要找的编辑器功能必须是精简的. 找了好久,发现qed ...

  6. 手机端file限制只能选择图片、视频、音频，直接打开摄像头拍照或录像

    限制只能选择图片 <input type="file" accept="image/*"> 限制只能选择视频 <input type=&quo ...

  7. JS 插件 fastclick.js 解决手机端click点击延迟

    FastClick 是一个简单,易于使用的JS库用于消除在移动浏览器上触发click事件与一个物理Tap(敲击)之间的300延迟. 对于非移动浏览器不启作用,禁用缩放标签. <meta name ...

  8. jquery photoClip支持手机端,PC端 本地裁剪图片后上传插件

    支持手机,PC最好的是jquery photoClip插件,下载地址&示例:https://github.com/topoadmin/photoClip demo.html 代码: <! ...

  9. MVC 手机端页面 使用标签file 图片上传到后台处理

    最近刚做了一个头像上传的功能,使用的是H5 的界面,为了这个功能搞了半天的时间,找了各种插件,有很多自己都不知道怎么使用,后来只是使用了一个标签就搞定了:如果对样式没有太大的要求我感觉使用这个就足够了 ...

随机推荐

  1. 七问C#关键字const和readonly

    const和readonly经常被用来修饰类的字段,两者有何异同呢? const 1.声明const类型变量一定要赋初值吗? --一定要赋初值 public class Student { publi ...

  2. mORMot

    mORMot GITHUB: https://github.com/synopse/mORMot Synopse mORMot framework An Open Source Client-Serv ...

  3. 由于拷贝的文件太大，不可能一直开着SHELL,所以让SCP后台运行

    原文地址: http://blog.itpub.net/90618/viewspace-750822/ 1:开一个终端,scp命令运行后,输入密码让其拷贝 # scp chris@221.179.1. ...

  4. [self removeAllSubviews]; // 删除所有子视图(包括 selfl.view) 所以，要慎用

    [self removeAllSubviews];  //删除所有子视图(包括 selfl.view)   所以,要慎用

  5. CHM编写软件

    工具选择 1.         HTML编辑工具:就是用什么软件写文档的问题.一直都是做.NET开发,所以选择HTML编辑也大都在MS阵营里选.主要有以下几种HTML编辑器. (1)       Dr ...

  6. java int类型转换成String ， 不足10位 在前面补0

    String.format("%010d", 25); 0代表前面要补的字符 10代表字符串长度 d表示参数为整数类型 String s = "Hello World!& ...

  7. Robots协议（爬虫协议、机器人协议）

    Robots协议(也称为爬虫协议.机器人协议等)的全称是“网络爬虫排除标准”(Robots Exclusion Protocol),网站通过Robots协议告诉搜索引擎哪些页面可以抓取,哪些页面不能抓 ...

  8. @JVM中的几种垃圾收集算法

    标记-清除(Mark-Sweep) 算法分为"标记"和"清除"两个阶段:首先标记出所有需要回收的对象,在标记完成后统一回收掉所有被标记的对象(没有与GC Roo ...

  9. mysql数据库查询优化

    上两周一直想办法提高查询速度,取得一点效果,解决了部分问题,记下来以便将来自己查看. 由于公司没有专门的DBA,我自己对mysql数据库也不是很熟悉,而且这个JAVA开发的网络审计系统的管理系统,是经 ...

  10. JDBC具体解释（2）

    1.载入驱动程序. 注冊驱动程序有多方法,Class.forName();是一种显式地载入.当一个驱动程序类被Classloader装载后,在溶解的过程中,DriverManager会注冊这个驱动类的 ...