挪动端图片及污染旋转、压缩的化解方案

原文地址:http://blog.gdfengshuo.com/2017/06/29/17

前言

以手机及经过网页 input
标签拍照及传图片,有一对部手机会油然而生图转了90度d的题材,包括 iPhone
和个别三星星手机。这些手机一直在碰撞的当儿才见面冒出这种问题,横拍出来的影就是如常显示。因此,可以经过获得手机摄像角度来对像进行盘,从而解决这个题材。

Orientation

夫参数并无是装有图片都有些,不过手机打出去的图片是含有这个参数的。

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

参数为 1 的时显得正常,那么在这些横拍显示正常,即 Orientation = 1
的手机及,竖拍的参数为 6。

相思要落 Orientation 参数,可以由此 exif.js 库来操作。exif.js
功能很多,体积也坏死,未减之前至少有
30k,这对手机页面加载来说是生酷影响的。而自仅待取 Orientation
信息而已,所以自己这边去了 exif.js 库的局部代码,将代码缩小至几乎KB。

exif.js 获取 Orientation :

EXIF.getData(file, function() {  
    var Orientation = EXIF.getTag(this, 'Orientation');
});

file 则是 input 文件表单上传之文书。上传的文书通过
fileReader.readAsDataURL(file)
就足以实现预览图了,这点未懂得的可查阅:HTML5
进阶系列:文件上传下载

旋转

旋转需要用到 canvas 的 rotate() 方法。

ctx.rotate(angle);

rotate 方法的参数为转弧度。需要用角度转为弧度:degrees * Math.PI /
180

盘的为主点默认都在 canvas 的起点,即 ( 0, 0 )。旋转的原理如下图:

图片 1

转之后,如果从 ( 0, 0 ) 点进行
drawImage(),那么画出的职务就是当左图中的团团转 90
度后底位置,不在可观看区域啊。旋转之后,坐标轴也随后旋转了,想使来得在可看到区域啊,需要以
( 0, 0 ) 点往 y 轴的反方向移 y 个单位,此时的起始点则为 ( 0, -y )。

同理,可以得到旋转 -90 度后的起始点为 ( -x, 0 ),旋转 180 度后底起始点为
( -x, -y )。

压缩

手机拍下的肖像太好,而且用 base64
编码的像会比较原照片非常,那么上传的时候进行压缩虽很有必不可少之。现在底手机像从这么大,拍出来的影宽高都来几千如从,用
canvas 来渲染这像的速度会相对比慢。

为此首先步用事先对上传照片的方便高开限定,判断宽度或可观是否超出哪个范围,则相当于比较压缩其富庶高。

var ratio = width / height;
if(imgWidth > imgHeight && imgWidth > xx){
    imgWidth = xx;
    imgHeight = Math.ceil(xx / ratio);
}else if(imgWidth < imgHeight && imgHeight > yy){
    imgWidth = Math.ceil(yy * ratio);
    imgHeight = yy;
}

老二步就是通过 canvas.toDataURL() 方法来压缩照片质量。

canvas.toDataURL("image/jpeg", 1);

toDataURL() 方法返回一个饱含图表显示的 data URI
。使用有限单参数,第一只参数为图片格式,默认为
image/png。第二独参数为削减质量,在指定图片格式为 image/jpeg 或
image/webp的状下,可以自 0 到 1 的间距内选择图片的品质。

总结

概括以上,例子的代码包括精简的exif.js库地址:file-demo

首要的核心代码如下:

<input type="file" id="files" >
<img src="blank.gif" id="preview">
<script src="small-exif.js"></script>
<script>
var ipt = document.getElementById('files'),
    img = document.getElementById('preview'),
    Orientation = null;
ipt.onchange = function () {
    var file = ipt.files[0],
        reader = new FileReader(),
        image = new Image();

    if(file){
        EXIF.getData(file, function() {  
            Orientation = EXIF.getTag(this, 'Orientation');
        });
        reader.onload = function (ev) {
            image.src = ev.target.result;
            image.onload = function () {
                var imgWidth = this.width,
                    imgHeight = this.height;
                // 控制上传图片的宽高
                if(imgWidth > imgHeight && imgWidth > 750){
                    imgWidth = 750;
                    imgHeight = Math.ceil(750 * this.height / this.width);
                }else if(imgWidth < imgHeight && imgHeight > 1334){
                    imgWidth = Math.ceil(1334 * this.width / this.height);
                    imgHeight = 1334;
                }

                var canvas = document.createElement("canvas"),
                ctx = canvas.getContext('2d');
                canvas.width = imgWidth;
                canvas.height = imgHeight;
                if(Orientation && Orientation != 1){
                    switch(Orientation){
                        case 6:     // 旋转90度
                            canvas.width = imgHeight;    
                            canvas.height = imgWidth;    
                            ctx.rotate(Math.PI / 2);
                            // (0,-imgHeight) 从旋转原理图那里获得的起始点
                            ctx.drawImage(this, 0, -imgHeight, imgWidth, imgHeight);
                            break;
                        case 3:     // 旋转180度
                            ctx.rotate(Math.PI);    
                            ctx.drawImage(this, -imgWidth, -imgHeight, imgWidth, imgHeight);
                            break;
                        case 8:     // 旋转-90度
                            canvas.width = imgHeight;    
                            canvas.height = imgWidth;    
                            ctx.rotate(3 * Math.PI / 2);    
                            ctx.drawImage(this, -imgWidth, 0, imgWidth, imgHeight);
                            break;
                    }
                }else{
                    ctx.drawImage(this, 0, 0, imgWidth, imgHeight);
                }
                img.src = canvas.toDataURL("image/jpeg", 0.8);
            }
        }
        reader.readAsDataURL(file);
    }
}
</script>

再次多篇:lin-xin/blog