var img_yz;
function readURL(input) {
img_yz = new Image();
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
img_yz.src = e.target.result;
}
reader.readAsDataURL(input.files[0]);
}
}
$("#imgInp").change(function () {
readURL(this);
});
//下面是重点
function compress(file) {
// 压缩到图片原始宽高的一半
var w = file.naturalWidth / 2;
var h = file.naturalHeight / 2;
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.fillRect(0, 0, w, h);
ctx.drawImage(file, 0, 0, w, h);
//可以根据base64 做相关的预览功能 这里就不演示了
const base64 = canvas.toDataURL('image/jpeg', 0.75);// 压缩后质量
const bytes = window.atob(base64.split(',')[1]);
const ab = new ArrayBuffer(bytes.length);
const ia = new Uint8Array(ab);
for (var i = 0; i < bytes.length; i++) {
ia[i] = bytes.charCodeAt(i);
}
blob = new Blob([ab], {type: 'image/jpeg'});
// 预览压缩后的图片
return blob;
}
console.log(compress(img_yz));
//进度条
xhr: function(){
myXhr = $.ajaxSettings.xhr();
if(myXhr.upload){
myXhr.upload.addEventListener('progress',function(e) {
if (e.lengthComputable) {
var percent = Math.floor(e.loaded/e.total*100);
}
}, false);
}
return myXhr;
},