-
Notifications
You must be signed in to change notification settings - Fork 2
/
dev.html
51 lines (49 loc) · 2.2 KB
/
dev.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
<!DOCTYPE html>
<html lang="zh_CN">
<head>
<meta charset="UTF-8">
<title>TrimPNG</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta property="og:type" content="website">
<meta property="og:url" content="http://quanfeng.tech/trimpng/">
<link rel="shortcut icon" href="//cdn.tinypng.com/images/favicon.ico?ca653c6">
<link rel="apple-touch-icon" href="//cdn.tinypng.com/images/apple-touch-icon.png?ca653c6">
<link href="//cdn.bootcss.com/pure/0.6.1/base-min.css" rel="stylesheet">
<link href="//cdn.bootcss.com/pure/0.6.1/buttons-core-min.css" rel="stylesheet">
<link href="//cdn.bootcss.com/pure/0.6.1/buttons-min.css" rel="stylesheet">
<link rel="stylesheet" href="/build/bundle.css">
</head>
<body>
<header class="header">
<div class="logo"></div>
<a class="fork-on-github" href="https://github.com/0326/trimpng" target="_blank">fork on GitHub</a>
</header>
<div class="wrapper">
<div class="btn-wrapper">
<div class="pure-button pure-button-primary button-fileupload">
<span>上传图片</span>
<input id="J_ImgUpload" type="file" accept="image/png">
</div>
<button id="J_ImgTrim" class="pure-button button-secondary">去除白边</button>
<button id="J_ImgCrop" class="pure-button button-secondary">裁剪空白</button>
<a id="J_ImgDownload" class="pure-button button-success" href="" download="">下载图片</a>
<button id="J_EmptyBtn" class="pure-button button-error">清空内容</button>
</div>
<div class="canvas-wrapper empty">
<canvas id="J_Canvas" width="500" height="260"></canvas>
<div class="tips">请上传图片</div>
</div>
<div class="test-wrapper">
<h2>测试图片</h2>
<ul id="J_TestImgs" class="img-list">
<li><img class="test-img" src="./test3.png" alt="皮卡丘"></li>
<li><img class="test-img" src="./test1.png" alt="手机"></li>
<li><img class="test-img" src="./test2.png" alt="椭圆"></li>
</ul>
</div>
</div>
<footer>
</footer>
<script src="/build/bundle.js"></script>
</body>
</html>