js图片压缩并转成base64,显示与上传,不改变图片长宽

    //图片上传
       $("#good_img").on('change',function(){
         
         var filePath = $(this).val(),         //获取到input的value,里面是文件的路径
            fileFormat = filePath.substring(filePath.lastIndexOf(".")).toLowerCase(),
            imgBase64 = '',      //存储图片的imgBase64
            fileObj = this.files[0]; //上传文件的对象,要这样写才行,用jquery写法获取不到对象
            
        // 检查是否是图片
        if( !fileFormat.match(/.png|.jpg|.jpeg/) ) {
            alert('上传错误,文件格式必须为:png/jpg/jpeg');
            return;  
        }
 
        // 调用函数,对图片进行压缩
        compress(fileObj,function(imgBase64){
            imgBase64 = imgBase64;    //存储转换的base64编码
           var str='<img src="'+imgBase64+'"/>';
              $(".upload_div").html(str); 
        });
});
        
 // 不对图片进行压缩,直接转成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格式
    }
 
       // 对图片进行压缩
    function compress(fileObj, callback) { 
        if ( typeof (FileReader) === 'undefined') {  
            console.log("当前浏览器内核不支持base64图标压缩");  
            //调用上传方式不压缩  
            directTurnIntoBase64(fileObj,callback);
        }else if(fileObj.size<250000){      //图片小于250k就不压缩
        	 console.log("不需要压缩");  
            directTurnIntoBase64(fileObj,callback);
        } else {  
            try {    
                var reader = new FileReader();  
                reader.onload = function (e) {  
                    var image = $('<img/>');  
                    image.load(function(){  
                        square = 700,   //定义画布的大小,也就是图片压缩之后的像素
                        canvas = document.createElement('canvas'), 
                        context = canvas.getContext('2d'),
                        imageWidth = 0,    //压缩图片的大小
                        imageHeight = 0, 
                        offsetX = 0, 
                        offsetY = 0,
                        data = ''; 
 
                        canvas.width = this.width;  
                        canvas.height = this.height; 
                        context.clearRect(0, 0, square, square); 
                        context.drawImage(this, 0, 0, this.width, this.height); 
                        var data = canvas.toDataURL('image/jpeg');  
                        //压缩完成执行回调  
                         callback(data);  
                    });  
                    image.attr('src', e.target.result);  
                };  
                reader.readAsDataURL(fileObj);  
            }catch(e){  
                console.log("压缩失败!");  
                //调用直接上传方式  不压缩 
                directTurnIntoBase64(fileObj,callback); 
            }  
		}
        }

   

 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值