曾写过在前端把图片按比例压缩不失真上传服务器的前端和后台，可惜没有及时做总结保留代码，只记得js利用了base64位压缩和Exif.js进行图片处理，还有其中让我头疼的ios拍照上传后会倒置等诸多问题，当时也是在看了网上的各种代码后才有思路进行编写，希望留下一些大佬的代码在以后小弟我方便学习

<!DOCTYPE html>
<html lang="en">
 
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
 
<body>
    <div>
        <img src="imgzip.jpg" alt="" width="350">
        <img alt="" id="transform">
    </div>
    <script>
        /**
 * 图片压缩，默认同比例压缩
 * @param {Object} path
 *   pc端传入的路径可以为相对路径，但是在移动端上必须传入的路径是照相图片储存的绝对路径
 * @param {Object} obj
 *   obj 对象 有 width， height， quality(0-1)
 * @param {Object} callback
 *   回调函数有一个参数，base64的字符串数据
    quality 图片缩放比例0-1 越大越清晰
 */
        // 调用函数处理图片 　　　　　　　　　　　　　　　　
        dealImage("imgzip.jpeg", {
            // 注意：在pc端可以用绝对路径或相对路径，移动端最好用绝对路径
            // width: 1000,
            quality: 0.5
        }, function (base) {
            document.getElementById("transform").src = base;
            var mb = showSize(base);
        })
        function showSize(base64url) {
            //获取base64图片大小，返回字节
            var str = base64url.replace('data:image/png;base64,', '');
            var equalIndex = str.indexOf('=');
            if (str.indexOf('=') > 0) {
                str = str.substring(0, equalIndex);
            }
            var strLength = str.length;
            var fileLength = parseInt(strLength - (strLength / 8) * 2);
            console.log("压缩后的图片size", fileLength + "B")
            return fileLength;
        }
 
        function dealImage(path, obj, callback) {
            var img = new Image();
            img.src = path;
            img.onload = function () {
                var that = this;
                var ext = path.substring(path.lastIndexOf(".") + 1).toLowerCase();
                // 默认按比例压缩
                var w = that.width,
                    h = that.height,
                    scale = w / h;
                w = obj.width || w;
                h = obj.height || (w / scale);
                var quality = obj.quality;  // 默认图片质量为0.7,可以为image/jpeg或image/webp类型的图片设置图片质量，取值0-1，超出则以默认值0.92替代
                //生成canvas
                var canvas = document.createElement('canvas');
                var ctx = canvas.getContext('2d');
                // 创建属性节点
                var anw = document.createAttribute("width");
                anw.nodeValue = w;
                var anh = document.createAttribute("height");
                anh.nodeValue = h;
                canvas.setAttributeNode(anw);
                canvas.setAttributeNode(anh);
                ctx.drawImage(that, 0, 0, w, h);
                // 图像质量
                if (obj.quality && obj.quality <= 1 && obj.quality > 0) {
                    quality = obj.quality;
                }
                // quality值越小，所绘制出的图像越模糊
                console.log("tup", ext)
                var base64 = canvas.toDataURL('image/jpeg', quality);
                // 回调函数返回base64的值
                callback(base64);
            }
        }
    </script>
</body>
 
</html>

上传前不失真，有需要的去做按比例压缩（算法自己想）

html5+canvas进行移动端手机照片上传时，发现ios手机上传竖拍照片会逆时针旋转90度，横拍照片无此问题；Android手机没这个问题。

因此解决这个问题的思路是：获取到照片拍摄的方向角，对非横拍的ios照片进行角度旋转修正。

利用exif.js读取照片的拍摄信息，详见  http://code.ciaoca.com/javascript/exif-js/

这里主要用到Orientation属性。

Orientation属性说明如下：
旋转角度0°     参数1 
顺时针90°     6
逆时针90°     8
180°     3

接下来的代码是大佬写的，我用于学习借鉴：

下面代码原链接：https://blog.csdn.net/linlzk/article/details/48654835

<!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>

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);
    }
}
 用到的第三方js文件：mobileBUGFix.mini.js

测试demo下载地址：

http://download.csdn.net/detail/linlzk/9127441

附上Exif.js说明

http://code.ciaoca.com/javascript/exif-js/

图片上传前 压缩，base64图片压缩 Exif.js处理ios拍照倒置等问题的更多相关文章

  1. 图片上传前预览、压缩、转blob、转formData等操作

    直接上代码吧: <template> <div> <div class="header">添加淘宝买号</div> <div ...

  2. 前端的图片压缩image-compressor（可在图片上传前实现图片压缩）

    https://www.imooc.com/article/40038 https://www.jianshu.com/p/3ce3e3865ae2 前端的图片压缩image-compressor(可 ...

  3. file标签 - 图片上传前预览 - FileReader & 网络图片转base64和文件流

    记得以前做网站时,曾经需要实现一个图片上传到服务器前,先预览的功能.当时用html的<input type="file"/>标签一直实现不了,最后舍弃了这个标签,使用了 ...

  4. input file实现多选，限制文件上传类型，图片上传前预览功能

    限制上传类型 & 多选:① accept 属性只能与 <input type="file" /> 配合使用.它规定能够通过文件上传进行提交的文件类型. ② mu ...

  5. html之file标签 --- 图片上传前预览 -- FileReader

    记得以前做网站时,曾经需要实现一个图片上传到服务器前,先预览的功能.当时用html的<input type="file"/>标签一直实现不了,最后舍弃了这个标签,使用了 ...

  6. 【转】html之file标签 --- 图片上传前预览 -- FileReader

    记得以前做网站时,曾经需要实现一个图片上传到服务器前,先预览的功能.当时用html的<input type="file"/>标签一直实现不了,最后舍弃了这个标签,使用了 ...

  7. hTML5实现表单内的上传文件框，上传前预览图片，针刷新预览images

    hTML5实现表单内的上传文件框,上传前预览图片,针刷新预览images, 本例子主要是使用HTML5 的File API,建立一個可存取到该file的url, 一个空的img标签,ID为img0,把 ...

  8. 【转】HTML5 jQuery图片上传前预览

    hTML5实现表单内的上传文件框,上传前预览图片,针刷新预览images,本例子主要是使用HTML5 的File API,建立一個可存取到该 file的url,一个空的img标签,ID为img0,把选 ...

  9. ASP.NET MVC图片上传前预览

    回老家过春节,大半个月,在家的日子里,吃好睡好,人也长了3.5Kg.没有电脑,没有网络,无需写代码,工作上相关的完全放下......开心与父母妻儿过个年,那样的生活令Insus.NET现在还在留恋.. ...

随机推荐

  1. 019-JQuery(Ajax异步请求)

    使用jquery完成异步操作 ->开发文档提供的异步API url:请求地址 type:请求方式,主要是get.post data:{}:请求的数据 dataType:返回值的类型,主要有xml ...

  2. WebApi关于配置全局返回Json数据格式时间以及命名小写

    1.直接在Global文件中配置: 1 var formatters = GlobalConfiguration.Configuration.Formatters; 2 var jsonFormatt ...

  3. GE与POST方法区别

    1.用途. GET方法一般用于查询并获取信息,这意味着它是幂等的(对同一个url的多个请求,返回结果完全一样),因为没有修改资源状态,所以它是安全的.而POST一般用于更新资源信息,既不是幂等,也不是 ...

  4. Python全栈-库的操作

    一.系统数据库 安装数据库系统后,系统自带的数据库.通过mysql客户端连接数据库系统后,使用show命令可查看系统中存在的所有库: mysql> show databases; +------ ...

  5. 擠出機步進馬達的 Steps per Unit 該如何計算?

    擠出機步進馬達的 Steps per Unit 該如何計算?   這邊 Steps per Unit 指的是塑料往前推進1mm,步進馬達須要走幾步.依此定義,可知計算方式可以用 步進馬達轉一圈需要的步 ...

  6. html5-增强的表单-表单的重写

    <!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8&qu ...

  7. Shell Necklace (dp递推改cdq分治 + fft)

    首先读出题意,然后发现这是一道DP,我们可以获得递推式为 然后就知道,不行啊,时间复杂度为O(n2),然后又可以根据递推式看出这里面可以拆解成多项式乘法,但是即使用了fft,我们还需要做n次多项式乘法 ...

  8. 20155228 2016-2017-2 《Java程序设计》第3周学习总结

    20155228 2016-2017-2 <Java程序设计>第3周学习总结 教材学习内容总结 认识对象 类与对象 类和对象的关系:类是对象的设计图,对象是类的实例 参考:将"名 ...

  9. 20165305 苏振龙《Java程序设计》第三周学习总结

    面向对象和面向过程: 面向对象是相对面向过程而言的,面向过程强调的是功能行为,面向对象是将过程封装进对象,强调具备了功能的对象,面向对象是基于面向过程的. 面向对象的三个特征: 封装,继承,多态: 对 ...

  10. centos 6.8操作系统安装arcgis server 10.4

    1.检查操作系统中软件包的安装,第一条和第二条是图形界面工具,可以不装. 可以用rpm -qa | grep 软件名   命令检查软件包是否已经安装 主机名不能包含下划线,可以用hostname检查主 ...