-
Notifications
You must be signed in to change notification settings - Fork 2
/
Copy pathdemo.html
76 lines (71 loc) · 2.03 KB
/
demo.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
<title>图片利用HTML5画布压缩</title>
<style type="text/css">
/*选择图片上传按钮的样式*/
#active_input{
display: inline-block;
background: #d1eeff;
border: 1px solid #96d2f6;
border-radius: 6px;
padding: 6px 10px;
color: #1581bc;
position: relative;
user-select: none;
}
#active_input input{
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
width: 100%;
height: 100%;
opacity: 0;
}
img{
width: 100px;
height: 100px;
object-fit: cover;
margin: 5px;
border: 1px solid #ccc;
background: #f8f8f8;
}
</style>
</head>
<body>
<div id="active_input">
选择图片
<input type="file" accept="image/*" id="imgFilesInput" multiple/>
</div>
<br/>
<script type="module">
//注意：html如果要使用export/import的es6语法，需要在script标签止添加type="module"。如需体验demo,需要在开启http服务访问html,才能加载js。
import ImagesQuicklyCompress from "./images-quickly-compress.js";
let imageCompress = new ImagesQuicklyCompress({
mode:'pixel',//根据像素总大小压缩
num:1E6,//压缩后图片的总像素都是100万（相当于1000px * 1000px的图片）
size:'500kb',//图片大小超过500kb执行压缩
imageType:'image/png',//压缩率比较低
quality:0.8
});
document.querySelector('#imgFilesInput').addEventListener("change", function() {
imageCompress.compressor(this.files).then(res=>{
console.log('压缩结果：',res);
let blobArr = res;
blobArr.forEach(blod => {
let img = document.createElement('img');
img.src = window.URL.createObjectURL(blod);
img.onload = function(){
document.body.appendChild(img);
window.URL.revokeObjectURL(this.src);
}
});
});
}, false);
</script>
</body>
</html>