需要的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. IE11 全新的F12开发者工具

      我讨厌debug,相信也没多少开发者会喜欢.但是当代码出错之后肯定是要找出问题出在哪里的.不过网页开发的时候遇到 BUG 是一件再正常不过的事情了,我们不能保证自己的代码万无一失,于是使用浏览器的 ...

  2. dos命令行实践

    本篇体验使用dos命令行窗口实现各种操作. □ 打开dos命令行窗口 →点击电脑左下角"开始"按钮→点击"运行"→输入"cmd",按回车,来 ...

  3. Bootstrap 3之美07-插件Collapse、Accordion、Modal、Tab、Tooltip、Alert、Carousel

    类似Page Header, Breadcrumbs, Dropdowns等,都是Bootstrap的组件,是静态的.如果涉及到交互,Bootstrap提供了插件.这些插件包括: ○ 过渡效果: bo ...

  4. cocos2d-x动画加速与减速

    动画是游戏的必定要素之中的一个,在整个游戏过程中,又有着加速.减速动画的需求.以塔防为样例,布塔的时候希望可以将游戏减速,布好塔后,则希望能将游戏加速:当某个怪被冰冻后,移动速度减缓,而其它怪的移动速 ...

  5. linux 字符终端terminal下 ftp的配置和启用

    1. ftp组件一般不是linux的自带组件,在ubuntu 12中,就自带了ftp组件 vsftp,而在redhat 9中,就没有自带需要从安装光盘中或下载相应的ftp的rpm包. ~$ sudo ...

  6. python文件目录操作

    一.python中对文件.文件夹操作时经常用到的os模块和shutil模块常用方法.1.得到当前工作目录,即当前Python脚本工作的目录路径: os.getcwd()2.返回指定目录下的所有文件和目 ...

  7. 【BZOJ】【2286】【SDOI2011】消耗战

    虚树+树形DP Orz ZYF……果然好神…… 建虚树先按dfn排序,再用一个单调栈来维护当前这条[链],往里加边……说实话还没弄懂- - 留个坑吧…… RE的原因:这条链往出退的时候没写top--; ...

  8. HBase入门基础教程之单机模式与伪分布式模式安装（转）

    原文链接:HBase入门基础教程 在本篇文章中,我们将介绍Hbase的单机模式安装与伪分布式的安装方式,以及通过浏览器查看Hbase的用户界面.搭建HBase伪分布式环境的前提是我们已经搭建好了Had ...

  9. @Logback简介

    Ceki Gülcü在Java日志领域世界知名.他创造了Log4J,这个最早的Java日志框架即便在JRE内置日志功能的竞争下仍然非常流行.随后他又着手实现SLF4J这个"简单的日志前端接口 ...

  10. homogeneous clip space and NDC

    CVV  canonical view volume HCS homogeneous clip space NDC nomolized device coordinates pipeline 的 ge ...