xujunwei
/
yolov12


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621
							<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>YOLO图片标注工具</title>
    <style>
        body { font-family: Arial, sans-serif; margin: 0; background: #f7f7f7; }
        #main-container {
            display: flex;
            height: 100vh;
        }
        #left-panel {
            width: 220px;
            background: #fff;
            border-right: 1px solid #eee;
            padding: 20px 10px 10px 10px;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
        }
        #imgList {
            flex: 1;
            overflow-y: auto;
            margin-top: 10px;
        }
        .img-url-item {
            padding: 6px 8px;
            border-radius: 4px;
            cursor: pointer;
            margin-bottom: 4px;
            transition: background 0.2s;
        }
        .img-url-item.active, .img-url-item:hover {
            background: #e6f7ff;
        }
        #center-panel {
            flex: 1;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-start;
            padding: 20px;
            max-width: 900px;
            max-height: 600px;
            box-sizing: border-box;
        }
        #canvas {
            border: 1px solid #ccc;
            cursor: crosshair;
            background: #fff;
            box-shadow: 0 2px 8px #eee;
            max-width: 900px;
            max-height: 600px;
            width: 100%;
            height: auto;
        }
        #controls {
            margin-bottom: 10px;
            width: 100%;
            display: flex;
            gap: 8px;
            justify-content: center;
        }
        #right-panel {
            width: 260px;
            background: #fff;
            border-left: 1px solid #eee;
            padding: 20px 10px 10px 10px;
            box-sizing: border-box;
            display: flex;
            flex-direction: column;
        }
        #boxes-list {
            margin-top: 10px;
            flex: 1;
            overflow-y: auto;
        }
        .box-item {
            font-size: 14px;
            background: #f5f5f5;
            margin-bottom: 6px;
            padding: 6px 8px;
            border-radius: 4px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        .del-btn {
            background: #ff7875;
            color: #fff;
            border: none;
            border-radius: 3px;
            padding: 2px 8px;
            cursor: pointer;
            font-size: 12px;
        }
        .del-btn:hover {
            background: #d9363e;
        }
        #exportBtn {
            margin-top: 10px;
            width: 100%;
            background: #1890ff;
            color: #fff;
            border: none;
            border-radius: 4px;
            padding: 8px 0;
            font-size: 15px;
            cursor: pointer;
        }
        #exportBtn:disabled {
            background: #ccc;
            color: #fff;
            cursor: not-allowed;
        }
        h2 { margin: 0 0 18px 0; text-align: center; }
        #imgUrlInput { width: 100%; box-sizing: border-box; }
        #loadImgBtn { width: 100%; }
        .img-thumb {
            width: 100%;
            max-width: 180px;
            height: 90px;
            object-fit: cover;
            border-radius: 6px;
            border: 2px solid transparent;
            margin-bottom: 8px;
            cursor: pointer;
            transition: border 0.2s;
            background: #f0f0f0;
        }
        .img-thumb.active {
            border: 2px solid #1890ff;
        }
    </style>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<div id="main-container">
    <!-- 左侧图片列表 -->
    <div id="left-panel">
        <h2>图片列表</h2>
        <button id="clearBoxesBtn" style="width:100%;margin-bottom:10px;background:#ff7875;color:#fff;border:none;border-radius:4px;padding:8px 0;font-size:15px;cursor:pointer;">清空所有标记</button>
        <div id="imgList"></div>
    </div>
    <!-- 中间标注区 -->
    <div id="center-panel">
        <h2>图片标注区</h2>
        <div id="zoom-controls" style="margin-bottom:10px;display:flex;gap:8px;justify-content:center;">
            <button id="zoomInBtn" style="padding:4px 14px;">放大</button>
            <button id="zoomOutBtn" style="padding:4px 14px;">缩小</button>
            <button id="zoomResetBtn" style="padding:4px 14px;">重置</button>
        </div>
        <canvas id="canvas"></canvas>
    </div>
    <!-- 右侧标注结果 -->
    <div id="right-panel">
        <h2>标注结果</h2>
        <div id="boxes-list"></div>
        <button id="exportBtn" disabled>导出YOLO标注</button>
    </div>
</div>

<script>
    let img = new window.Image();
    let boxes = [];
    let drawing = false;
    let startX = 0, startY = 0, endX = 0, endY = 0;
    let imgWidth = 0, imgHeight = 0;
    let selectedBoxIndex = -1; // 当前选中的框索引
    let dragMode = null; // 拖动模式：null/move/resize
    let dragOffsetX = 0, dragOffsetY = 0; // 拖动时鼠标与框左上角的偏移
    const HANDLE_SIZE = 10; // 手柄的像素大小
    // 8个手柄类型，分别对应四个角和四条边中点
    const HANDLE_TYPES = ['nw', 'n', 'ne', 'e', 'se', 's', 'sw', 'w'];
    // 缩放相关
    let scale = 1.0;
    let minScale = 0.2, maxScale = 5.0;
    let offsetX = 0, offsetY = 0; // 平移偏移（可扩展拖动画布）
    let isPanning = false; // 是否正在拖动画布
    let panStart = {x: 0, y: 0}; // 拖拽起点
    let panOffsetStart = {x: 0, y: 0}; // 拖拽时的初始偏移
    let spacePressed = false; // 是否按下空格

    // 判断点(x, y)是否在框box内部
    function isInBox(x, y, box) {
        return x >= box.x && x <= box.x + box.w && y >= box.y && y <= box.y + box.h;
    }
    // 获取8个手柄的中心坐标
    function getHandles(box, size) {
        const x = box.x, y = box.y, w = box.w, h = box.h;
        const hs = (size || HANDLE_SIZE) / 2;
        return {
            nw: { x: x - hs, y: y - hs }, // 左上角
            n:  { x: x + w/2 - hs, y: y - hs }, // 上中
            ne: { x: x + w - hs, y: y - hs }, // 右上角
            e:  { x: x + w - hs, y: y + h/2 - hs }, // 右中
            se: { x: x + w - hs, y: y + h - hs }, // 右下角
            s:  { x: x + w/2 - hs, y: y + h - hs }, // 下中
            sw: { x: x - hs, y: y + h - hs }, // 左下角
            w:  { x: x - hs, y: y + h/2 - hs } // 左中
        };
    }
    // 判断点(x, y)是否在某个手柄上，返回手柄类型
    function getHandleAt(x, y, box) {
        let domW = $('#canvas').width();
        let pixelRatio = $('#canvas')[0].width / domW;
        let handleSize = 10 * pixelRatio;
        const handles = getHandles(box, handleSize);
        for (let type of HANDLE_TYPES) {
            const hx = handles[type].x, hy = handles[type].y;
            if (x >= hx && x <= hx + handleSize && y >= hy && y <= hy + handleSize) {
                return type;
            }
        }
        return null;
    }
    // 根据手柄类型设置鼠标指针样式
    function setCursorByHandle(type) {
        const map = {
            nw: 'nwse-resize',
            se: 'nwse-resize',
            ne: 'nesw-resize',
            sw: 'nesw-resize',
            n: 'ns-resize',
            s: 'ns-resize',
            e: 'ew-resize',
            w: 'ew-resize'
        };
        $('#canvas').css('cursor', map[type] || 'default');
    }

    // 绘制函数，支持缩放和平移
    function drawAll() {
        const ctx = $('#canvas')[0].getContext('2d');
        ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
        ctx.save();
        ctx.scale(scale, scale);
        ctx.translate(offsetX, offsetY);
        ctx.drawImage(img, 0, 0, imgWidth, imgHeight);
        // 计算canvas显示缩放比例
        let domW = $('#canvas').width();
        let pixelRatio = $('#canvas')[0].width / domW;
        let lineWidth = 2 * pixelRatio / scale; // 屏幕上2px
        let handleSize = 10 * pixelRatio / scale; // 屏幕上10px
        boxes.forEach((box, idx) => {
            ctx.save();
            if (idx === selectedBoxIndex) {
                ctx.strokeStyle = 'orange'; // 选中框高亮
                ctx.lineWidth = lineWidth;
            } else {
                ctx.strokeStyle = 'red';
                ctx.lineWidth = lineWidth;
            }
            ctx.strokeRect(box.x, box.y, box.w, box.h);
            // 绘制8个缩放手柄
            if (idx === selectedBoxIndex) {
                ctx.fillStyle = 'blue';
                const handles = getHandles(box, handleSize);
                for (let type of HANDLE_TYPES) {
                    ctx.fillRect(handles[type].x, handles[type].y, handleSize, handleSize);
                }
            }
            ctx.restore();
        });
        // 绘制新建时的临时框
        if (drawing) {
            ctx.strokeStyle = 'blue';
            ctx.lineWidth = lineWidth;
            ctx.strokeRect(
                Math.min(startX, endX),
                Math.min(startY, endY),
                Math.abs(endX - startX),
                Math.abs(endY - startY)
            );
        }
        ctx.restore();
    }

    function updateBoxesList() {
        let html = '';
        boxes.forEach((box, idx) => {
            html += `<div class="box-item">框${idx+1} [x:${box.x}, y:${box.y}, w:${box.w}, h:${box.h}] <button data-idx="${idx}" class="del-btn">删除</button></div>`;
        });
        $('#boxes-list').html(html);
        $('#exportBtn').prop('disabled', boxes.length === 0);
    }

    // 工具函数：canvas坐标转原图坐标
    function toImageCoord(canvasX, canvasY) {
        // 需要考虑canvas缩放后的显示尺寸
        let domW = $('#canvas').width();
        let domH = $('#canvas').height();
        let ratioX = imgWidth / domW;
        let ratioY = imgHeight / domH;
        return {
            x: (canvasX * ratioX / scale - offsetX),
            y: (canvasY * ratioY / scale - offsetY)
        };
    }

    $(function() {
        // 图片URL缩略图列表，默认一张图片
        let imgUrlArr = [
            'https://image.cszcyl.cn/2022/image/YfJA8eON3exqppNSQrW5EhE9rGdNS1qwou5dgj3L3651WcDDZEy89Hn1A296TXIx.png',
            'https://image.cszcyl.cn/coze/%E9%AB%98%E8%80%83%E5%BF%85%E8%83%9C-%E8%B6%85%E6%B8%85.png',
            'https://image.cszcyl.cn/2022/image/1A2B3C4D5E6F7G8H9I0J1K2L3M4N5O6P7Q8R9S0T1U2V3W4X5Y6Z7A8B9C0D1E2F3.png',
            'https://image.cszcyl.cn/2022/image/abc123def456ghi789jkl012mno345pqr678stu901vwx234yz567abc890def123.png',
            'https://image.cszcyl.cn/2022/image/sample2.png'
        ];
        let currentImgIndex = 0;

        // 渲染左侧图片缩略图列表
        function renderImgList() {
            let html = '';
            imgUrlArr.forEach((url, idx) => {
                html += `<img src="${url}" class="img-thumb${idx===currentImgIndex?' active':''}" data-idx="${idx}" title="${url}">`;
            });
            $('#imgList').html(html);
        }
        renderImgList();

        // 点击图片缩略图切换图片
        $('#imgList').on('click', '.img-thumb', function() {
            const idx = $(this).data('idx');
            if (currentImgIndex === idx) return;
            currentImgIndex = idx;
            renderImgList();
            loadCurrentImage();
        });

        // 加载当前选中图片到canvas
        function loadCurrentImage() {
            const url = imgUrlArr[currentImgIndex];
            img.onload = function() {
                imgWidth = img.width;
                imgHeight = img.height;
                // 计算缩放比例，canvas最大900x600
                let maxW = 900, maxH = 600;
                let ratio = Math.min(1, maxW / imgWidth, maxH / imgHeight);
                let showW = Math.round(imgWidth * ratio);
                let showH = Math.round(imgHeight * ratio);
                $('#canvas').attr({ width: imgWidth, height: imgHeight }); // 逻辑像素
                $('#canvas').css({ width: showW + 'px', height: showH + 'px' }); // 显示像素
                scale = 1.0;
                offsetX = 0;
                offsetY = 0;
                boxes = [];
                drawAll();
                updateBoxesList();
            };
            img.onerror = function() {
                alert('图片加载失败，请检查URL是否正确');
            };
            img.src = url;
        }
        // 页面加载时自动加载第一张图片
        loadCurrentImage();

        let resizeHandle = null; // 当前正在拖动的手柄类型
        // 监听键盘空格按下/松开
        $(document).on('keydown', function(e) {
            if (e.code === 'Space') spacePressed = true;
        });
        $(document).on('keyup', function(e) {
            if (e.code === 'Space') spacePressed = false;
        });

        // 鼠标按下事件
        $('#canvas').on('mousedown', function(e) {
            if (!imgWidth) return;
            const rect = this.getBoundingClientRect();
            const canvasX = e.clientX - rect.left;
            const canvasY = e.clientY - rect.top;
            const {x: mouseX, y: mouseY} = toImageCoord(canvasX, canvasY);
            // 新增：空格+左键 或 右键拖动画布
            if ((spacePressed && e.button === 0) || e.button === 2) {
                isPanning = true;
                panStart = {x: e.clientX, y: e.clientY};
                panOffsetStart = {x: offsetX, y: offsetY};
                $('#canvas').css('cursor', 'grab');
                return;
            }
            let found = false;
            resizeHandle = null;
            // 优先判断是否点中手柄
            for (let i = boxes.length - 1; i >= 0; i--) {
                const handleType = getHandleAt(mouseX, mouseY, boxes[i]);
                if (handleType) {
                    selectedBoxIndex = i;
                    dragMode = 'resize';
                    resizeHandle = handleType;
                    found = true;
                    break;
                } else if (isInBox(mouseX, mouseY, boxes[i])) {
                    // 点中框内部，准备移动
                    selectedBoxIndex = i;
                    dragMode = 'move';
                    dragOffsetX = mouseX - boxes[i].x;
                    dragOffsetY = mouseY - boxes[i].y;
                    found = true;
                    break;
                }
            }
            if (found) {
                drawing = false;
                drawAll();
                return;
            }
            // 没点中任何框，开始新建
            selectedBoxIndex = -1;
            drawing = true;
            startX = endX = mouseX;
            startY = endY = mouseY;
            drawAll();
        });

        // 鼠标移动事件
        $('#canvas').on('mousemove', function(e) {
            const rect = this.getBoundingClientRect();
            const canvasX = e.clientX - rect.left;
            const canvasY = e.clientY - rect.top;
            const {x: mouseX, y: mouseY} = toImageCoord(canvasX, canvasY);
            // 新增：画布拖拽
            if (isPanning) {
                let domW = $('#canvas').width();
                let domH = $('#canvas').height();
                let canvasW = $('#canvas')[0].width;
                let canvasH = $('#canvas')[0].height;
                let ratioX = canvasW / domW;
                let ratioY = canvasH / domH;
                let dx = (e.clientX - panStart.x) * ratioX / scale;
                let dy = (e.clientY - panStart.y) * ratioY / scale;
                offsetX = panOffsetStart.x + dx;
                offsetY = panOffsetStart.y + dy;
                drawAll();
                return;
            }
            if (drawing) {
                // 新建框时，动态绘制，限制不出界
                endX = Math.max(0, Math.min(mouseX, imgWidth));
                endY = Math.max(0, Math.min(mouseY, imgHeight));
                drawAll();
            } else if (selectedBoxIndex !== -1 && dragMode) {
                let box = boxes[selectedBoxIndex];
                let minW = 10, minH = 10;
                let x = box.x, y = box.y, w = box.w, h = box.h;
                if (dragMode === 'move') {
                    // 拖动移动框
                    let newX = mouseX - dragOffsetX;
                    let newY = mouseY - dragOffsetY;
                    newX = Math.max(0, Math.min(newX, imgWidth - w));
                    newY = Math.max(0, Math.min(newY, imgHeight - h));
                    box.x = newX;
                    box.y = newY;
                } else if (dragMode === 'resize' && resizeHandle) {
                    // 8方向缩放
                    switch (resizeHandle) {
                        case 'nw': // 左上角
                            box.x = Math.min(mouseX, x + w - minW);
                            box.y = Math.min(mouseY, y + h - minH);
                            box.w = w + (x - box.x);
                            box.h = h + (y - box.y);
                            break;
                        case 'n': // 上中
                            box.y = Math.min(mouseY, y + h - minH);
                            box.h = h + (y - box.y);
                            break;
                        case 'ne': // 右上角
                            box.y = Math.min(mouseY, y + h - minH);
                            box.w = Math.max(minW, mouseX - x);
                            box.h = h + (y - box.y);
                            break;
                        case 'e': // 右中
                            box.w = Math.max(minW, mouseX - x);
                            break;
                        case 'se': // 右下角
                            box.w = Math.max(minW, mouseX - x);
                            box.h = Math.max(minH, mouseY - y);
                            break;
                        case 's': // 下中
                            box.h = Math.max(minH, mouseY - y);
                            break;
                        case 'sw': // 左下角
                            box.x = Math.min(mouseX, x + w - minW);
                            box.w = w + (x - box.x);
                            box.h = Math.max(minH, mouseY - y);
                            break;
                        case 'w': // 左中
                            box.x = Math.min(mouseX, x + w - minW);
                            box.w = w + (x - box.x);
                            break;
                    }
                    // 限制不出界
                    if (box.x < 0) { box.w += box.x; box.x = 0; }
                    if (box.y < 0) { box.h += box.y; box.y = 0; }
                    if (box.x + box.w > imgWidth) box.w = imgWidth - box.x;
                    if (box.y + box.h > imgHeight) box.h = imgHeight - box.y;
                }
                drawAll();
                updateBoxesList();
            } else if (selectedBoxIndex !== -1) {
                // 悬停手柄时改变鼠标样式
                const box = boxes[selectedBoxIndex];
                const handleType = getHandleAt(mouseX, mouseY, box);
                setCursorByHandle(handleType);
            } else {
                $('#canvas').css('cursor', 'crosshair');
            }
        });

        // 鼠标松开事件
        $(document).on('mouseup', function(e) {
            if (isPanning) {
                isPanning = false;
                $('#canvas').css('cursor', spacePressed ? 'grab' : 'crosshair');
                return;
            }
            const rect = $('#canvas')[0].getBoundingClientRect();
            const canvasX = e.clientX - rect.left;
            const canvasY = e.clientY - rect.top;
            const {x: mouseX, y: mouseY} = toImageCoord(canvasX, canvasY);
            if (drawing) {
                drawing = false;
                // 限制endX、endY不出界
                endX = Math.max(0, Math.min(mouseX, imgWidth));
                endY = Math.max(0, Math.min(mouseY, imgHeight));
                const x = Math.max(0, Math.min(startX, endX));
                const y = Math.max(0, Math.min(startY, endY));
                let w = Math.abs(endX - startX);
                let h = Math.abs(endY - startY);
                // 再次限制宽高不超界
                if (x + w > imgWidth) w = imgWidth - x;
                if (y + h > imgHeight) h = imgHeight - y;
                if (w > 5 && h > 5) {
                    boxes.push({ x, y, w, h, classId: 0 });
                }
                drawAll();
                updateBoxesList();
            } else if (selectedBoxIndex !== -1 && dragMode) {
                dragMode = null;
                resizeHandle = null;
            }
        });

        // 删除按钮事件
        $('#boxes-list').on('click', '.del-btn', function() {
            const idx = $(this).data('idx');
            boxes.splice(idx, 1);
            if (selectedBoxIndex === idx) selectedBoxIndex = -1;
            drawAll();
            updateBoxesList();
        });

        // 导出YOLO格式标注
        $('#exportBtn').on('click', function() {
            // YOLO格式: class x_center y_center width height (均为归一化)
            let lines = boxes.map(box => {
                const x_center = (box.x + box.w / 2) / imgWidth;
                const y_center = (box.y + box.h / 2) / imgHeight;
                const w = box.w / imgWidth;
                const h = box.h / imgHeight;
                return `${box.classId} ${x_center} ${y_center} ${w} ${h}`;
            });
            const blob = new Blob([lines.join('\n')], { type: 'text/plain' });
            const a = document.createElement('a');
            a.href = URL.createObjectURL(blob);
            a.download = 'labels.txt';
            a.click();
        });

        // 清空所有标记按钮
        $('#clearBoxesBtn').on('click', function() {
            boxes = [];
            drawAll();
            updateBoxesList();
        });

        // 缩放按钮事件
        $('#zoomInBtn').on('click', function() {
            scale = Math.min(maxScale, scale * 1.2);
            drawAll();
        });
        $('#zoomOutBtn').on('click', function() {
            scale = Math.max(minScale, scale / 1.2);
            drawAll();
        });
        $('#zoomResetBtn').on('click', function() {
            scale = 1.0;
            offsetX = 0;
            offsetY = 0;
            drawAll();
        });

        // 鼠标滚轮缩放
        $('#canvas').on('wheel', function(e) {
            e.preventDefault();
            let mouseX = e.offsetX, mouseY = e.offsetY;
            // 以鼠标为中心缩放
            let {x: imgX, y: imgY} = toImageCoord(mouseX, mouseY);
            let oldScale = scale;
            if (e.originalEvent.deltaY < 0) {
                scale = Math.min(maxScale, scale * 1.1);
            } else {
                scale = Math.max(minScale, scale / 1.1);
            }
            // 修正：缩放后让imgX、imgY依然在(mouseX, mouseY)位置
            let domW = $('#canvas').width();
            let domH = $('#canvas').height();
            let ratioX = imgWidth / domW;
            let ratioY = imgHeight / domH;
            offsetX = (mouseX * ratioX) / scale - imgX;
            offsetY = (mouseY * ratioY) / scale - imgY;
            drawAll();
        });

        // 禁止右键菜单弹出
        $('#canvas').on('contextmenu', function(e) { e.preventDefault(); });
    });
</script>
</body>
</html>