cLayout/layout.html at master · qqmusicfe/cLayout · GitHub

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
131
132
133
134
<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=Edge" />
    <title>智能切图工具</title>
    <meta name="description" content="智能切图工具" />
    <meta name="keywords" content="智能切图,重构" />
    <link rel="stylesheet" href="./style.css">
</head>

<body>
<article>
    <header>
        <h1>智能切图工具</h1>
        <nav class="js_nav">
            <dl>
                <dd>上传图片</dd>
                <dd>设置切图参数</dd>
                <dd>生成重构稿</dd>
            </dl>
        </nav>
    </header>

    <!--水印-->
    <div class="watermark js_selectfile">点击选择图片<br>或拖放图片到本页面</div>

    <!--工作区-->
    <section class="main js_main">
        <div class="flex js_body">
            <div class="js_panel panel"></div>
            <div class="js_set panel flex-1" style="display:none">
                <div class="js_priview"></div>
                <div class="panel-menu">
                    <div class="js_menu" data-nav="1">
                        <h3>参数设置</h3>
                        <div class="js_item">
                            <label>引擎</label>
                            <div><label><input type="radio" class="js_setting" name="engine" data-name="engine" value="0">JS</label></div>
                            <div><label><input type="radio" class="js_setting" name="engine" data-name="engine" value="1" checked>WebAssembly</label></div>
                        </div>
                        <div class="js_item">
                            <label>页面类型</label>
                            <div><label title="页面铺面全屏，并根据屏幕尺寸进行缩放"><input type="radio" class="js_setting" name="type" data-name="type" value="0" checked>H5</label></div>
                            <div><label title="页面居中展示，两旁留白支持设置背景图和背景色"><input type="radio" class="js_setting" name="type" data-name="type" value="1">PC</label></div>
                        </div>
                        <div class="js_item" data-part="0">
                            <label>页面宽度</label>
                            <input type="number" class="js_setting" data-name="size" min="320" max="960" step="1" value="640"> px
                            <input type="range" class="js_setting" data-name="size" min="320" max="960" step="1" value="640">
                        </div>
                        <div class="js_item" data-part="1">
                            <label>背景色</label>
                            <input type="text" class="js_setting" data-name="bgcolor" value="#ffffff" title="不设置或指无效时为白色">
                        </div>
                        <div class="js_item" data-part="1">
                            <label>背景图</label>
                            <input type="file" class="js_setting" data-name="bgimg" accept="image/*">
                            <div><label><input type="checkbox" class="js_setting" data-name="bgtype" value="1">浮动，保持在窗口顶部</label></div>
                            <div><label><input type="checkbox" class="js_setting" data-name="bgtype" value="2">平铺，在垂直方向上重复</label></div>
                            <div><label><input type="checkbox" class="js_setting" data-name="bgtype" value="4">拉伸，根据窗口调整背景图大小</label></div>
                        </div>
                        <div class="js_item">
                            <label>精细度</label>
                            <input type="number" class="js_setting" data-name="unitSize" min="0" max="40" step="1" value="8"> px
                            <input type="range" class="js_setting" data-name="unitSize" min="0" max="40" step="1" value="8">
                        </div>
                        <div class="js_item">
                            <label>背景色阈值</label>
                            <input type="number" class="js_setting" data-name="scope" min="0" max="32" step="1" value="10">
                            <input type="range" class="js_setting" data-name="scope" min="0" max="32" step="1" value="10">
                        </div>
                        <div class="js_item">
                            <label>切片高度</label>
                            <input type="number" class="js_setting" data-name="limit" min="300" max="1600" step="6" value="900"> px
                            <input type="range" class="js_setting" data-name="limit" min="300" max="1600" step="6" value="900">
                        </div>
                        <div class="js_item">
                            <label>图片质量</label>
                            <input type="number" class="js_setting" data-name="quality" min="0.5" max="1" step="0.1" value="0.7">
                            <input type="range" class="js_setting" data-name="quality" min="0.5" max="1" step="0.1" value="0.7">
                        </div>
                        <div class="js_item">
                            <label>拼合小图片</label>
                            <label><input type="radio" class="js_setting" name="combine" data-name="combine" value="1" checked>开启</label>
                            <label><input type="radio" class="js_setting" name="combine" data-name="combine" value="0">关闭</label>
                        </div>
                    </div>
                </div>
                <div class="panel-btn js_panel_btn">
                    <button class="js_reload" type="button">更换图片</button>
                    <button class="js_start" type="button">开始切图</button>
                </div>
            </div>
        </div>
    </section>
</article>

<figure class="result js_result" style="display:none">
    <figcaption>
        <h3>处理结果</h3>
        <a class="result_export js_result_export" title="导出" href="javascript:;">导出结果</a>
        <a class="result_close js_result_close" title="关闭" href="javascript:;">X</a>
        <h4></h4>
    </figcaption>
    <div class="result_body js_result_body">
        <table>
            <thead>
                <th>序号</th>
                <th>宽度</th>
                <th>高度</th>
                <th style="width:200px">位置</th>
                <th style="width:200px">预览图</th>
            </thead>
            <tbody></tbody>
        </table>
    </div>
</figure>

<footer>
    <span class="version">请使用 IE11+/Chrome 浏览器访问该页面</span>
</footer>
<script>if (typeof module === "object") {window.module = module; module = undefined;}</script>

<script src="./jquery.js"></script>
<script src="./loadWebAssembly.js"></script>
<script src="./clayout.js"></script>
<script>if (window.module) module = window.module;</script>
<script src="./app.js"></script>

</body>

</html>