cropImage function

HTMLCanvasElement? cropImage(CanvasImageSource image, int x, int y, int width, int height,)

Crops the image using coordinates x, y, width and height, returning new image (HTMLCanvasElement).

Implementation

HTMLCanvasElement? cropImage(
    CanvasImageSource image, int x, int y, int width, int height) {
  HTMLCanvasElement canvas;
  if (image.isA<HTMLCanvasElement>()) {
    canvas = image as HTMLCanvasElement;
  } else {
    var imgDim = getImageDimension(image)!;
    var imgCanvas = HTMLCanvasElement()
      ..width = imgDim.width
      ..height = imgDim.height;
    var context = imgCanvas.getContext('2d') as CanvasRenderingContext2D;
    context.drawImage(image, 0, 0);
    canvas = imgCanvas;
  }

  var imgContext = canvas.getContext('2d') as CanvasRenderingContext2D;
  var imgCropData = imgContext.getImageData(x, y, width, height);

  var canvasCrop = HTMLCanvasElement()
    ..width = width
    ..height = height;
  var contextCrop = canvasCrop.getContext('2d') as CanvasRenderingContext2D;
  contextCrop.putImageData(imgCropData, 0, 0, 0, 0, width, height);

  return canvasCrop;
}