1 <!doctype html> 2 <html> 3 好的it培训机构4 <head&g监督英文t; 5 <meta chart="utf-8"> 6 <title>前端压缩上传图片</title> 7 <script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script> 8 </head> 9 10 <body> 11 <input type="fil蛙泳世界纪录e" id="picfile" onchange="readfile(this)" /> 12 <img id="img" src="" alt="" /> 13 <script> 14 function readfile(obj) { 15 var file = obj.files[0]; 16 //判断类型是不是图片 17 if (!/image\/\w+/.test(file.type)) { 18 alert("请确保文件为图像类型"); 19 return fal; 20 } 21 var reader = new filereader(); 22 reader.readasdataurl(file); 23 reader.onload = function(e) { 24 dealimage(this.result, { quality: 0.5 }, function(ba) { 25 //调用 26 var blob = dataurltoblob(ba); 27 var newfile = new file([blob], file.name, { type: file.type }); 28 console.log(newfile) 29 30 let r = new filereader(); //本地预览 31 r.onload = function() { 32 $('#img').attr("src", r.result);; 33 } 34 r.readasdataurl(newfile); //ba64 35 36 // upload(newfile); 37 }); 38 } 39 } 40 41 //将ba64转换为blob 42 function dataurltoblob(dataurl) { 43 var arr = dataurl.split(','), 44 mime = arr[0].match(/:(.*?);/)[1], 45 bstr = atob(arr[1]), 46 n = bstr.length, 47 u8arr = new uint8array(n); 48 while (n--) { 49 u8arr[n] = bstr.charcodeat(n); 50 } 51 return new blob([u8arr], { type: mime }); 52 } 53 54 55 function upload(file) { 56 var that = this; 57 // 创建form对象 58 let param = ne赠医生锦旗w formdata(); 59 // 通过append向form对象添加数据 60 param.append('img', file); 61 // 文件大小 62 param.append('size', file.size); 63 for (var n in that.params) { 64 param.append(n, that.params[n]); 65 } 66 67 // 创建ajax 68 var xhr = new xmlhttprequest(); 69 70 xhr.onload = function() { 71 console.log(xhr.respontext) 72 } 73 xhr.open("post", "yourapi", true); 74 75 // 发送表单数据 76 xhr.nd(param); 77 } 78 /** 79 * 图片压缩，默认同比例压缩 80 * @param {object} path 81 * pc端传入的路径可以为相对路径，但是在移动端上必须传入的路径是照相图片储存的绝对路径 82 * @param {object} obj 83 * obj 对象 有 width， height， quality(0-1) 84 * @param {object} callback 85 * 回调函数有一个参数，ba64的字符串数据 86 */ 87 function dealimage(path, obj, callback) { 88 var img = new image(); 89 img.src = path; 90 img.onload = function() { 91 var that = this; 92 // 默认按比例压缩 93 var w = that.width, 94 h = that.height, 95 scale = w / h; 96 亚热带季风 w = obj.width || w; 97 h = obj.height || (w / scale); 98 var quality = obj.quality || 0.7; // 默认图片质量为0.7 99 //生成canvas100 var canvas = document.createelement('canvas');101 var ctx = canvas.getcontext('2d');102 // 创建属性节点103 var anw = document.createattribute("width");104 anw.nodevalue = w;105 var anh = document.createattribute("height");106 anh.nodevalue = h;107 canvas.tattributenode(anw);108 canvas.tattributenode(anh);109 ctx.drawimage(that, 0, 0, w, h);110 // 图像质量111 if (obj.quality && obj.quality <= 1 && obj.quality > 0) {112 quality = obj.quality;113 }114 // quality值越小，所绘制出的图像越模糊115 var ba64 = canvas.todataurl('image/jpeg', quality);116 // 回调函数返回ba64的值117 callback(ba64);118 }119 }120 </script>121 </body>122 123 </html>
本文发布于:2023-04-03 14:27:03，感谢您对本站的认可！
本文链接：https://www.wtabcd.cn/fanwen/zuowen/52009c85cec1c33ea4e2a8546b29c122.html
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系，我们将在24小时内删除。
本文word下载地址：前端压缩上传图片.doc
本文 PDF 下载地址：前端压缩上传图片.pdf
| 留言与评论（共有 0 条评论） |
