78 lines
3.1 KiB
JavaScript
78 lines
3.1 KiB
JavaScript
(function() {
|
|
function initBase64Tool() {
|
|
const container = document.getElementById('tool-base64-container');
|
|
if (!container) return;
|
|
|
|
container.addEventListener('click', (e) => e.stopPropagation());
|
|
|
|
const dropZone = document.getElementById('drop-zone');
|
|
const fileInput = document.getElementById('file-input');
|
|
const outputBase64 = document.getElementById('output-base64');
|
|
const btnCopy = document.getElementById('btn-copy');
|
|
const btnClear = document.getElementById('btn-clear');
|
|
const inputBase64 = document.getElementById('input-base64');
|
|
const btnPreview = document.getElementById('btn-preview');
|
|
const imagePreview = document.getElementById('image-preview');
|
|
|
|
// Image to Base64
|
|
function processFile(file) {
|
|
if (!file.type.startsWith('image/')) {
|
|
alert('请上传图片文件');
|
|
return;
|
|
}
|
|
outputBase64.value = '处理中...';
|
|
const reader = new FileReader();
|
|
reader.onload = (e) => {
|
|
outputBase64.value = e.target.result;
|
|
};
|
|
reader.onerror = () => {
|
|
alert('读取文件失败');
|
|
outputBase64.value = '';
|
|
};
|
|
reader.readAsDataURL(file);
|
|
}
|
|
|
|
dropZone.addEventListener('click', () => fileInput.click());
|
|
dropZone.addEventListener('dragover', (e) => {
|
|
e.preventDefault();
|
|
dropZone.style.background = '#eef4fe';
|
|
});
|
|
dropZone.addEventListener('dragleave', () => {
|
|
dropZone.style.background = '';
|
|
});
|
|
dropZone.addEventListener('drop', (e) => {
|
|
e.preventDefault();
|
|
dropZone.style.background = '';
|
|
const files = e.dataTransfer.files;
|
|
if (files.length) processFile(files[0]);
|
|
});
|
|
fileInput.addEventListener('change', () => {
|
|
if (fileInput.files.length) processFile(fileInput.files[0]);
|
|
});
|
|
|
|
btnCopy.addEventListener('click', () => {
|
|
if (!outputBase64.value) return;
|
|
outputBase64.select();
|
|
navigator.clipboard.writeText(outputBase64.value).then(() => alert('已复制到剪贴板'));
|
|
});
|
|
|
|
btnClear.addEventListener('click', () => {
|
|
outputBase64.value = '';
|
|
fileInput.value = '';
|
|
});
|
|
|
|
// Base64 to Image
|
|
btnPreview.addEventListener('click', () => {
|
|
const val = inputBase64.value.trim();
|
|
if (!val) {
|
|
imagePreview.innerHTML = '<span style="color: #999;">预览区域</span>';
|
|
return;
|
|
}
|
|
imagePreview.innerHTML = `<img src="${val}" style="max-width:100%; box-shadow:0 2px 8px rgba(0,0,0,0.2);" onerror="this.parentElement.innerHTML='<span style=\\'color:red\\'>无法解析图片，请检查 Base64 代码是否完整</span>'">`;
|
|
});
|
|
}
|
|
|
|
document.addEventListener('DOMContentLoaded', initBase64Tool);
|
|
document.addEventListener('pjax:complete', initBase64Tool);
|
|
})();
|