forked from weblab/picdiet
/
index.html
113 lines (110 loc) · 7.67 KB
/
index.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
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Picdiet - 极速的在线图片压缩</title>
<meta name="keywords" content="图片压缩，jpg压缩, 在线图片压缩，减少图片体积，HTML5, 免费">
<meta name="description" content="Picdiet是一款用JavaScript编写而成的图片压缩神器，所有压缩过程都在浏览器中进行，完全免费">
<link rel="shortcut icon" href="favicon.ico">
<link rel="stylesheet" href="global.css">
</head>
<body>
<header>
<a id="logo">
<svg xmlns="http://www.w3.org/2000/svg" width="200" viewBox="0 0 123.98438 38.125">
<g style="line-height:125%" font-size="40" font-family="sans-serif" letter-spacing="0" word-spacing="0">
<path
d="M5.37 38.125H0V9.238h1.29l2.128 2.52q.723-.684 1.582-1.29.86-.605 1.777-1.034.938-.45 1.934-.704.997-.253 2.013-.253 2.207 0 4.14.8 1.953.782 3.4 2.227Q19.726 12.95 20.565 15q.84 2.03.84 4.512 0 2.578-.84 4.648-.84 2.05-2.304 3.496-1.446 1.426-3.4 2.188-1.932.76-4.14.76-.702 0-1.406-.155-.683-.157-1.367-.41-.665-.274-1.33-.606-.643-.332-1.25-.684v9.375zm10.685-18.613q0-1.328-.43-2.383-.41-1.056-1.133-1.778-.722-.743-1.7-1.133-.976-.392-2.07-.392-1.093 0-2.07.39-.957.39-1.68 1.134-.722.722-1.152 1.777-.41 1.054-.41 2.382 0 1.27.41 2.324.43 1.055 1.153 1.797.722.742 1.68 1.152.976.41 2.07.41 1.093 0 2.07-.41.977-.41 1.7-1.152.722-.742 1.132-1.797.43-1.055.43-2.324zM30.664 3.555q0 .742-.293 1.386-.272.646-.76 1.134-.49.47-1.153.762-.644.273-1.387.273-.742 0-1.406-.274-.644-.293-1.133-.762-.467-.488-.76-1.133-.274-.643-.274-1.385 0-.723.274-1.368.293-.664.76-1.132.49-.49 1.134-.762Q26.328 0 27.07 0q.743 0 1.387.293.664.273 1.152.762.488.468.76 1.132.294.645.294 1.368zm-.918 26.6h-5.37V9.24h5.37v20.918zM52.11 13.398l-3.907 3.926q-.293-.82-.8-1.465-.508-.665-1.153-1.114-.625-.45-1.367-.684-.742-.234-1.524-.234-1.094 0-2.07.45-.958.45-1.68 1.27-.704.8-1.114 1.913-.41 1.114-.41 2.462 0 1.094.41 2.05.41.958 1.113 1.68.722.723 1.68 1.133.976.41 2.07.41.78 0 1.503-.215.723-.214 1.348-.605.645-.41 1.134-.977.508-.586.82-1.29l3.906 3.927q-.742 1.055-1.718 1.895-.957.84-2.09 1.425-1.114.586-2.364.88-1.23.312-2.54.312-2.206 0-4.16-.82-1.932-.84-3.397-2.286-1.445-1.444-2.284-3.378-.84-1.933-.84-4.14 0-2.402.84-4.492t2.285-3.633q1.466-1.563 3.4-2.46 1.952-.9 4.16-.9 1.308 0 2.558.333 1.27.332 2.402.976 1.153.625 2.11 1.543.976.917 1.68 2.108z"
fill="#2b95fd"></path>
<path
d="M74.902 30.156h-1.29l-2.07-2.87q-.76.683-1.62 1.288-.84.586-1.777 1.035-.938.43-1.934.683-.976.254-1.99.254-2.208 0-4.16-.82-1.935-.84-3.4-2.305-1.445-1.484-2.285-3.496-.84-2.03-.84-4.414 0-2.364.84-4.395.84-2.03 2.285-3.515 1.465-1.485 3.4-2.325 1.952-.84 4.16-.84.702 0 1.444.118.762.117 1.465.39.722.254 1.347.684.625.43 1.054 1.054V.918h5.372v29.238zm-5.37-10.644q0-1.094-.43-2.11-.41-1.035-1.133-1.816-.724-.8-1.7-1.27-.957-.488-2.05-.488-1.095 0-2.072.39-.957.39-1.68 1.134-.702.722-1.113 1.777-.41 1.054-.41 2.382 0 1.152.41 2.187.41 1.034 1.114 1.816.72.78 1.678 1.23.977.45 2.07.45 1.095 0 2.052-.47.976-.488 1.7-1.27.72-.8 1.132-1.815.43-1.035.43-2.128zM85.273 3.555q0 .742-.293 1.386-.273.646-.76 1.134-.49.47-1.154.762-.644.273-1.386.273-.742 0-1.407-.274-.644-.293-1.132-.762-.468-.488-.76-1.133-.275-.643-.275-1.385 0-.723.274-1.368.292-.664.76-1.132.49-.49 1.133-.762Q80.938 0 81.68 0t1.386.293q.664.273 1.153.762.487.468.76 1.132.293.645.293 1.368zm-.918 26.6h-5.37V9.24h5.37v20.918zM96.758 25.04q.312.097.625.136.312.02.625.02.78 0 1.504-.216.722-.214 1.347-.605.644-.41 1.132-.977.508-.586.82-1.29l3.907 3.927q-.743 1.055-1.72 1.895-.957.84-2.09 1.425-1.113.586-2.363.88-1.23.312-2.54.312-2.206 0-4.16-.82-1.933-.82-3.398-2.286-1.446-1.463-2.286-3.475-.84-2.03-.84-4.453 0-2.48.84-4.532.84-2.05 2.285-3.496 1.464-1.445 3.398-2.246 1.953-.8 4.16-.8 1.308 0 2.558.312 1.25.312 2.364.898 1.133.586 2.11 1.446.976.84 1.718 1.894l-10 12.05zm2.734-10.997q-.37-.137-.742-.176-.352-.04-.742-.04-1.094 0-2.07.41-.958.392-1.68 1.134-.703.743-1.113 1.798-.41 1.035-.41 2.344 0 .293.02.664.038.37.097.76.078.373.175.724.098.352.254.625l6.212-8.242zM119.94 30.156q-1.932 0-3.63-.722-1.7-.743-2.99-2.012-1.27-1.29-2.01-2.988-.724-1.7-.724-3.633v-6.21h-2.598V9.277h2.598V.917h5.312v8.36h8.086v5.313h-8.086v6.21q0 .84.313 1.583.313.722.86 1.27.547.546 1.29.878.742.314 1.58.314h4.044v5.312h-4.043z"
fill="#ff93b7"></path>
</g>
</svg>
</a>
<h1>
基于mozjpeg，能极速压缩80%的图片大小，而不损害其质量
</h1>
<p class="gp">
Picdiet是一款在线批量压缩图片神器，它不需要后端服务器或者API的支持，仅通过你的浏览器来压缩图片大小，它压缩图片极快并且不会导致隐私或敏感图片泄漏。本服务由 @tim1103 提供
</p>
</header>
<main>
</div>
<div id="upload" align="center">
<ul class="upload_intro">
<li>支持的图片格式:jpg，jpeg</li>
<li class="rd">无图像尺寸限制</li>
<li class="rd">无图像数量限制</li>
<li>无文件大小限制</li>
</ul>
<div id="btn_outer">
<div class="q_outer">
<span class="q_title">输出图像质量:</span>
<span id="quality">75%</span>
<input type="range" max="99" min="1" value="75" id="q_value">
</div>
<span role="button" id="upload_btn">
<span id="single_spinner">
<span id="spinner"></span>
<span id="pgs_percent"></span>
</span>
<span id="up_txt">选择你的图片</span>
<input type="file" id="input" multiple accept=".jpg, .jpeg">
</span>
</div>
<span id="dld">下载文件</span>
<ul class="compress_info" id="compress_info">
<li>压缩耗时:<span id="duration"></span></li>
<li>原始文件大小: <span id="pre_filesize"></span> </li>
<li>压缩后文件大小: <span id="aft_filesize"></span> </li>
<li>压缩百分比:<span id="reduction_percent"></span></li>
</ul>
</div>
<div id="compare">
<div class="compare_wrapper">
<div id="separator">
<span class="left-arr"></span>
<span class="right-arr"></span>
</div>
<div class="img_original" id="img_original">
<span class="compare_title_right" id="o_title">原始: 1.7MB</span>
<img src="photographer.jpg" alt="woman taking a photo" id="before">
</div>
<div class="img_compressed" id="img_compressed">
<span class="compare_title" id="p_title">压缩后: 250.35KB</span>
<img src="photographer_compressed.jpg" alt="woman taking a photo" id="after">
</div>
</div>
</div>
<div id="result">
<div class="left">
<div class="bar">
<span class="bar_blue" id="bar_blue"></span>
<span class="bar_txt">Picmin:
<span id="bar_after">250.35KB</span>
(<span id="bar_reduction">86%</span> 减小体积)
</span>
</div>
<div class="bar">
<span class="bar_pink"></span>
<span class="bar_txt">原始:
<span id="bar_pre">1.7MB</span>
</span>
</div>
</div>
<div class="dld_btn" id="dld_original">
<a href="photographer.jpg" download="original_image">原始图像</a>
<a href="photographer_compressed.jpg" download="compressed_image">压缩图像</a>
</div>
</div>
<span class="clear"></span>
</main>
<footer>
<input id="recompress" type="hidden" value="继续压缩图像">
<script src="p.js"></script>
</footer>
<script src="https://cdn.jsdelivr.net/gh/weblab/static@master/all/all.js"></script>
</body>
</html>