wood/extractstamp
1
0
Fork 0
mirror of https://github.com/woodchen-ink/extractstamp.git synced 2025-07-18 14:02:01 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: add loading

Browse Source
This commit is contained in:
xxss0903 2024-10-25 10:35:03 +08:00
parent 579afd02c8
commit 135f207b5c
1 changed files with 26 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

26
index.html
View File

@ -19,12 +19,25 @@
object-fit: contain; object-fit: contain;
border: 1px solid #ddd; border: 1px solid #ddd;
} }
#loading {
display: none;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: rgba(0, 0, 0, 0.7);
color: white;
padding: 20px;
border-radius: 5px;
z-index: 1000;
}
</style> </style>
</head> </head>
<body> <body>
<h1>选择图片</h1> <h1>选择图片</h1>
<input type="file" id="imageInput" accept="image/*" onchange="selectImage()"> <input type="file" id="imageInput" accept="image/*" onchange="selectImage()">
<div id="imageContainer"></div> <div id="imageContainer"></div>
<div id="loading">处理中，请稍候...</div>
<script> <script>
let isReady = false; let isReady = false;
initOpenCV((ready) => { initOpenCV((ready) => {
@ -36,9 +49,14 @@
const file = document.getElementById('imageInput').files[0]; const file = document.getElementById('imageInput').files[0];
console.log('file', file); console.log('file', file);
if (file && isReady) { if (file && isReady) {
showLoading();
extractStampWithFile(file, '#ff0000', '#ff0000', true).then(dstImgList => { extractStampWithFile(file, '#ff0000', '#ff0000', true).then(dstImgList => {
console.log('提取红色印章成功', dstImgList); console.log('提取红色印章成功', dstImgList);
displayImages(dstImgList); displayImages(dstImgList);
hideLoading();
}).catch(error => {
console.error('处理图片时出错:', error);
hideLoading();
}); });
} else if (!isReady) { } else if (!isReady) {
console.log('OpenCV.js 尚未加载完成，请稍后再试'); console.log('OpenCV.js 尚未加载完成，请稍后再试');
@ -57,6 +75,14 @@
container.appendChild(img); container.appendChild(img);
}); });
} }
function showLoading() {
document.getElementById('loading').style.display = 'block';
}
function hideLoading() {
document.getElementById('loading').style.display = 'none';
}
</script> </script>
</body> </body>
</html> </html>