upright
/
duoji-frontend
mirror of https://gitlab.hzleaper.com:81/duoji/duoji-frontend.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

image-cropper修改

Browse Source
just-order-普洱
LAPTOP-S9HJSOEB\昊天 4 months ago
parent dff7a4e534
commit 7e2d603af1
1 changed files with 76 additions and 465 deletions
Show Stats Download Patch File Download Diff File

443
image-cropper.html
Unescape Escape View File

@ -178,44 +178,6 @@
border-radius: 8px; border-radius: 8px;
} }
.template-section {
text-align: center;
margin-bottom: 30px;
padding: 20px;
background: white;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.template-info {
font-size: 12px;
color: #666;
margin-top: 5px;
}
.template-btn {
background-color: #ffc107;
color: #333;
padding: 8px 16px;
border: none;
border-radius: 4px;
cursor: pointer;
font-size: 14px;
margin-left: 10px;
}
.template-btn:hover {
background-color: #e0a800;
}
.match-result {
margin-top: 10px;
padding: 10px;
border: 1px solid #007bff;
background-color: #e6f2ff;
border-radius: 4px;
}
.loading { .loading {
color: #666; color: #666;
font-style: italic; font-style: italic;
@ -254,11 +216,6 @@
// 存储每个code的裁剪计数 // 存储每个code的裁剪计数
const cropCounters = {}; const cropCounters = {};
// 模板匹配相关
let templateData = null; // 存储模板的像素数据
let templateCode = null; // 模板所属的code
let templateStreet = null; // 模板所属的street
// 初始化页面 // 初始化页面
@ -266,38 +223,20 @@
const grid = document.getElementById('imagesGrid'); const grid = document.getElementById('imagesGrid');
grid.innerHTML = ''; grid.innerHTML = '';
// 先按street分组，再按code分组 // 按code分组
const groupedByStreet = {}; const groupedData = {};
imagesData.forEach((item, index) => { imagesData.forEach((item, index) => {
const street = item.street || 'unknown';
const code = item.code || `img_${index}`; const code = item.code || `img_${index}`;
if (!groupedByStreet[street]) { if (!groupedData[code]) {
groupedByStreet[street] = {}; groupedData[code] = [];
}
if (!groupedByStreet[street][code]) {
groupedByStreet[street][code] = [];
} }
groupedByStreet[street][code].push({ ...item, index }); groupedData[code].push({ ...item, index });
}); });
// 为每个street添加分隔符和图片 // 为每个code添加分隔符和图片
Object.keys(groupedByStreet).forEach((street, streetIndex) => { Object.keys(groupedData).forEach((code, codeIndex) => {
// 添加street分隔符（如果不是第一个） // 添加分隔符（如果不是第一个）
if (streetIndex > 0) { if (codeIndex > 0) {
const separator = document.createElement('div');
separator.className = 'code-separator';
separator.textContent = `Street: ${street}`;
separator.style.borderColor = '#28a745';
separator.style.color = '#28a745';
separator.style.backgroundColor = '#f0fff0';
grid.appendChild(separator);
}
// 为该street下的每个code添加分隔符和图片
const codes = Object.keys(groupedByStreet[street]);
codes.forEach((code, codeIndex) => {
// 添加code分隔符
if (codeIndex > 0 || streetIndex > 0) {
const separator = document.createElement('div'); const separator = document.createElement('div');
separator.className = 'code-separator'; separator.className = 'code-separator';
separator.textContent = `Code: ${code}`; separator.textContent = `Code: ${code}`;
@ -305,10 +244,10 @@
} }
// 添加该code的所有图片 // 添加该code的所有图片
groupedByStreet[street][code].forEach((item) => { groupedData[code].forEach((item) => {
const key = `${item.code}-1${item.index + 1}`; const key = `${item.code}_1${item.index + 1}`;
const url = item.url; const url = item.url;
const imageItem = createImageItem(key, url, code, item.street); const imageItem = createImageItem(key, url, code);
grid.appendChild(imageItem); grid.appendChild(imageItem);
// 初始化裁剪计数器 // 初始化裁剪计数器
@ -329,11 +268,10 @@
} }
}); });
}); });
});
} }
// 创建单个图片项目 // 创建单个图片项目
function createImageItem(key, url, code, street) { function createImageItem(key, url, code) {
const div = document.createElement('div'); const div = document.createElement('div');
div.className = 'image-item'; div.className = 'image-item';
div.innerHTML = ` div.innerHTML = `
@ -346,10 +284,8 @@
<div class="crop-info" id="info-${key}">鼠标悬停开始裁剪</div> <div class="crop-info" id="info-${key}">鼠标悬停开始裁剪</div>
<div class="button-group"> <div class="button-group">
<button class="reset-btn" onclick="resetCrop('${key}')">重置裁剪</button> <button class="reset-btn" onclick="resetCrop('${key}')">重置裁剪</button>
<button class="template-btn" onclick="matchTemplate('${key}', '${code}', '${street || ''}')">匹配并裁剪</button>
<button class="delete-btn" onclick="deleteImage('${key}')">删除图片</button> <button class="delete-btn" onclick="deleteImage('${key}')">删除图片</button>
</div> </div>
<div id="match-result-${key}"></div>
<div id="cropped-preview-${key}"></div> <div id="cropped-preview-${key}"></div>
`; `;
@ -477,7 +413,7 @@
const previewContainer = document.getElementById(`cropped-preview-${key}`); const previewContainer = document.getElementById(`cropped-preview-${key}`);
// 提取code // 提取code
const code = key.split('-')[0]; const code = key.split('_')[0];
// 增加该code的裁剪计数 // 增加该code的裁剪计数
cropCounters[code] = (cropCounters[code] || 0) + 1; cropCounters[code] = (cropCounters[code] || 0) + 1;
@ -510,8 +446,8 @@
return; return;
} }
// 使用code-1 + 序号的格式，如130665-11, 130665-12 // 使用code_1 + 序号的格式，如130665_11, 130665_12
const cropKey = `${code}-1${cropCounters[code]}`; const cropKey = `${code}_1${cropCounters[code]}`;
croppedImages[cropKey] = blob; croppedImages[cropKey] = blob;
// 显示预览 // 显示预览
@ -557,177 +493,11 @@
info.textContent = '点击图片开始裁剪'; info.textContent = '点击图片开始裁剪';
} }
// 在裁剪完成后，使用当前裁剪作为模板，识别相同巷道、相同code的其他图片
function matchTemplate(key, code, street) {
// 检查是否有裁剪的图片作为模板
const croppedPreview = document.getElementById(`cropped-preview-${key}`);
const croppedImg = croppedPreview?.querySelector('.cropped-img');
if (!croppedImg) {
alert('请先在当前图片上裁剪出一个区域作为模板！');
return;
}
// 获取模板图片
const templateImg = new Image();
templateImg.onload = function() {
// 提取模板像素数据
const templateCanvas = document.createElement('canvas');
templateCanvas.width = templateImg.naturalWidth;
templateCanvas.height = templateImg.naturalHeight;
const templateCtx = templateCanvas.getContext('2d');
templateCtx.drawImage(templateImg, 0, 0);
const templatePixels = templateCtx.getImageData(0, 0, templateCanvas.width, templateCanvas.height);
// 保存模板数据
templateData = templatePixels;
templateCode = code;
templateStreet = street;
// 在相同巷道、相同code的其他图片上进行匹配
autoMatchAllImages(code, street);
};
templateImg.src = croppedImg.src;
}
// 自动在所有匹配的图片上进行模板匹配和裁剪
function autoMatchAllImages(targetCode, targetStreet) {
if (!templateData) {
return;
}
const results = [];
const matchedKeys = [];
// 遍历所有图片
imagesData.forEach((item, index) => {
const currentCode = item.code;
const currentStreet = item.street;
const key = `${item.code}-1${item.index + 1}`;
// 只处理相同巷道和相同code的图片
if (currentCode === targetCode && currentStreet === targetStreet) {
const img = document.getElementById(`img-${key}`);
if (!img || !img.complete) return;
// 执行模板匹配
const matchResult = findBestMatch(img, templateData);
if (matchResult && matchResult.score > 0.7) {
results.push({
key: key,
score: matchResult.score,
x: matchResult.x,
y: matchResult.y,
width: matchResult.width,
height: matchResult.height
});
matchedKeys.push(key);
}
}
});
// 根据匹配结果自动裁剪
results.forEach(result => {
if (result.key !== `${templateCode}-11`) { // 不裁剪模板图片本身
autoCropByMatch(result);
}
});
// 提示结果
if (results.length > 0) {
alert(`在 ${results.length} 张图片中找到匹配并自动裁剪！`);
} else {
alert('未找到匹配的图片！');
}
}
// 使用像素对比进行模板匹配（不使用OpenCV）
function findBestMatch(img, templateData) {
const targetCanvas = document.createElement('canvas');
targetCanvas.width = img.naturalWidth;
targetCanvas.height = img.naturalHeight;
const targetCtx = targetCanvas.getContext('2d');
targetCtx.drawImage(img, 0, 0);
const targetPixels = targetCtx.getImageData(0, 0, targetCanvas.width, targetCanvas.height);
const templateWidth = templateData.width;
const templateHeight = templateData.height;
const targetWidth = targetPixels.width;
const targetHeight = targetPixels.height;
// 模板不能比目标图片大
if (templateWidth > targetWidth || templateHeight > targetHeight) {
return null;
}
let bestMatch = { score: 0, x: 0, y: 0, width: templateWidth, height: templateHeight };
const step = 5; // 步长，提高性能
// 滑动窗口匹配
for (let y = 0; y <= targetHeight - templateHeight; y += step) {
for (let x = 0; x <= targetWidth - templateWidth; x += step) {
const score = comparePixelRegion(targetPixels, templateData, x, y, templateWidth, templateHeight);
if (score > bestMatch.score) {
bestMatch = { score, x, y, width: templateWidth, height: templateHeight };
}
}
}
return bestMatch.score > 0.7 ? bestMatch : null;
}
// 比较两个像素区域的相似度
function comparePixelRegion(targetPixels, templatePixels, startX, startY, width, height) {
let totalDiff = 0;
let totalPixels = 0;
for (let y = 0; y < height; y += 2) { // 每2个像素采样一次，提高性能
for (let x = 0; x < width; x += 2) {
const targetIndex = ((startY + y) * targetPixels.width + (startX + x)) * 4;
const templateIndex = (y * templatePixels.width + x) * 4;
// 计算RGB差异
const diffR = Math.abs(targetPixels.data[targetIndex] - templatePixels.data[templateIndex]);
const diffG = Math.abs(targetPixels.data[targetIndex + 1] - templatePixels.data[templateIndex + 1]);
const diffB = Math.abs(targetPixels.data[targetIndex + 2] - templatePixels.data[templateIndex + 2]);
totalDiff += (diffR + diffG + diffB) / 3;
totalPixels++;
}
}
const avgDiff = totalDiff / totalPixels;
// 转换为相似度（0-1）
const similarity = Math.max(0, 1 - (avgDiff / 255));
return similarity;
}
// 根据匹配结果自动裁剪
function autoCropByMatch(result) {
const { key, x, y, width, height } = result;
const img = document.getElementById(`img-${key}`);
if (!img) return;
// 计算缩放比例
const scaleX = img.clientWidth / img.naturalWidth;
const scaleY = img.clientHeight / img.naturalHeight;
// 转换到显示坐标
const displayX = x * scaleX;
const displayY = y * scaleY;
const displayWidth = width * scaleX;
const displayHeight = height * scaleY;
// 执行裁剪
performCrop(key, displayX, displayY, displayWidth, displayHeight);
}
// 删除图片 // 删除图片
function deleteImage(key) { function deleteImage(key) {
// 从imagesData中移除 // 从imagesData中移除
const index = imagesData.findIndex(item => { const index = imagesData.findIndex(item => {
const itemKey = item.code ? `${item.code}-1${imagesData.indexOf(item) + 1}` : `img_${imagesData.indexOf(item) + 1}`; const itemKey = item.code ? `${item.code}_1${imagesData.indexOf(item) + 1}` : `img_${imagesData.indexOf(item) + 1}`;
return itemKey === key; return itemKey === key;
}); });
@ -743,86 +513,9 @@
initializePage(); initializePage();
} }
// 按巷道导出
function exportByStreet(street) {
const croppedKeys = Object.keys(croppedImages);
const streetImages = [];
// 筛选出该巷道的图片
croppedKeys.forEach(key => {
const code = key.split('-')[0];
const item = imagesData.find(img => img.code === code && img.street === street);
if (item) {
streetImages.push(key);
}
});
if (streetImages.length === 0) {
alert(`巷道 ${street} 没有裁剪的图片可以导出！`);
return;
}
// 创建ZIP文件
createZipFileByStreet(street, streetImages);
}
// 为特定巷道创建ZIP文件
async function createZipFileByStreet(street, imageKeys) {
try {
const files = [];
// 收集该巷道的文件数据 // 创建并下载所有裁剪图片
for (const key of imageKeys) {
const blob = croppedImages[key];
const arrayBuffer = await blobToArrayBuffer(blob);
const fileName = `${key}.png`;
files.push({
name: fileName,
data: new Uint8Array(arrayBuffer)
});
}
// 生成ZIP文件
const zipBlob = createSimpleZip(files);
// 下载ZIP文件
const fileName = `${street}.zip`;
downloadFile(zipBlob, fileName);
alert(`已导出巷道 ${street} 的 ${imageKeys.length} 个裁剪图片`);
} catch (error) {
console.error('导出ZIP失败:', error);
alert('导出ZIP文件失败，请重试！');
}
}
// 为每个巷道添加导出按钮
function addStreetExportButtons() {
const grid = document.getElementById('imagesGrid');
const streets = new Set(imagesData.map(item => item.street));
streets.forEach(street => {
const exportBtn = document.createElement('button');
exportBtn.className = 'export-btn';
exportBtn.style.margin = '10px auto';
exportBtn.style.display = 'block';
exportBtn.textContent = `导出巷道 ${street}`;
exportBtn.onclick = () => exportByStreet(street);
grid.appendChild(exportBtn);
});
}
// 修改初始化页面函数，添加导出按钮
const originalInitializePage = initializePage;
initializePage = function() {
originalInitializePage();
addStreetExportButtons();
};
// 创建并下载所有裁剪图片为ZIP
async function exportAllCroppedImages() { async function exportAllCroppedImages() {
const croppedKeys = Object.keys(croppedImages); const croppedKeys = Object.keys(croppedImages);
@ -831,19 +524,14 @@
return; return;
} }
try { // 逐个下载图片文件
// 创建ZIP文件 for (const key of croppedKeys) {
const zipBlob = await createZipFile(); const blob = croppedImages[key];
const fileName = `${key}.png`;
// 下载ZIP文件 downloadFile(blob, fileName);
const fileName = `cropped_images_${new Date().getTime()}.zip`;
downloadFile(zipBlob, fileName);
alert(`已导出 ${croppedKeys.length} 个裁剪图片到ZIP文件\n文件格式：PNG\n文件名格式：130665-11.png, 130665-12.png`);
} catch (error) {
console.error('导出ZIP失败:', error);
alert('导出ZIP文件失败，请重试！');
} }
alert(`已导出 ${croppedKeys.length} 个裁剪图片\n文件格式：PNG\n文件名格式：130665_11.png, 130665_12.png\n请手动创建文件夹整理`);
} }
// 创建ZIP文件 // 创建ZIP文件
@ -854,7 +542,7 @@
for (const key of Object.keys(croppedImages)) { for (const key of Object.keys(croppedImages)) {
const blob = croppedImages[key]; const blob = croppedImages[key];
const arrayBuffer = await blobToArrayBuffer(blob); const arrayBuffer = await blobToArrayBuffer(blob);
const fileName = `${key}.png`; const fileName = `${key}/${key}_11.png`; // 改为PNG格式
files.push({ files.push({
name: fileName, name: fileName,
@ -1253,88 +941,11 @@
initializePage(); initializePage();
} }
// 按巷道导出
function exportByStreet(street) {
const croppedKeys = Object.keys(croppedImages);
const streetImages = [];
// 筛选出该巷道的图片
croppedKeys.forEach(key => {
const code = key.split('-')[0];
const item = imagesData.find(img => img.code === code && img.street === street);
if (item) {
streetImages.push(key);
}
});
if (streetImages.length === 0) {
alert(`巷道 ${street} 没有裁剪的图片可以导出！`);
return;
}
// 创建ZIP文件
createZipFileByStreet(street, streetImages);
}
// 为特定巷道创建ZIP文件
async function createZipFileByStreet(street, imageKeys) {
try {
const files = [];
// 收集该巷道的文件数据
for (const key of imageKeys) {
const blob = croppedImages[key];
const arrayBuffer = await blobToArrayBuffer(blob);
const fileName = `${key}.png`;
files.push({
name: fileName,
data: new Uint8Array(arrayBuffer)
});
}
// 生成ZIP文件
const zipBlob = createSimpleZip(files);
// 下载ZIP文件
const fileName = `${street}.zip`;
downloadFile(zipBlob, fileName);
alert(`已导出巷道 ${street} 的 ${imageKeys.length} 个裁剪图片`);
} catch (error) {
console.error('导出ZIP失败:', error);
alert('导出ZIP文件失败，请重试！');
}
}
// 为每个巷道添加导出按钮
function addStreetExportButtons() {
const grid = document.getElementById('imagesGrid');
const streets = new Set(imagesData.map(item => item.street));
streets.forEach(street => {
const exportBtn = document.createElement('button');
exportBtn.className = 'export-btn';
exportBtn.style.margin = '10px auto';
exportBtn.style.display = 'block';
exportBtn.textContent = `导出巷道 ${street}`;
exportBtn.onclick = () => exportByStreet(street);
grid.appendChild(exportBtn);
});
}
// 修改初始化页面函数，添加导出按钮
const originalInitializePage = initializePage;
initializePage = function() {
originalInitializePage();
addStreetExportButtons();
};
// 页面加载完成后初始化 // 页面加载完成后初始化
document.addEventListener('DOMContentLoaded', initializePage); document.addEventListener('DOMContentLoaded', initializePage);
// 图片数据对象 // 图片数据对象
const imagesData = [ const imagesData = [
{"code":"130665", "street":"20", "url":"http://10.17.152.53:8007/fileData/20251229206649/40858/130665_error.jpg"} {"code": "130665", "url": "https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg"}
]; ];
</script> </script>

Write Preview
Loading…
Cancel
Save