遇到上传的图片太大怎么办？那么来试试压缩上传 - 好文

人工智能的时代来临了！！！腾讯云的智能识别身份证仅支持1M大小以下的图片那么咱们前端是不是就要将图片压缩再上传了！我遇到的时候找了好多博客
大部分是后台给压缩，有几个前端压缩的也是代码量挺大的所以只能自己写一个了下面进入源码-------------------
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script
src="http://yzx-t.lvjinhui.cn/jquery-2.1.0.js" type="text/javascript"
charset="utf-8"></script> <script type="text/javascript"> function
photoCompress(file,w,objDiv){ var ready=new FileReader();
/*开始读取指定的Blob对象或File对象中的内容.
当读取操作完成时,readyState属性的值会成为DONE,如果设置了onloadend事件处理程序,则调用之.同时,result属性中将包含一个data:
URL格式的字符串以表示所读取文件的内容.*/ ready.readAsDataURL(file); ready.onload=function(){ var
re=this.result; canvasDataURL(re,w,objDiv) } } function canvasDataURL(path,
obj, callback){ var img = new Image(); img.src = path; img.onload = function(){
var that = this; // 默认按比例压缩 var w = that.width, h = that.height, scale = w / h;
w = obj.width || w; h = obj.height || (w / scale); var quality = 0.7; //
默认图片质量为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(obj.quality && obj.quality <= 1 &&
obj.quality > 0){ quality = obj.quality; } // quality值越小，所绘制出的图像越模糊 var base64
= canvas.toDataURL('image/jpeg', quality); // 回调函数返回base64的值 callback(base64);
} } /** * 用url方式表示的base64图片数据 */ function convertBase64UrlToBlob(urlData){ var
arr = urlData.split(','), mime = arr[0].match(/:(.*?);/)[1], bstr =
atob(arr[1]), n = bstr.length, u8arr = new Uint8Array(n); while(n--){ u8arr[n]
= bstr.charCodeAt(n); } return new Blob([u8arr], {type:mime}); } var
bl="",fileObj; function filess(e){ fileObj =
document.getElementById("file").files[0]; // js 获取文件对象 console.log("压缩前：" +
fileObj.size / 1024 + "k"); if(fileObj.size/1024 > 100) { //大于1M，进行压缩上传
photoCompress(fileObj, { quality: 0.2 }, function(base64Codes){
console.log("压缩后：" + base64Codes.length / 1024 + "k"); bl =
convertBase64UrlToBlob(base64Codes); console.log(bl); }); } } //上传文件方法 function
UpladFile() { var params = new FormData(); if (bl=="") {
params.append("photo",fileObj); }else{
params.append("photo",bl,"file_"+Date.parse(new Date())+".jpg"); } $.ajax({
url:"http://qxu1142100139.my3w.com/public/index/Index/updata_p", type:"post",
contentType: false, processData: false, data:params, success:function(res){
alert("上传成功"); console.log(res.code); if (res.code==200) { alert("上传成功");
}else{ alert("上传失败"); } } }); } </script> </head> <body> <input type="file"
id="file" name="myfile" onchange="filess(this)" /> <input type="button"
onclick="UpladFile()" value="上传" /> </body> </html>
如果本博客使您解决了一些迷惑或者使您学到了一些东西请您动动小手点个赞！！

热门工具换一换