如何选择画布中显示的图像区域（如绘画）然后移动选择[关闭]答案

【问题标题】：How to select an area of an image displayed in a canvas (like in paint) and then move the selection [closed]如何选择画布中显示的图像区域（如绘画）然后移动选择[关闭]
【发布时间】：2021-03-09 17:27:14
【问题描述】：

我需要选择显示在画布内的图像区域，然后，可以在画布周围移动选择。 Javascript 将是理想的，没有 jquery

基本上，我使用 mousedown 和 click 事件来获取裁剪/选择区域的坐标

我希望能看到右边照片上的黑色矩形。我尝试使该矩形可移动和调整大小以获取所选区域的坐标，而不仅仅是来自之前的 2 个事件。就像在 Paint 中一样。抱歉编辑晚了

【问题讨论】：

请分享您的尝试
请告诉我们你到目前为止做了什么。
问题是我不知道如何处理这个问题，我是js新手，很抱歉

标签： javascript html image canvas

【解决方案1】：

#container {
  background-color: cyan;
}

<canvas id="container" width="500" height="500" onmousedown="drag(event);" onmouseup="drop(event);"></canvas>
<script type="text/javascript">
  function getRandomColor() {
    var letters = '0123456789ABCDEF';
    var color = '#';
    for (var i = 0; i < 6; i++) {
      color += letters[Math.floor(Math.random() * 16)];
    }
    return color;
  }
  function draw(){
    var canvas = document.getElementById("container");
    var ctx = canvas.getContext("2d");
    for (var i = 0; i <= 450; i += 50)
      for (var j = 0; j < 450; j += 50) {
        ctx.beginPath();
        ctx.rect(i, j, 50, 50);
        ctx.fillStyle = getRandomColor();
        ctx.fill();
      }
  } // end draw
  function drag(ev) {
    drag.offsetX = ev.offsetX;
    drag.offsetY = ev.offsetY;
  }

  function drop(ev) {
    var canvas = document.getElementById("container");
    var ctx = canvas.getContext('2d');
    ctx.putImageData(ctx.getImageData(drag.offsetX, drag.offsetY, 10, 10), ev.offsetX, ev.offsetY);
  }
  
  draw();

</script>

上面的 sn-p 绘制一个画布，用随机颜色的正方形填充它，然后支持拖放。您将需要增大拖动区域的大小并添加一些进一步的控件，但这是您工作的一个很好的起点。

【讨论】：

谢谢，这绝对会帮助我完成其他任务
@VictorMitoi 欢迎您！