需要的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. python类型比较的3种方式(转)

    通过types模块的类成员来判断,其实所有python中的类型都是这个types模块中类型的实例. import types type(x) is types.IntType # 判断是否int 类型 ...

  2. 【我所认知的BIOS】—&gt; uEFI AHCI Driver(5) — 第一个protocol最终要開始安装了

    [我所认知的BIOS]-> uEFI AHCI Driver(5) - 第一个protocol最终要開始安装了 LightSeed 4/28/2014 文章对EFI_DRIVER_BINDING ...

  3. ParseFloat有超长的小数位数的解决

    描述一下sum=parseFloat(num1)+parseFloat(num2),这个个sum=113.32000000000002,最后用了个Math.round(sum* 100)/100,解决 ...

  4. OllyDbg 使用笔记 （十二）

    OllyDbg 使用笔记 (十二) 參考 书:<加密与解密> 视频:小甲鱼 解密系列 视频 演示样例程序下载地址:http://pan.baidu.com/s/1eQiV6aI 安装好程序 ...

  5. warning,C4996,sprintf,deprecated,C4996,strcpy,C4996,strcat

    在vs2003, vs2005中用sprintf 会出现warning C4996: 'sprintf' was declared deprecated或warning C4996: 'strcpy' ...

  6. Tomcat与Gzip与缓存

    国内私募机构九鼎控股打造APP,来就送 20元现金领取地址:http://jdb.jiudingcapital.com/phone.html内部邀请码:C8E245J (不写邀请码,没有现金送)国内私 ...

  7. linux-修改时区时间

    所有笔记基于-CentOS release 6.8 (Final) ntpdate 202.120.2.101 同步上海时间 cp -f /usr/share/zoneinfo/Asia/Shangh ...

  8. 修改后无警告全面支持non-ARC以及ARC的OpenUDID

    OpenUDID Open source initiative for a universal and persistent UDID solution for iOS. 首创的给iOS提供设备唯一标 ...

  9. coursera课程Text Retrieval and Search Engines之Week 4 Overview

    Week 4 OverviewHelp Center Week 4 On this page: Instructional Activities Time Goals and Objectives K ...

  10. bzoj 1565 [NOI2009]植物大战僵尸 解题报告

    1565: [NOI2009]植物大战僵尸 Time Limit: 10 Sec  Memory Limit: 64 MBSubmit: 2161  Solved: 1000[Submit][Stat ...