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博主
啊哈?