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 -
最后修改:2019年7月4日
非特殊说明,本博所有文章均为博主原创。
如若转载,请注明出处:https://www.95app.top/js-compress-img/
helei博主
啊哈?