文章目录

JS - 解决图片压缩 + IOS下拍照图片翻转问题

核心代码

var file = document.getElementById('#file');
//获取的图片文件
var fileList = file.files;
/**************************************************************************************************/
// 压缩图片需要的一些元素和对象
var reader = new FileReader();
var img = new Image();
// 缩放图片需要的canvas
var canvas = document.createElement('canvas');
var context = canvas.getContext('2d');
//图片大小
var fileSize = fileList[0].size;
reader.readAsDataURL(fileList[0]);
reader.onload = function(e) {
    //e.target.result就是图片的base64地址信息
    img.src = e.target.result;
};
img.onload = function(e) {
    EXIF.getData(img, function() {
        var Orientation = EXIF.getTag(this, 'Orientation');
        console.log('方向:' + Orientation);
        console.log('大小:' + fileSize/(1024*1024));
        var wph = (img.height*1)/(img.width*1);
        var hpw = wph.toFixed(2)*1;
        var square = 700;   //定义画布的大小,也就是图片压缩之后的像素
        var imageWidth = 0;    //压缩图片的大小
        var imageHeight = 0;
        var offsetX = 0;
        var offsetY = 0;
        var hsquare = Math.ceil(square*hpw);
        var u = navigator.userAgent;
        var isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
        if(isiOS){
            if(Orientation === 6){
                canvas.width = hsquare;
                canvas.height = square;
                context.clearRect(0, 0, hsquare, square);
            }else if(Orientation === 8){
                canvas.width = hsquare;
                canvas.height = square;
            }else{
                canvas.width = square;
                canvas.height = hsquare;
                context.clearRect(0, 0, square, hsquare);
            }
        }else{
            canvas.width = square;
            canvas.height = hsquare;
            context.clearRect(0, 0, square, hsquare);
        }
        if(isiOS){
            var degree;
            switch(Orientation){
                case 3:
                    degree = 180;
                    imageWidth = -square;
                    imageHeight = -hsquare;
                    break;
                case 6:
                    degree = 90;
                    imageWidth = square;
                    imageHeight = -hsquare;
                    break;
                case 8:
                    degree = 270;
                    imageWidth = -square;
                    imageHeight = hsquare;
                    break;
                default:
                    degree = 0;
                    imageWidth = square;
                    imageHeight = hsquare;
            }
            context.rotate(degree * Math.PI / 180.0);
        }else{
            if (img.width > img.height) {
                imageWidth = square;
                imageHeight = hsquare;
                offsetX = - Math.round((imageWidth - square) / 2);
            } else {
                imageHeight = hsquare;
                imageWidth = square;
                offsetY = - Math.round((imageHeight - hsquare) / 2);
            }
        }
        context.drawImage(this, offsetX, offsetY, imageWidth, imageHeight);
        //压缩处理得到的base64
        var blob = canvas.toDataURL('image/jpeg', 1.0);
        //base64转blob
        var blobs = toBlob(blob);
    });
});
//base64转blob
function toBlob(urlData) {
    var bytes = window.atob(urlData.split(',')[1]);
    // 去掉url的头,并转换为byte
    // 处理异常,将ascii码小于0的转换为大于0
    var ab = new ArrayBuffer(bytes.length);
    var ia = new Uint8Array(ab);
    for (var i = 0; i < bytes.length; i++) {
        ia[i] = bytes.charCodeAt(i);
    }
    return new Blob([ab],{type : 'image/jpeg'});
}

演示

github
预览

数据处理见console.log

返回文章列表 打赏
本页链接的二维码
打赏二维码
期待你的评论