407 lines
14 KiB
JavaScript
407 lines
14 KiB
JavaScript
let dropBox, canvasList, imgList, work, imgCols, scale_mode, datas
|
|
let canvass = [], imgs = []
|
|
let pic_info
|
|
let multi
|
|
let imgh = [0, 0, 0]
|
|
let ani_mode = 0
|
|
|
|
let vh = window.innerHeight / 100;
|
|
let vw = window.innerWidth / 100;
|
|
|
|
function sleep(millisecond) {
|
|
return new Promise(resolve => {
|
|
setTimeout(() => {
|
|
resolve()
|
|
}, millisecond)
|
|
})
|
|
}
|
|
|
|
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";
|
|
document.getElementById("pic_scale_mode").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"
|
|
document.getElementById("c1").style['justify-content'] = "center"
|
|
|
|
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++) {
|
|
scale(i, 0.3, 0.3)
|
|
}
|
|
}
|
|
|
|
// 双线性插值辅助计算函数
|
|
function linear_single(x, x1, x2, f1, f2) {
|
|
return Math.floor(f1 * (x2 - x) / (x2 - x1) + f2 * (x - x1) / (x2 - x1))
|
|
}
|
|
|
|
function linear_insert(row, col, scale_x, scale_y, datas) {
|
|
x = row / scale_y
|
|
y = col / scale_x
|
|
x1 = Math.floor(x)
|
|
x2 = Math.ceil(x)
|
|
y1 = Math.floor(y)
|
|
y2 = Math.ceil(y)
|
|
if (x2 >= ori_h) {
|
|
x2 = x1
|
|
}
|
|
if (y2 >= ori_w) {
|
|
y2 = y1
|
|
}
|
|
|
|
if (x1 == x2 && y1 == y2) {
|
|
return { 'r': datas[x1][y1][0], 'g': datas[x1][y1][1], 'b': datas[x1][y1][2], 'a': datas[x1][y1][3] }
|
|
}
|
|
if (x1 == x2) {
|
|
x = x1
|
|
r = linear_single(y, y1, y2, datas[x][y1][0], datas[x][y2][0])
|
|
g = linear_single(y, y1, y2, datas[x][y1][1], datas[x][y2][1])
|
|
b = linear_single(y, y1, y2, datas[x][y1][2], datas[x][y2][2])
|
|
a = linear_single(y, y1, y2, datas[x][y1][3], datas[x][y2][3])
|
|
return { 'r': r, 'g': g, 'b': b, 'a': a }
|
|
}
|
|
|
|
if (y1 == y2) {
|
|
y = y1
|
|
r = linear_single(x, x1, x2, datas[x1][y][0], datas[x2][y][0])
|
|
g = linear_single(x, x1, x2, datas[x1][y][1], datas[x2][y][1])
|
|
b = linear_single(x, x1, x2, datas[x1][y][2], datas[x2][y][2])
|
|
a = linear_single(x, x1, x2, datas[x1][y][3], datas[x2][y][3])
|
|
return { 'r': r, 'g': g, 'b': b, 'a': a }
|
|
}
|
|
fy1_r = linear_single(x, x1, x2, datas[x1][y1][0], datas[x2][y1][0])
|
|
fy1_g = linear_single(x, x1, x2, datas[x1][y1][1], datas[x2][y1][1])
|
|
fy1_b = linear_single(x, x1, x2, datas[x1][y1][2], datas[x2][y1][2])
|
|
fy1_a = linear_single(x, x1, x2, datas[x1][y1][3], datas[x2][y1][3])
|
|
fy2_r = linear_single(x, x1, x2, datas[x1][y2][0], datas[x2][y2][0])
|
|
fy2_g = linear_single(x, x1, x2, datas[x1][y2][1], datas[x2][y2][1])
|
|
fy2_b = linear_single(x, x1, x2, datas[x1][y2][2], datas[x2][y2][2])
|
|
fy2_a = linear_single(x, x1, x2, datas[x1][y2][3], datas[x2][y2][3])
|
|
r = linear_single(y, y1, y2, fy1_r, fy2_r)
|
|
g = linear_single(y, y1, y2, fy1_g, fy2_g)
|
|
b = linear_single(y, y1, y2, fy1_b, fy2_b)
|
|
a = linear_single(y, y1, y2, fy1_a, fy2_a)
|
|
return { 'r': r, 'g': g, 'b': b, 'a': a }
|
|
}
|
|
|
|
async function scale(index, scale_x, scale_y) {
|
|
if (document.getElementById("linear").checked) {
|
|
scale_mode = 0;
|
|
}
|
|
else {
|
|
scale_mode = 1;
|
|
}
|
|
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;
|
|
|
|
if (ani_mode) {
|
|
document.getElementById("c2").style.display = "flex"
|
|
document.getElementById("c2").append(canvas2);
|
|
document.getElementById("c2").style['justify-content'] = "center"
|
|
|
|
document.getElementById("c1").style.width = 70 * vw / (scale_x + 1) + "px"
|
|
document.getElementById("c2").style.width = 70 * vw * scale_x / (scale_x + 1) + "px"
|
|
}
|
|
|
|
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++) {
|
|
if (scale_mode == 0) {
|
|
re = linear_insert(i, j, scale_x, scale_y, datas)
|
|
red = re['r']
|
|
green = re['g']
|
|
blue = re['b']
|
|
alpha = re['a']
|
|
}
|
|
else if (scale_mode == 1) {
|
|
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)
|
|
if (ani_mode) if (j % 100 == 0) await sleep(1);
|
|
}
|
|
if (ani_mode) if (i % 2 == 0) await sleep(5);
|
|
}
|
|
|
|
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
|
|
|
|
if (ani_mode) {
|
|
await sleep(500);
|
|
document.getElementById("c1").style.width = 70 * vw + "px"
|
|
document.getElementById("c2").style.display = "none";
|
|
document.getElementById("c2").removeChild(canvas2);
|
|
}
|
|
|
|
if (canvas2.height > 90 * vh) document.getElementById("c1").style['justify-content'] = "flex-start";
|
|
|
|
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) {
|
|
saveAs(blob, "yiipic_" + (i + 1) + ".png");
|
|
});
|
|
}
|
|
}
|
|
else {
|
|
canvass[0].toBlob(function (blob) {
|
|
saveAs(blob, "yiipic.png");
|
|
});
|
|
}
|
|
}
|
|
|
|
function animatePic() {
|
|
ani_mode = !ani_mode
|
|
if (ani_mode) {
|
|
document.getElementById("ani_but").style.color = "red"
|
|
}
|
|
else {
|
|
document.getElementById("ani_but").style.color = "black"
|
|
}
|
|
} |