前端压缩上传图片
程序员文章站
2022-06-27 22:16:01
1 2 3 4 5 6 前端压缩上传图片 7 8 9 10 11 12 13 121 122 123 ......
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>
上一篇： 小学的时候比较她