前端压缩上传图片

  1 <!DOCTYPE html>
  2 <html>
  3 
  4 <head>
  5     <meta charset="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="file" 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 false;
 20             }
 21             var reader = new FileReader();
 22             reader.readAsDataURL(file);
 23             reader.onload = function(e) {
 24                 dealImage(this.result, { quality: 0.5 }, function(base) {
 25                     //调用
 26                     var blob = dataURLtoBlob(base);
 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); //Base64
 35 
 36                     // upload(newFile);
 37                 });
 38             }
 39         }
 40 
 41         //将base64转换为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 = new 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.responseText)
 72             }
 73             xhr.open("POST", "yourapi", true);
 74 
 75             // 发送表单数据
 76             xhr.send(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          * 回调函数有一个参数，base64的字符串数据
 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                 //生成canvas
100                 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.setAttributeNode(anw);
108                 canvas.setAttributeNode(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 base64 = canvas.toDataURL('image/jpeg', quality);
116                 // 回调函数返回base64的值
117                 callback(base64);
118             }
119         }
120     </script>
121 </body>
122 
123 </html>
前端压缩上传图片

猜你喜欢
