需要的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. SqlServer收缩日志文件

    通过收缩的方法可以释放所占空间. 第一步:将数据库的模式调整为简单模式 右击数据库名->'属性'->'选项'->恢复模式改成'简单'->点'确定'按钮. 第二步:收缩文件 右键 ...

  2. 基于springboot的spring JSR validation 后台参数验证

    springboot集成JSR参数校验: 1. 导入maven <dependency> <groupId>org.springframework.boot</group ...

  3. jQuery操作字符串

    var str = "我有一头小毛驴,我从来也不骑";   1.打印出某索引位置上的字符 //结果:毛 alert(str.charAt(5));   2.打印出某索引位置上的Un ...

  4. iOS开源控件库收集

    下拉刷新 将数据保存至keyRing 简单的模板引擎,用来生成html OmniGroup 这个其实不是类库,是一个Cocoa的Recipe CocoaPods 为XCode project提供一个类 ...

  5. ImageView 设置图片来自：http://blog.csdn.net/lincyang/article/details/6562163

    android doc中是这样描述的: public void setImageResource (int resId) 这是其中的一个方法,参数resld是这样: ImageView.setImag ...

  6. 0x80070570 文件或目录损坏且无法读取 CHKDSK 修复方法

    错误 0x80070570: 文件或目录损坏且无法读取. 不要太担心是出现了磁盘坏道,也许只是小小的存储问题.解决方法很简单,用chsdsk命令即可. 方法如下: 开始--运行--输入cmd--输入c ...

  7. 算法：插入排序（Insertion Sort）

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...

  8. 技术交流：DDD在企业开发的案例分享

    背景 因为工作上的原因,这次技术交流准备的不够充分,晚上通宵写的演示代码,不过整个过程还是收获蛮大的,具体如下: 对原子操作有了更深入的了解,自己写的无锁循环队列(有点类似 RingBuffer)终于 ...

  9. 一个自带简易数据集的模拟线性分类器matlab代码——实验训练

      %%%% Tutorial on the basic structure of using a planar decision boundary %%%% to divide a collecti ...

  10. 进程外Session保存和全局文件错误捕获

    Session深入学习,进程外的Session 当用户登入页面跳转时候,我们会将用户登录信息保存在服务端一个键值对的Session(Session池)中.那么Session池又是在哪里呢? 它最终默认 ...