更新双线性插值
This commit is contained in:
parent
6c2b90dc6e
commit
b03db14325
|
|
@ -150,7 +150,8 @@ body {
|
|||
|
||||
#pic_scale_size,
|
||||
#pic_scale_sc,
|
||||
#pic_scale_fun {
|
||||
#pic_scale_fun,
|
||||
#pic_scale_mode {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
|
|
|||
13
index.html
13
index.html
|
|
@ -28,6 +28,13 @@
|
|||
<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">
|
||||
|
|
@ -37,7 +44,7 @@
|
|||
</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" 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">
|
||||
|
|
@ -46,9 +53,9 @@
|
|||
</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" id="pic_scale_fun">
|
||||
<div class="row_Text title">趣味功能</div>
|
||||
<div class="scale_size_but row" onclick="scale_size_ma()">马赛克化</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>
|
||||
|
|
|
|||
94
main.js
94
main.js
|
|
@ -1,4 +1,4 @@
|
|||
let dropBox, canvasList, imgList, work, imgCols
|
||||
let dropBox, canvasList, imgList, work, imgCols, scale_mode, datas
|
||||
let canvass = [], imgs = []
|
||||
let pic_info
|
||||
let multi
|
||||
|
|
@ -80,6 +80,7 @@ function processFiles(files) {
|
|||
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');
|
||||
|
|
@ -225,23 +226,71 @@ function scale_size_sc() {
|
|||
|
||||
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 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);
|
||||
|
|
@ -276,10 +325,19 @@ async function scale(index, scale_x, scale_y) {
|
|||
|
||||
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];
|
||||
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);
|
||||
|
|
@ -327,14 +385,12 @@ function saveImg() {
|
|||
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");
|
||||
});
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue