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

人工智能的时代来临了！！！腾讯云的智能识别身份证仅支持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.οnlοad=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//生成canvasvar 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" οnchange="filess(this)" /><input type="button" οnclick="UpladFile()" value="上传" />
</body>
</html>

如果本博客使您解决了一些迷惑或者使您学到了一些东西请您动动小手点个赞！！

遇到上传的图片太大怎么办？那么来试试压缩上传相关推荐

图片太大，如何免费进行压缩
工作中是不是经常遇到图片太大的问题,一般提交电子证件照时都要求100KB以内,那么有没有免费将图片压缩变小的方法呢? 直接使用speedpdf在线转换器,这个在线转换工具除了常用的很多格式间的转换外, ...
解决input file上传图片，部分手机拍照或者本地图片无法上传（图片太大，需要上传之前先压缩）
现在一般手机拍的照片都好几兆,图片文件太大会非常影响上传速度或者根本上传不上去,故上传图片前需要先进行压缩,这里使用的是lrz.js(lrz.js文件这里就不提供了) <input type=& ...
移动端上(传图片太大)处理方案
利用FileReader和FormData实现图片预览和上传(base64转二进制文件) 监听表单文件变化文件表单的样式主要通过让它后面,通过别的DOM来美化它. <input type=&q ...
图片太大不能上传怎么办？
图片太大不能上传怎么办?不管你是上班族还是学生,这几乎是每个人都遇到过的问题,很多网站为了防止自己的服务器存储空间不那么快被占用完,都会对上传的图片大小进行限制,操作大小限制的图片是不能被上传成功的. ...
图片太大？不符合上传大小？PS帮你搞定！
前言有时,我们需要将图片上传到网站或软件,如果限制了图片上传大小,则我们需要压缩图片的大小来满足人家的规则. 如果用大白话谈压缩的话,无非就是图片品质.颜色.宽高决定了图片大小. 解决图片太大的问题 ...
电脑怎么压缩jpg图片？上传jpg图片过大怎么办？
遇到上传jpg图片过大时该怎么压缩jpg图片大小呢?在这里给大家推荐一款在线压缩jpg图片的工具--压缩图,使用它的jpg图片压缩功能只需要简单的几步就可以完成图片压缩,一起来看看吧. 1.使用电脑浏 ...
小程序Canvas绘制图片太大，自动闪退，安卓会有crash问题
2019独角兽企业重金招聘Python工程师标准>>> 问题说明: 目前小程序Canvas版本还有不少bug,性能较低. 对于图片太大使用ctx.drawImage(imgpath, ...
jpg图片太大怎么压缩变小
jpg图片太大怎么压缩变小?Jpg格式的图片,不但兼容性好,其画质也很优秀,是使用率最高的一种图片格式.jpg格式的图片在使用中唯一经常遇到的麻烦就是因其图片体积大被很多平台限制上传.而且解决jpg图 ...
图片太大怎么压缩变小？压缩有技巧
图片太大怎么压缩变小?在网上报考时,我们会需要将证件照或者其他图片上传到网站上,这些网站通常有着严格的上传规格,不符合规定就无法上传.而有些图片体积过大怎么办?这时就需要将其压缩变小,有没有方便快捷的 ...

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

遇到上传的图片太大怎么办？那么来试试压缩上传相关推荐

最新文章

热门文章