一举手一投足端图片上传旋转、压缩的缓解方案

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

前言

在手提式有线电电话机上经过网页 input
标签拍照上传图片,有局地有线电话会现出图片旋转了90度d的题材,包蕴 BlackBerry和个别苹果手提式有线电电话机。那些手提式无线电电话机竖着拍的时候才会产出那种难点,横拍出来的照片就不奇怪显示。因而,能够经过获得手提式有线电话机拍录角度来对照片实行旋转,从而缓解这几个题材。

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.readAsDataU奇骏L(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
编码的肖像会比原照片大,那么上传的时候进行削减就10分有须要的。今后的无绳电话机像素这么高,拍出来的相片宽高都有几千像素,用
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.toDataUTucsonL() 方法来压缩照片质量。

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

toDataULacrosseL() 方法再次来到一个含有图表突显的 data U汉兰达I
。使用三个参数,第四个参数为图片格式,私下认可为
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