69 lines
3.1 KiB
HTML
69 lines
3.1 KiB
HTML
<!DOCTYPE html>
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>计算机导论大作业</title>
|
|
<link rel="stylesheet" href="index.css" />
|
|
</head>
|
|
|
|
<body>
|
|
<div class="container">
|
|
<div class="right">
|
|
<div class="drop" id="drop">
|
|
<div id="dropbox" onclick="selectFile()">
|
|
请点击上传或将图片拖入
|
|
</div>
|
|
<input id="fileInput" type="file" accept="image/*" onchange="processFiles(this.files)" multiple>
|
|
</div>
|
|
<div id="work" class="pic">
|
|
<div id="canvasList"></div>
|
|
<div id="imgList">
|
|
<div id="c1" class="imgCol"></div>
|
|
<div id="c2" class="imgCol"></div>
|
|
<div id="c3" class="imgCol"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="left">
|
|
<div class="row" id="pic_info">
|
|
<div class="row_Text title">图片信息</div>
|
|
</div>
|
|
<div class="row" id="pic_scale_mode">
|
|
<div class="row_Text title">缩放模式</div>
|
|
<div class="inputs">
|
|
<input type="radio" name="mode" id="linear" checked="checked">双线性插值法
|
|
<input type="radio" name="mode" id="nearby">最邻近插值法
|
|
</div>
|
|
</div>
|
|
<div class="row" id="pic_scale_size">
|
|
<div class="row_Text title">指定大小缩放</div>
|
|
<div class="inputs">
|
|
<input class="scale_size" id="scale_size_width" type="number" min="0" max="10000" value="128">
|
|
x
|
|
<input class="scale_size" id="scale_size_height" type="number" min="0" max="10000" value="128">
|
|
</div>
|
|
<div class="scale_size_but row" onclick="scale_size()" id="scale_size_nor">点击缩放</div>
|
|
</div>
|
|
<div class="row" id="pic_scale_sc">
|
|
<div class="row_Text title">指定比例缩放</div>
|
|
<div class="inputs">
|
|
<input class="scale_size" id="scale_size_sc_x" type="text" value="2">
|
|
x
|
|
<input class="scale_size" id="scale_size_sc_y" type="text" value="2">
|
|
</div>
|
|
<div class="scale_size_but row" onclick="scale_size_sc()" id="scale_size_sc_nor">点击缩放</div>
|
|
</div>
|
|
<div class="row" id="pic_scale_fun">
|
|
<div class="row_Text title">趣味功能</div>
|
|
<div class="scale_size_but row" onclick="scale_size_ma()">群体模糊(x0.3)</div>
|
|
<div class="scale_size_but row" onclick="animatePic()" id="ani_but">动画模式<br>（很慢！）</div>
|
|
</div>
|
|
<div class="row down" onclick="saveImg()">下载</div>
|
|
</div>
|
|
<!-- <canvas id="Canvas" width="256px" height="256px"></canvas>
|
|
<canvas id="Canvas2" width="512px" height="512px"></canvas> -->
|
|
</div>
|
|
<script src="jquery-3.6.1.min.js"></script>
|
|
<script src="FileSaver.js"></script>
|
|
<script src="main.js"></script>
|
|
</body> |