forked from renzhezhilu/webp2jpg-online
-
Notifications
You must be signed in to change notification settings - Fork 1
/
输出文件固定size.html
130 lines (113 loc) · 4.79 KB
/
输出文件固定size.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
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<input id="files" type="file" multiple />
<h4 id="t1"></h4>
<img id="img01" src="" alt="">
<canvas id="can"></canvas>
<h4 id="t2"></h4>
<img id="img02" src="" alt="">
<script>
/*
直接设置输出质量+-0.1来预测输出合适的size太死板了
尝试这样的算法
01.判断现有图片已经被压缩的比例
size /（widhth * height）
172112 / (500 * 500) = 0.688448
02.需要压缩的比例
size /（widhth * height）
60000 / (500 * 500) = 0.24
图片尺寸
*/
let input = document.getElementById("files")
let img01 = document.getElementById("img01")
let img02 = document.getElementById("img02")
input.addEventListener('change', function() {
console.log(this.files[0]);
let files = this.files
let img = new Image()
img.src = URL.createObjectURL(this.files[0])
img.onload = function() {
console.log(this);
// document.body.appendChild(this);
let _canvas = document.getElementById("can")
//处理缩放
let w = this.width
let h = this.height
// console.log(new Blob(img,'image/jpg'));
_canvas.setAttribute("width", w)
_canvas.setAttribute("height", h)
_canvas.getContext("2d").drawImage(this, 0, 0, w, h)
//转格式
console.log(_canvas);
// let base64_ok = _canvas.toDataURL(`image/${type}`, quality)
let s = 70000
let z1 = files[0].size / (this.width * this.height)
let z2 = s / (this.width * this.height)
let i = s / files[0].size
if (i > 1) i = 1
if (i < 0) i = 0.01
// let i = this.files[0].size / (this.width*this.height)
// setSizeFun(s, i)
setSizeFun(s, 1)
function setSizeFun(setSize, q) {
//本来的图片就很小了
if (files[0].size < setSize) {
// let b = new Blob([files[0]], {
// type: files[0].type
// })
// _canvas.toBlob(function(blob) {
// console.log( blob,'原样输出');
// }, `image/jpeg`, 1)
// return
}
let qu = q
let sizeAfter
_canvas.toBlob(function(blob) {
img02.src = URL.createObjectURL(blob)
sizeAfter = blob.size
console.log(blob, `setSize:`, setSize, `q:`, q);
//合格
if (setSize > sizeAfter && setSize * 0.9 < sizeAfter) {
console.log(blob, '✅✅✅✅');
} else {
// if (setSize < sizeAfter) qu = qu -0.005
// else qu = qu +0.005
// let yuan = Math.abs((qu * setSize / sizeAfter)-qu)
// let di = 0
// if (yuan<0.002) {
// di = 0.002
// }
qu = qu * setSize / sizeAfter
// if (qu < 0) {
// console.warn('没有合适的');
// return
// }
// if (qu > 1 && setSize > sizeAfter && setSize * 0.9 < sizeAfter) {
// console.log(blob, '最大输出质量✅✅✅✅');
// return
// }
if (qu > 1 || qu < 0) {
if (setSize > sizeAfter) {
console.log(blob, '最大输出质量✅✅✅✅');
} else {
console.warn('没有合适的');
}
return
}
console.log('继续');
setSizeFun(setSize, qu)
}
}, `image/jpeg`, q)
}
}
}, false)
</script>
</body>
</html>