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>
来源：oschina
链接：https://my.oschina.net/u/4305937/blog/3538903