312 lines
10 KiB
JavaScript
312 lines
10 KiB
JavaScript
let dropBox, canvasList, imgList, work, imgCols
|
|
let canvass = [], imgs = []
|
|
let pic_info
|
|
let multi
|
|
let imgh = [0, 0, 0]
|
|
|
|
let vh = window.innerHeight / 100;
|
|
let 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();
|
|
let data = e.dataTransfer;
|
|
let files = []
|
|
for (let i = 0; i < data.files.length; i++) {
|
|
let 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() {
|
|
let 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";
|
|
document.getElementById("pic_scale_sc").style.display = "flex";
|
|
document.getElementById("pic_scale_fun").style.display = "flex";
|
|
work.style.display = "flex";
|
|
if (multi == 1) {
|
|
let pic_num = document.createElement('div');
|
|
pic_num.setAttribute("class", "row_Text");
|
|
pic_num.innerHTML = "图片数量：" + files.length + " 张"
|
|
pic_info.appendChild(pic_num)
|
|
|
|
let canvas_i = 0;
|
|
for (let i = 0; i < files.length; i++) {
|
|
let reader = new FileReader();
|
|
reader.onload = function (e) {
|
|
let image = new Image();
|
|
image.src = e.target.result;
|
|
image.onload = function () {
|
|
let width = image.width;
|
|
let height = image.height;
|
|
let canvas = document.createElement('canvas');
|
|
let 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++;
|
|
};
|
|
};
|
|
reader.readAsDataURL(files[i]);
|
|
}
|
|
}
|
|
else {
|
|
let file = files[0]
|
|
let ls = 4, rows = [];
|
|
while (ls--) {
|
|
let row = document.createElement('div')
|
|
row.setAttribute("class", "row_Text");
|
|
rows.push(row)
|
|
}
|
|
rows[0].innerHTML = "文件名：" + file.name
|
|
rows[1].innerHTML = "文件大小：" + file.size
|
|
rows[2].innerHTML = "文件类型：" + file.type
|
|
rows[3].innerHTML = "最后修改：" + file.lastModifiedDate
|
|
|
|
for (let i = 0; i < rows.length; i++) {
|
|
pic_info.appendChild(rows[i])
|
|
}
|
|
|
|
document.getElementById("ani_but").style.display = "flex"
|
|
|
|
document.getElementById("c2").style.display = "none"
|
|
document.getElementById("c3").style.display = "none"
|
|
|
|
let reader = new FileReader();
|
|
reader.onload = function (e) {
|
|
let image = new Image();
|
|
image.src = e.target.result;
|
|
image.onload = function () {
|
|
let width = image.width;
|
|
let height = image.height;
|
|
|
|
let row = document.createElement('div')
|
|
row.setAttribute("class", "row_Text");
|
|
row.setAttribute("id", "size")
|
|
row.innerHTML = "尺寸：" + width + " x " + height
|
|
pic_info.appendChild(row)
|
|
|
|
let canvas = document.createElement('canvas')
|
|
let ctx = canvas.getContext("2d")
|
|
|
|
canvas.setAttribute("width", width + "px")
|
|
canvas.setAttribute("height", height + "px")
|
|
canvas.setAttribute("id", "canvas");
|
|
|
|
ctx.drawImage(image, 0, 0);
|
|
|
|
canvass.push(canvas)
|
|
canvasList.appendChild(canvas);
|
|
|
|
if (canvas.width > 60 * vw) image.setAttribute("width", 60 * vw + "px")
|
|
document.getElementById("c1").appendChild(image)
|
|
document.getElementById("c1").style.width = 70 * vw + "px"
|
|
|
|
imgs.push(image);
|
|
|
|
document.getElementById("scale_size_width").value = Math.round(width / 2)
|
|
document.getElementById("scale_size_height").value = Math.round(height / 2)
|
|
|
|
};
|
|
};
|
|
reader.readAsDataURL(file);
|
|
}
|
|
}
|
|
|
|
function findex(value, arr) {
|
|
for (let i = 0; i < arr.length; i++) {
|
|
if (arr[i] == value) return i;
|
|
}
|
|
return null;
|
|
}
|
|
|
|
function imgInsert(img, index) {
|
|
let i = findex(Math.min(...imgh), imgh)
|
|
imgh[i] += img.height / img.width * 20 * vw + 24;
|
|
let imgdiv = document.createElement('div');
|
|
let 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_size_sc() {
|
|
let scale_x = parseFloat(document.getElementById("scale_size_sc_x").value);
|
|
let scale_y = parseFloat(document.getElementById("scale_size_sc_y").value);
|
|
for (let i = 0; i < canvass.length; i++) {
|
|
scale(i, scale_x, scale_y)
|
|
}
|
|
}
|
|
|
|
function scale_size_ma() {
|
|
for (let i = 0; i < canvass.length; i++) {
|
|
// let minx = Math.min(canvass[i].width, canvass[i].height)
|
|
// let ls = 0;
|
|
// while (minx) {
|
|
// ls++
|
|
// minx = Math.floor(minx / 10);
|
|
// }
|
|
// if (ls > 2) {
|
|
// let scale_s = Math.pow(10, ls-2);
|
|
// scale(i, 1 / scale_s, 1 / scale_s)
|
|
// scale(i, scale_s, scale_s)
|
|
// }
|
|
|
|
scale(i, 0.3, 0.3)
|
|
}
|
|
}
|
|
|
|
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;
|
|
|
|
if (multi == 1) {
|
|
|
|
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;
|
|
}
|
|
else {
|
|
if (canvas2.width > 60 * vw) newImg.setAttribute("width", 60 * vw + "px")
|
|
|
|
document.getElementById("size").innerHTML = "尺寸：" + canvas2.width + " x " + canvas2.height
|
|
|
|
document.getElementById("c1").replaceChild(newImg, imgs[index]);
|
|
canvasList.replaceChild(canvas2, canvass[index]);
|
|
|
|
canvass[index] = canvas2;
|
|
imgs[index] = newImg;
|
|
}
|
|
}
|
|
|
|
function saveImg() {
|
|
if (multi == 1) {
|
|
let blobs = []
|
|
for (let i = 0; i < canvass.length; i++) {
|
|
canvass[i].toBlob(function (blob) {
|
|
console.log(blob)
|
|
saveAs(blob, "yiipic_" + (i + 1) + ".png");
|
|
});
|
|
}
|
|
}
|
|
else {
|
|
canvass[0].toBlob(function (blob) {
|
|
console.log(blob)
|
|
saveAs(blob, "yiipic.png");
|
|
});
|
|
}
|
|
} |