js压缩图片返回base64编码

helei 2019-4-26 1,376 4/26
document.getElementById("upload_fileb").onchange = function () {
                 $("#override").show();
                 RequestShow();
                 var filePath = $(this).val(),         //获取到input的value,里面是文件的路径
                     fileFormat = filePath.substring(filePath.lastIndexOf(".")).toLowerCase(),
                     imgBase64 = '',      //存储图片的imgBase64
                     fileObj = document.getElementById('upload_fileb').files[0]; //上传文件的对象,要这样写才行,用jquery写法获取不到对象
             // 检查是否是图片             if( !fileFormat.match(/.png|.jpg|.jpeg/) ) {                 
layer.msg('上传错误,文件格式必须为:png/jpg/jpeg', {                     time: 1500,
icon: 5,                 
});             
}                      // 调用函数,对图片进行压缩             compress(fileObj,function(imgBase64){}}

function compress(fileObj, callback) {
    if ( typeof (FileReader) === 'undefined') {
        console.log("当前浏览器内核不支持base64图标压缩");
        //调用上传方式不压缩
        directTurnIntoBase64(fileObj,callback);
    } else {
        try {
            var reader = new FileReader();
            reader.onload = function (e) {
                var image = $('<img/>');
                image.load(function(){
                    var that = this;
                    // 默认按比例压缩
                    var w = that.width,
                        h = that.height,
                        scale = w / h;
                    w = e.width || w;
                    h = e.height || (w / scale);
                    var quality = 0.3;  // 默认图片质量为0.7
                    //生成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(e.quality && e.quality <= 1 && e.quality > 0){
                        quality = e.quality;
                    }
                    // quality值越小,所绘制出的图像越模糊
                    var base64 = canvas.toDataURL('image/jpeg', quality);
                    // 回调函数返回base64的值
                    callback(base64);
                });
                image.attr('src', e.target.result);
            };
            reader.readAsDataURL(fileObj);
        }catch(e){
            console.log("压缩失败!");
            //调用直接上传方式  不压缩
            directTurnIntoBase64(fileObj,callback);
        }
    }
}
// 不对图片进行压缩,直接转成base64
function directTurnIntoBase64(fileObj,callback){
    var r = new FileReader();
    // 转成base64
    r.onload = function(){
        //变成字符串
        imgBase64 = r.result;
        console.log(imgBase64);
        callback(imgBase64);
    }
    r.readAsDataURL(fileObj);    //转成Base64格式
}
- THE END -

helei

7月04日16:03

最后修改:2019年7月4日
0

非特殊说明,本博所有文章均为博主原创。

共有 1 条评论

  1. helei博主

    啊哈?