废话不多说，直接上代码
// 图片压缩
function compressImage(image, b) {// 创建一个 canvas 元素并获取其上下文var canvas = document.createElement('canvas');var ctx = canvas.getContext('2d');// 将 canvas 宽高设为原图的 1/10，即将原图宽高压缩 10 倍var larges = large(image.width, image.height);var bili = larges / 1200;canvas.width = image.width / bili;canvas.height = image.height / bili;// 绘制图片ctx.drawImage(image, 0, 0, canvas.width, canvas.height);// 将 canvas 导出为 base64 URL 并返回return canvas.toDataURL(b);
}// base64转file
function dataURLtoFile(base64url, filename) {// 将base64转换为文件var arrs = base64url.split(',');var mime = arrs[0].match(/:(.*?);/)[1];var bstr = atob(arrs[1]);var n = bstr.length;var u8arr = new Uint8Array(n);while (n) {n -= 1;u8arr[n] = bstr.charCodeAt(n);}return new File([u8arr], filename, {type: mime,});
}//file转base64
function compress(data) {var fileReader = new FileReader();if (!data.files.name) {data.callback('请上传图片');} else {/* 图片类型正则验证 */var imgStr = /\.(jpg|JPG|jpeg|JPEG|png|PNG)$/;if (!imgStr.test(data.files.name)) {data.callback('文件不是图片类型');} else {if (data.files.size > 4194304) {// 读取 file 的内容fileReader.readAsDataURL(data.files);// fileReader 读取完成触发的事件fileReader.onload = function () {var image = new Image();image.src = fileReader.result;image.onload = function () {var imgs = compressImage(image, data.files.type);// 对 image 进行的操作var fils = dataURLtoFile(imgs, data.files.name);// if(fils.size <= 4194304){data.callback(fils);// }else{// compress(fils);// }};};} else if (data.files.size < 10240) {data.callback('图片不能小于10k!');} else {data.callback(data.files);}}};
}
下次继续