如何在 <canvas> 中从一张图片中捕获多张图片？

Question

我编写了一些代码，在您可以触摸绘制的图像上绘制一个半透明矩形：

function drawRect() {
  var canvas = document.getElementById('receipt');
  var ctx = canvas.getContext('2d');
  var drag = false;
  var imageObj;
  var rect = { };
  var touch;

  canvas.width = WIDTH;
  canvas.height = HEIGHT;

  function init() {
    imageObj = new Image();

    imageObj.src = 'img.jpg';
    imageObj.onload = function() {
      ctx.drawImage(imageObj, 0, 0);
    };

    canvas.addEventListener('touchstart', handleTouch, false);
    canvas.addEventListener('touchmove', handleTouch, false);
    canvas.addEventListener('touchleave', handleEnd, false);
    canvas.addEventListener('touchend', handleEnd, false);
  }

  function handleTouch(event) {
     if (event.targetTouches.length === 1) {
       touch = event.targetTouches[0];

     if (event.type == 'touchmove') {
        if (drag) {
          rect.w = touch.pageX - rect.startX;
          rect.h = touch.pageY - rect.startY ;
          draw();
        }
      } else {
        rect.startX = touch.pageX;
        rect.startY = touch.pageY;
        drag = true;
      }
    }
  }

  function handleEnd(event) {
    drag = false;
  }

  function draw() {
    drawImageOnCanvas();
    ctx.fillStyle = 'rgba(0, 100, 255, 0.2)';
    ctx.fillRect(rect.startX, rect.startY, rect.w, rect.h);
  } 

  function drawImageOnCanvas() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.drawImage(imageObj, 0, 0);
  }

  init();
}

这行得通。但是，现在我想要它，这样我就可以将矩形中的图像的每个部分捕获为单独的图像。

我怎样才能做到这一点？因为我有重绘的东西，它删除了以前的矩形，这使得这很困难。

Answer 1

A canvas 只能将整个 canvas 保存为图像，所以诀窍是创建一个临时的 canvas 您想要保存的区域大小。

一种方法是创建一个函数，它将图像和矩形对象作为参数，returns 区域的数据 URI（或 Blob）：

function saveRegion(img, rect) {

   var canvas = document.createElement("canvas"),
       ctx = canvas.getContext("2d");

   canvas.width = rect.w;
   canvas.height = rect.h;
   ctx.drawImage(img, rect.startX, rect.startY, rect.w, rect.h, 0, 0, rect.w, rect.h);

   return canvas.toDataURL():
}

如果不想在顶部放置任何图形，您可以传入原始图像，或者如果您在其顶部绘制元素，则只需传入原始 canvas 元素作为图像源。当然，CORS 限制适用。

如何在 <canvas> 中从一张图片中捕获多张图片？

How can I capture multiple images out of one in the <canvas>?

javascript

html

image

canvas

crop