多图片设定大小变更功能完成
This commit is contained in:
commit
4007e44a98
|
|
@ -0,0 +1,144 @@
|
|||
div {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
body {
|
||||
background-color: #FFFFCC;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.container {
|
||||
width: 100vw;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.left {
|
||||
width: 20vw;
|
||||
height: 90vh;
|
||||
padding-top: 10vh;
|
||||
background-color: #CCFFFF;
|
||||
justify-content: flex-start;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.row {
|
||||
width: 20vw;
|
||||
margin: 5px 5px;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.row_Text {
|
||||
margin-top: 2px;
|
||||
width: 15vw;
|
||||
font-size: large;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.title {
|
||||
border-bottom: 1px solid black;
|
||||
|
||||
margin-bottom: 5px;
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.down {
|
||||
position: relative;
|
||||
margin-top: auto;
|
||||
margin-bottom: 5vh;
|
||||
justify-self: flex-end;
|
||||
}
|
||||
|
||||
.right {
|
||||
width: 80vw;
|
||||
height: 100vh;
|
||||
}
|
||||
|
||||
.drop {
|
||||
margin: 2vh;
|
||||
width: 70vw;
|
||||
height: 90vh;
|
||||
}
|
||||
|
||||
.pic {
|
||||
display: none;
|
||||
margin: 2vh;
|
||||
width: 70vw;
|
||||
height: 90vh;
|
||||
}
|
||||
|
||||
.imgCol {
|
||||
justify-content: flex-start;
|
||||
width: 21vw;
|
||||
margin: 10vh 1vw 10vh 1vw;
|
||||
flex-direction: column;
|
||||
height: 90vh;
|
||||
overflow-y: scroll;
|
||||
}
|
||||
|
||||
.imgCol::-webkit-scrollbar {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.imgcard {
|
||||
margin: 5px 0;
|
||||
border: 3px dotted gray;
|
||||
box-shadow: 1px black;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.imgdesp {
|
||||
font-size: large;
|
||||
}
|
||||
|
||||
.inputs{
|
||||
justify-content: flex-start;
|
||||
}
|
||||
|
||||
.scale_size{
|
||||
display: flex;
|
||||
font-size: medium;
|
||||
margin: 0 3px;
|
||||
width: 4vw;
|
||||
}
|
||||
|
||||
.scale_size_but{
|
||||
width: 7vw;
|
||||
height: 5vh;
|
||||
background-color: white;
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
#imgList {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
#dropbox {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
border: 5px dashed gray;
|
||||
border-radius: 8px;
|
||||
background: #FFFFCC;
|
||||
background-size: 100%;
|
||||
background-repeat: no-repeat;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
font-size: xx-large;
|
||||
}
|
||||
|
||||
#canvasList {
|
||||
display: none;
|
||||
/* flex-direction: column; */
|
||||
}
|
||||
|
||||
#fileInput {
|
||||
display: none;
|
||||
}
|
||||
|
||||
#pic_scale_size {
|
||||
display: none;
|
||||
}
|
||||
|
|
@ -0,0 +1,50 @@
|
|||
<!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_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()">点击缩放</div>
|
||||
</div>
|
||||
<!-- <div class="row">
|
||||
<div class="title">指定比例缩放</div>
|
||||
</div> -->
|
||||
<div class="row down">下载</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="main.js"></script>
|
||||
</body>
|
||||
File diff suppressed because one or more lines are too long
|
|
@ -0,0 +1,217 @@
|
|||
var dropBox, canvasList, imgList, work, imgCols
|
||||
var canvass = [], imgs = []
|
||||
var pic_info
|
||||
var multi
|
||||
var imgh = [0, 0, 0]
|
||||
|
||||
var vh = window.innerHeight / 100;
|
||||
var vw = window.innerWidth / 100;;
|
||||
|
||||
window.onload = function () {
|
||||
dropBox = document.getElementById("dropbox");
|
||||
canvasList = document.getElementById("canvasList");
|
||||
work = document.getElementById("work");
|
||||
pic_info = document.getElementById("pic_info");
|
||||
imgList = document.getElementById("imgList");
|
||||
imgCols = [document.getElementById("c1"), document.getElementById("c2"), document.getElementById("c3")]
|
||||
dropBox.ondragenter = dropFileEnter;
|
||||
dropBox.ondragover = dropFileOver;
|
||||
dropBox.ondragleave = dropFileLeave;
|
||||
dropBox.ondrop = dropFile;
|
||||
}
|
||||
|
||||
function dropFileLeave(e) {
|
||||
e.preventDefault();
|
||||
dropBox.style.background = "#FFFFCC";
|
||||
}
|
||||
|
||||
function dropFileEnter(e) {
|
||||
e.preventDefault();
|
||||
dropBox.style.background = "rgb(182, 182, 162)";
|
||||
}
|
||||
|
||||
function dropFileOver(e) {
|
||||
e.preventDefault();
|
||||
}
|
||||
|
||||
function dropFile(e) {
|
||||
e.stopPropagation();
|
||||
e.preventDefault();
|
||||
var data = e.dataTransfer;
|
||||
var files = []
|
||||
for (var i = 0; i < data.files.length; i++) {
|
||||
var file_type = data.files[i].type;
|
||||
if (file_type.substr(0, 5) == "image") {
|
||||
files.push(data.files[i]);
|
||||
}
|
||||
}
|
||||
if (files.length == 0) {
|
||||
noFileError();
|
||||
}
|
||||
else processFiles(files);
|
||||
}
|
||||
|
||||
function noFileError() {
|
||||
dropBox.style.background = "indianred";
|
||||
dropBox.innerHTML = "无有效图片文件"
|
||||
setTimeout(function () {
|
||||
dropBox.style.background = "lightyellow";
|
||||
dropBox.innerHTML = "请点击上传或将图片拖入"
|
||||
}, 1000)
|
||||
}
|
||||
|
||||
function selectFile() {
|
||||
var fileInput = document.getElementById("fileInput");
|
||||
fileInput.click();
|
||||
}
|
||||
|
||||
function processFiles(files) {
|
||||
multi = files.length == 1 ? 0 : 1;
|
||||
document.getElementById("drop").style.display = "none";
|
||||
document.getElementById("pic_scale_size").style.display = "flex";
|
||||
work.style.display = "flex";
|
||||
var pic_num = document.createElement('div');
|
||||
pic_num.setAttribute("class", "row_Text");
|
||||
pic_num.innerHTML = "图片数量：" + files.length + " 张"
|
||||
pic_info.appendChild(pic_num)
|
||||
var canvas_i = 0;
|
||||
for (var i = 0; i < files.length; i++) {
|
||||
var reader = new FileReader();
|
||||
reader.onload = function (e) {
|
||||
var image = new Image();
|
||||
image.src = e.target.result;
|
||||
image.onload = function () {
|
||||
var width = image.width;
|
||||
var height = image.height;
|
||||
var canvas = document.createElement('canvas');
|
||||
var ctx = canvas.getContext("2d");
|
||||
canvas.setAttribute("width", width + "px")
|
||||
canvas.setAttribute("height", height + "px")
|
||||
canvas.setAttribute("id", "canvas_" + canvas_i);
|
||||
|
||||
ctx.drawImage(image, 0, 0);
|
||||
|
||||
canvass.push(canvas)
|
||||
|
||||
canvasList.appendChild(canvas);
|
||||
|
||||
imgInsert(image, canvas_i);
|
||||
canvas_i++;
|
||||
// imgList.appendChild(image);
|
||||
// dropBox.style.backgroundImage = "url('" + e.target.result + "')";
|
||||
};
|
||||
};
|
||||
reader.readAsDataURL(files[i]);
|
||||
}
|
||||
}
|
||||
|
||||
function findex(value, arr) {
|
||||
for (var i = 0; i < arr.length; i++) {
|
||||
if (arr[i] == value) return i;
|
||||
}
|
||||
return null;
|
||||
}
|
||||
|
||||
function imgInsert(img, index) {
|
||||
var i = findex(Math.min(...imgh), imgh)
|
||||
imgh[i] += img.height / img.width * 20 * vw + 24;
|
||||
var imgdiv = document.createElement('div');
|
||||
var imgdesp = document.createElement('div');
|
||||
imgdiv.setAttribute("class", "imgcard")
|
||||
imgdesp.setAttribute("class", "imgdesp")
|
||||
imgdesp.innerHTML = "[" + (index + 1) + "] " + img.width + " x " + img.height
|
||||
img.setAttribute("width", 20 * vw + "px")
|
||||
imgdiv.setAttribute("id", "img_" + index)
|
||||
|
||||
imgdiv.appendChild(img);
|
||||
imgdiv.appendChild(imgdesp);
|
||||
imgCols[i].appendChild(imgdiv);
|
||||
|
||||
imgs.push(img)
|
||||
}
|
||||
|
||||
function scale_size() {
|
||||
let new_w = document.getElementById("scale_size_width").value;
|
||||
let new_h = document.getElementById("scale_size_height").value;
|
||||
|
||||
for (let i = 0; i < canvass.length; i++) {
|
||||
let scale_x = new_w / canvass[i].width
|
||||
let scale_y = new_h / canvass[i].height
|
||||
scale(i, scale_x, scale_y)
|
||||
}
|
||||
}
|
||||
|
||||
function scale(index, scale_x, scale_y) {
|
||||
canvas = canvass[index]
|
||||
cxt = canvas.getContext("2d")
|
||||
imgData = cxt.getImageData(0, 0, canvas.width, canvas.height);
|
||||
|
||||
canvas2 = document.createElement('canvas');
|
||||
let ctx = canvas2.getContext('2d');
|
||||
|
||||
ori_w = imgData.width;
|
||||
ori_h = imgData.height;
|
||||
|
||||
canvas2.setAttribute("height", ori_h * scale_y + "px");
|
||||
canvas2.setAttribute("width", ori_w * scale_x + "px");
|
||||
canvas2.setAttribute("id", "canvas_" + index)
|
||||
|
||||
let data_s = []
|
||||
for (let i = 0; i < imgData.data.length;) {
|
||||
data_s.push(imgData.data.slice(i, i += 4));
|
||||
}
|
||||
let datas = []
|
||||
for (let i = 0; i < data_s.length;) {
|
||||
datas.push(data_s.slice(i, i += ori_w));
|
||||
}
|
||||
|
||||
for (let i = 0; i < ori_h * scale_y; i++) {
|
||||
for (let j = 0; j < ori_w * scale_x; j++) {
|
||||
red = datas[Math.floor(i / scale_y)][Math.floor(j / scale_x)][0];
|
||||
green = datas[Math.floor(i / scale_y)][Math.floor(j / scale_x)][1];
|
||||
blue = datas[Math.floor(i / scale_y)][Math.floor(j / scale_x)][2];
|
||||
alpha = datas[Math.floor(i / scale_y)][Math.floor(j / scale_x)][3];
|
||||
ctx.fillStyle = "rgba(" + red + "," + green + "," + blue + "," + alpha + ")";
|
||||
ctx.fillRect(j, i, 1, 1)
|
||||
}
|
||||
}
|
||||
let imgdata = canvas2.toDataURL();
|
||||
newImg = new Image();
|
||||
newImg.src = imgdata;
|
||||
newImg.setAttribute("width", 20 * vw + "px")
|
||||
|
||||
document.getElementById("img_" + index).replaceChild(newImg, imgs[index]);
|
||||
document.getElementById("img_" + index).getElementsByTagName("div")[0].innerHTML = "[" + (index + 1) + "] " + canvas2.width + " x " + canvas2.height;
|
||||
canvasList.replaceChild(canvas2, canvass[index]);
|
||||
|
||||
canvass[index] = canvas2;
|
||||
imgs[index] = newImg;
|
||||
}
|
||||
|
||||
// canvas = document.getElementById('Canvas');
|
||||
// let cxt = canvas.getContext('2d');
|
||||
// let l = canvas.width / 2;
|
||||
// const PI = Math.PI;
|
||||
// cxt.translate(l, l);
|
||||
|
||||
// let createTaiChi = () => {
|
||||
// cxt.clearRect(-l, -l, l, l);
|
||||
// cxt.arc(0, 0, l, 0, 2 * PI, 0);
|
||||
// cxt.stroke();
|
||||
// cxt.beginPath();
|
||||
// cxt.arc(0, -l / 2, l / 2, -PI / 2, PI / 2, 0);
|
||||
// cxt.arc(0, l / 2, l / 2, 3 / 2 * PI, PI / 2, 1);
|
||||
// cxt.arc(0, 0, l, PI / 2, PI * 3 / 2, 0);
|
||||
// cxt.fill();
|
||||
// cxt.beginPath();
|
||||
// cxt.fillStyle = '#fff';
|
||||
// cxt.arc(0, -l / 2, l / 7, 0, PI * 2, 0);
|
||||
// cxt.fill();
|
||||
// cxt.beginPath();
|
||||
// cxt.fillStyle = '#000';
|
||||
// cxt.arc(0, l / 2, l / 7, 0, PI * 2, 0);
|
||||
// cxt.fill();
|
||||
// };
|
||||
|
||||
// createTaiChi();
|
||||
|
||||
Loading…
Reference in New Issue