2023.11.16使用原生js和canvas实现图片矩形框标注功能

leigh_chen

已于 2023-11-21 10:49:07 修改

阅读量554

点赞数

分类专栏：开发日记文章标签： javascript 前端开发语言

于 2023-11-17 11:53:27 首次发布

本文链接：https://blog.csdn.net/leigh_chen/article/details/134459887

版权

开发日记专栏收录该内容

70 篇文章 1 订阅

订阅专栏

2023.11.16使用原生js和canvas实现图片矩形框标注功能

做训练的时候需要一些数据集，但是网上数据集有时不能满足自身的使用需求，自己编制一个标注软件实现数据采集功能。
记录的数据集可以传入后端，在后端再次进行处理。
在这里插入图片描述

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <link rel="stylesheet" href="">
    <!-- css style -->
    <title>Canvas tutorial</title>
</head>
<body>
    <button id="saveBtn">保存</button><br>
</body>
<!-- js style -->
<script type="text/javascript">
    // 功能完全，手动保存
    var canvas = document.createElement("canvas");  // 创建一个"canvas"节点
    var ctx = canvas.getContext("2d"); 
    // 创建图片对象
    var img = new Image();    
    img.onload = function(){
        // 设置画布大小与图片大小一致
        canvas.width = img.width;
        canvas.height =img.height;
        // 绘制图片
        ctx.drawImage(img, 0, 0);
    }
    img.src = '../images/cat01.png'; // 设置图片源地址
    document.body.appendChild(canvas);

    // 绘制矩形的函数
    function drawRectangle(x1, y1, x2, y2) {
        ctx.clearRect(0, 0, canvas.width, canvas.height)    // 清除子路径的内容，如果不清楚，下次画又会把子路径的东西再画一遍
        ctx.drawImage(img, 0, 0);
        ctx.beginPath();    // beginPath() 方法在一个画布中开始子路径的一个新的集合
        ctx.rect(x1, y1, x2 - x1, y2 - y1);   // Rect矩形类，可以实现对矩形的多种用法
        rectangle = { x1: x1, y1: y1, x2: x2, y2: y2 };
        ctx.strokeStyle = "red";        // 设置矩形框的颜色，如果需要不同的矩形框设置不同的颜色，可以每次画图的时候都设置
        ctx.lineWidth = 5;        // 设置矩形框的粗细，如果需要不同的矩形框设置不同的粗细，可以每次画图的时候都设置
        ctx.stroke();   // 开始绘制的意思
    }

    // 点击鼠标时，开始记录鼠标位置，并打开绘制模式
    var isDrawing = false;
    var startX, startY;
    canvas.addEventListener("mousedown", function (event) {
        isDrawing = true;
        startX = event.clientX - canvas.offsetLeft;
        startY = event.clientY - canvas.offsetTop;
    })

    // 当拖动鼠标时，更新绘图区域的大小并重绘图像以显示矩形
    canvas.addEventListener("mousemove", function (event) {
        if (isDrawing) {
            var x = event.clientX - canvas.offsetLeft;
            var y = event.clientY - canvas.offsetTop;
            drawRectangle(startX, startY, x, y);          
        }
    })

    // 当释放鼠标时，结束绘制并关闭绘制模式
    canvas.addEventListener("mouseup", function (event) {
        isDrawing = false;
    })

    // 另外还可以添加其他标注工具，例如线条，文本框等

    // 保存标注数据
    var saveBtn = document.getElementById("saveBtn");
    var annotations = [];

    saveBtn.addEventListener("click",function () {
        var annotation = {
            x1:startX,
            y1:startY,
            x2:event.clientX - canvas.offsetLeft,
            y2:event.clientY - canvas.offsetTop,
        };
        annotations.push(annotation);
        // 将标注数据转换成字符串
        var dataStr = JSON.stringify(annotations)
        // 存储标注数据到localStorage中，其中"imageAnnotations"为指定存储的键名，可以自行设置
        localStorage.setItem("imageAnnotations", dataStr);
        console.log(dataStr);
    })
</script>
</html>