123 lines
5.0 KiB
JavaScript
123 lines
5.0 KiB
JavaScript
(function() {
|
|
let surfaceImg = null;
|
|
let hiddenImg = null;
|
|
|
|
function initMirageTankTool() {
|
|
const container = document.getElementById('tool-mirage-container');
|
|
if (!container) return;
|
|
|
|
container.addEventListener('click', (e) => e.stopPropagation());
|
|
|
|
const imgSurfaceInput = document.getElementById('img-surface');
|
|
const imgHiddenInput = document.getElementById('img-hidden');
|
|
const btnGenerate = document.getElementById('generate-btn');
|
|
const btnDownload = document.getElementById('btn-download');
|
|
const canvas = document.getElementById('result-canvas');
|
|
const resultArea = document.getElementById('result-area');
|
|
const bgBtns = document.querySelectorAll('.preview-bg-btn');
|
|
|
|
function handleFile(input, imgId, textId, type) {
|
|
input.addEventListener('change', (e) => {
|
|
if (!e.target.files.length) return;
|
|
const file = e.target.files[0];
|
|
const reader = new FileReader();
|
|
reader.onload = (event) => {
|
|
const img = new Image();
|
|
img.onload = () => {
|
|
document.getElementById(imgId).src = img.src;
|
|
document.getElementById(imgId).style.display = 'block';
|
|
document.getElementById(textId).style.display = 'none';
|
|
if (type === 'surface') surfaceImg = img;
|
|
else hiddenImg = img;
|
|
checkReady();
|
|
};
|
|
img.src = event.target.result;
|
|
};
|
|
reader.readAsDataURL(file);
|
|
});
|
|
}
|
|
|
|
function checkReady() {
|
|
btnGenerate.disabled = !(surfaceImg && hiddenImg);
|
|
}
|
|
|
|
function generateMirageTank() {
|
|
if (!surfaceImg || !hiddenImg) return;
|
|
|
|
const width = Math.max(surfaceImg.width, hiddenImg.width);
|
|
const height = Math.max(surfaceImg.height, hiddenImg.height);
|
|
|
|
canvas.width = width;
|
|
canvas.height = height;
|
|
const ctx = canvas.getContext('2d');
|
|
|
|
const cvs1 = document.createElement('canvas');
|
|
cvs1.width = width; cvs1.height = height;
|
|
const ctx1 = cvs1.getContext('2d');
|
|
ctx1.fillStyle = '#fff';
|
|
ctx1.fillRect(0, 0, width, height);
|
|
ctx1.drawImage(surfaceImg, 0, 0, width, height);
|
|
const data1 = ctx1.getImageData(0, 0, width, height).data;
|
|
|
|
const cvs2 = document.createElement('canvas');
|
|
cvs2.width = width; cvs2.height = height;
|
|
const ctx2 = cvs2.getContext('2d');
|
|
ctx2.fillStyle = '#000';
|
|
ctx2.fillRect(0, 0, width, height);
|
|
ctx2.drawImage(hiddenImg, 0, 0, width, height);
|
|
const data2 = ctx2.getImageData(0, 0, width, height).data;
|
|
|
|
const resultData = ctx.createImageData(width, height);
|
|
const d = resultData.data;
|
|
|
|
for (let i = 0; i < d.length; i += 4) {
|
|
const r1 = data1[i], g1 = data1[i+1], b1 = data1[i+2];
|
|
const gray1 = 0.299 * r1 + 0.587 * g1 + 0.114 * b1;
|
|
|
|
const r2 = data2[i], g2 = data2[i+1], b2 = data2[i+2];
|
|
const gray2 = 0.299 * r2 + 0.587 * g2 + 0.114 * b2;
|
|
|
|
let a = (gray2 - gray1 + 255) / 255;
|
|
if (a < 0) a = 0;
|
|
if (a > 1) a = 1;
|
|
|
|
let p = 0;
|
|
if (a > 0.01) p = gray2 / a;
|
|
if (p > 255) p = 255;
|
|
|
|
d[i] = p;
|
|
d[i+1] = p;
|
|
d[i+2] = p;
|
|
d[i+3] = a * 255;
|
|
}
|
|
|
|
ctx.putImageData(resultData, 0, 0);
|
|
resultArea.style.display = 'block';
|
|
}
|
|
|
|
handleFile(imgSurfaceInput, 'preview-surface-img', 'preview-surface-text', 'surface');
|
|
handleFile(imgHiddenInput, 'preview-hidden-img', 'preview-hidden-text', 'hidden');
|
|
|
|
btnGenerate.addEventListener('click', generateMirageTank);
|
|
|
|
bgBtns.forEach(btn => {
|
|
btn.addEventListener('click', (e) => {
|
|
const type = e.target.getAttribute('data-bg');
|
|
if (type === 'white') canvas.style.background = 'white';
|
|
else if (type === 'black') canvas.style.background = 'black';
|
|
else canvas.style.background = "url('data:image/svg+xml;utf8,<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"20\" height=\"20\" viewBox=\"0 0 20 20\"><rect width=\"10\" height=\"10\" fill=\"%23ccc\"/><rect x=\"10\" y=\"10\" width=\"10\" height=\"10\" fill=\"%23ccc\"/></svg>') repeat";
|
|
});
|
|
});
|
|
|
|
btnDownload.addEventListener('click', () => {
|
|
const link = document.createElement('a');
|
|
link.download = 'mirage-tank.png';
|
|
link.href = canvas.toDataURL();
|
|
link.click();
|
|
});
|
|
}
|
|
|
|
document.addEventListener('DOMContentLoaded', initMirageTankTool);
|
|
document.addEventListener('pjax:complete', initMirageTankTool);
|
|
})();
|