javascript - HTML5 Canvas - 保留图像上绘制的矩形

Question

我有一个图片库。单击图库中的图像时，它将呈现在 Canvas 上。目标是允许用户在感兴趣的区域上绘制矩形并捕获矩形坐标。当我移动到下一个图像时，绘制的矩形消失。

以下是代码，我已尽力发表评论:

//get clicked image name and store in a variable
function clickedImage(clicked_id) {
    var clickedImg = document.getElementById(clicked_id).src;
    var clickedImg = clickedImg.replace(/^.*[\\\/]/, '');
    localStorage.setItem("clickedImg", clickedImg);

    //initiate canvas to load image
    var canvas = document.getElementById("iriscanvas");
    var ctx = canvas.getContext("2d");
    var thumbNails = document.getElementById("loaded_img_panel");
    var pic = new Image();
    pic.onload = function() {
      ctx.drawImage(pic, 0,0)
    }
    //load the image from the thumbnail on to the canvas
    thumbNails.addEventListener('click', function(event) {
      pic.src = event.target.src;
    });

    //thickness of rectangle and count of rectangles
    var strokeWidth = 3;
    drawCount = 1;

    //initiate mouse events
    canvas.addEventListener("mousemove", function(e) {
          drawRectangleOnCanvas.handleMouseMove(e);
        }, false);

        canvas.addEventListener("mousedown", function(e) {
          drawRectangleOnCanvas.handleMouseDown(e);
        }, false);
        canvas.addEventListener("mouseup", function(e) {
          drawRectangleOnCanvas.handleMouseUp(e);
        }, false);
        canvas.addEventListener("mouseout", function(e) {
          drawRectangleOnCanvas.handleMouseOut(e);
        }, false);

        function reOffset() {
          var BB = canvas.getBoundingClientRect();
          recOffsetX = BB.left;
          recOffsetY = BB.top;
        }
        var recOffsetX, recOffsetY;
        reOffset();

        window.onscroll = function(e) {
          reOffset();
        }

        window.onresize = function(e) {
          reOffset();
        }

        var isRecDown = false;
        var startX, startY;

        var rects = [];
        var newRect;

        var drawRectangleOnCanvas = {
          handleMouseDown: function(e) {
            // tell the browser we're handling this event
            e.preventDefault();
            e.stopPropagation();

            startX = parseInt(e.clientX - recOffsetX);
            startY = parseInt(e.clientY - recOffsetY);

            // Put your mousedown stuff here
            isRecDown = true;
          },

          handleMouseUp: function(e) {
            // tell the browser we're handling this event
            e.preventDefault();
            e.stopPropagation();

            mouseX = parseInt(e.clientX - recOffsetX);
            mouseY = parseInt(e.clientY - recOffsetY);

            // Put your mouseup stuff here
            isRecDown = false;

            //if(!willOverlap(newRect)){
            rects.push(newRect);
            //}

            drawRectangleOnCanvas.drawAll();
            var brand = localStorage.getItem("brandNode");
            var clickImg = localStorage.getItem("clickedImg");

            //get x,y,w,h coordinates depending on how the rectangle is drawn.

            if((mouseX-startX) < 0) {
                stX = startX + (mouseX-startX)
            } else {
                stX = startX
            }

            if((mouseY-startY) < 0) {
                stY = startY + (mouseY-startY)
            } else {
                stY = startY
            }

            if((mouseX-startX) < 0) {
                stW = startX - stX
            } else {
                stW = mouseX - startX
            }

            if((mouseY-startY) < 0) {
                stH = startY - stY
            } else {
                stH = mouseY - startY
            }
            //log the coordinates of the rectangles
            var dat = {image : clickImg, brand: brand, x : stX, y : stY, w: stW, h: stH};
            var dat = JSON.stringify(dat);    
            console.log(dat);
          },

          drawAll: function() {
            ctx.drawImage(pic, 0, 0);
            ctx.lineWidth = strokeWidth;
            var brand = localStorage.getItem("brandNode");
            for (var i = 0; i < rects.length; i++) {

              var r = rects[i];
              ctx.strokeStyle = r.color;
              ctx.globalAlpha = 1;
              ctx.strokeRect(r.left, r.top, r.right - r.left, r.bottom - r.top);

              ctx.beginPath();
              //ctx.arc(r.left, r.top, 15, 0, Math.PI * 2, true);
              ctx.closePath();
              ctx.fillStyle = r.color;
              ctx.fill();

              var text = brand;
              ctx.fillStyle = "#fff";
              var font = "bold " + 12 + "px serif";
              ctx.font = font;
              var width = ctx.measureText(text).width;
              var height = ctx.measureText("h").height; // this is a GUESS of height
              ctx.fillText(text, r.left-1, r.top - 10)

            }
          },

          handleMouseOut: function(e) {
            // tell the browser we're handling this event
            e.preventDefault();
            e.stopPropagation();

            mouseX = parseInt(e.clientX - recOffsetX);
            mouseY = parseInt(e.clientY - recOffsetY);

            // Put your mouseOut stuff here
            isRecDown = false;
          },

          handleMouseMove: function(e) {
            if (!isRecDown) {
              return;
            }
            // tell the browser we're handling this event
            e.preventDefault();
            e.stopPropagation();

            mouseX = parseInt(e.clientX - recOffsetX);
            mouseY = parseInt(e.clientY - recOffsetY);
            newRect = {
              left: Math.min(startX, mouseX),
              right: Math.max(startX, mouseX),
              top: Math.min(startY, mouseY),
              bottom: Math.max(startY, mouseY),
              color: "#9afe2e"
            }
            drawRectangleOnCanvas.drawAll();
            ctx.strokeStyle = "#9afe2e";
            ctx.lineWidth = strokeWidth;
            ctx.globalAlpha = 1;
            ctx.strokeRect(startX, startY, mouseX - startX, mouseY - startY);
          }
        }       
}

当我移动到下一个图像时，上一个图像上创建的矩形将被删除。我不知道是否必须使用canvas.toDataURL来保留矩形，因为我在图库中有数千张图像，并且不确定浏览器中是否有空间，尽管不是所有的图像将用于绘制矩形。

此外，当我单击同一图像时绘制矩形后，它会清除所有矩形。

如何至少在 session 中保留绘制的矩形？

Answer 1

第 2 层 Canvas 相互重叠。将图像渲染到底部 Canvas 中，然后在顶部 Canvas 上绘制。这样，更改图像就不会影响绘制的线条。

<小时/>

一个<canvas>就像现实生活中画家的 Canvas 一样。 Canvas 上没有图层或“对象”的概念。这一切都只是在一个表面上进行绘制。

当您在 Canvas 上绘制不同的图像时，您将覆盖 Canvas 上已有的所有内容。