Как обрезать выделенный прямоугольник, используя на основе щелчков мыши

Question

Я нарисовал изображение на холсте.

Я хочу, чтобы пользователь нажимал на холст, чтобы обрезать часть изображения.

Как это сделать?

Answer 1

Вот план, чтобы вы начали:

• рисовать изображение на холсте

  var canvas=document.getElementById('myCanvas'); 
  canvas.drawImage(yourImageObject,0,0); 
  

• Listen для mousedown событий.

  canvas.onmousedown=function(e){handleMouseDown(e);}; 
  

• У пользователя нажмите в левом верхнем углу [x0,y0] и правого нижнего углов [x1,y1], где они хотят, чтобы обрезать и записать эти 2 позиции мыши.

• прямоугольника кадрирования определяется следующим образом:

  var x=x0; 
  var y=y0; 
  var width=x1-x0; 
  var height=y1-y0; 
  

• Создание второго холста элемента и размер его размер кадрирования:

  var secondCanvas = document.createElement('canvas'); 
  secondCanvas.width = width; 
  secondCanvas.height = height; 
  document.body.appendChile(secondCanvas); 
  

• Используйте версию отсечение drawImage рисовать прямоугольник обрезки с первого холста на второй холст

  secondCanvas.drawImage(canvas, 
      x,y,width,height, // clip just the cropping rectangle from the first canvas 
      0,0,width,height // draw just the cropped part onto the first canvas 
  ); 
  

Пользовательская часть изображения пользователя теперь находится на втором холсте.

Если вы хотите, чтобы преобразовать второй холст в объект изображения, вы можете сделать это:

var img=new Image(); 
img.onload=start; 
img.src=secondCanvas.toDataURL(); 
function start(){ 
    // at this point, img contains the cropped portion of the original image 
}