How to resize then crop an image with canvas

by

From the documentation, these are the parameters for drawImage:

drawImage(image,
   sx, sy, sw, sh,
   dx, dy, dw, dh);

enter image description here

So, to crop the outer 10 pixels from the source image (Assuming it’s 100 * 50), and then to scale that up to 160*60:

ctx.drawImage(image,
    10, 10,   // Start at 10 pixels from the left and the top of the image (crop),
    80, 30,   // "Get" a `80 * 30` (w * h) area from the source image (crop),
    0, 0,     // Place the result at 0, 0 in the canvas,
    160, 60); // With as width / height: 160 * 60 (scale)

Example:

const image = new Image(),
      canvas = document.getElementById('canvas'),
      ctx = canvas.getContext('2d');

image.src="https://i.stack.imgur.com/I4jXc.png";

image.addEventListener('load', () => {
    ctx.drawImage(image,
        70, 20,   // Start at 70/20 pixels from the left and the top of the image (crop),
        50, 50,   // "Get" a `50 * 50` (w * h) area from the source image (crop),
        0, 0,     // Place the result at 0, 0 in the canvas,
        100, 100); // With as width / height: 100 * 100 (scale)
});
Image: <br/>
<img src="https://i.stack.imgur.com/I4jXc.png" /><br/>
Canvas: <br/>
<canvas id="canvas" width="275px" height="95px"></canvas>

More Related Contents:

  1. How to clear the canvas for redrawing
  2. Real mouse position in canvas
  3. Accessing JPEG EXIF rotation data in JavaScript on the client side
  4. JS Client-Side Exif Orientation: Rotate and Mirror JPEG Images
  5. HTML5 Canvas Resize (Downscale) Image High Quality?
  6. Resize image with javascript canvas (smoothly)
  7. How to fix getImageData() error The canvas has been tainted by cross-origin data?
  8. Why is requestAnimationFrame better than setInterval or setTimeout
  9. HTML5 Canvas vs. SVG vs. div
  10. HTML5 Canvas toDataURL returns blank
  11. Firefox error rendering an SVG image to HTML5 canvas with drawImage
  12. How to upload image into HTML5 canvas
  13. Cropping images in the browser BEFORE the upload [closed]
  14. Capture frames from video with HTML5 and JavaScript
  15. Web Workers and Canvas
  16. How to free up the memory in JavaScript
  17. Load image from url and draw to HTML5 Canvas
  18. Canvas image masking / overlapping
  19. Total canvas memory use exceeds the maximum limit (Safari 12)
  20. HTML canvas – drawing disappear on resizing
  21. Draw HTML5/Javascript Canvas Path in Time
  22. Can I create multiple canvas elements on same page using p5js
  23. Calculate FPS in Canvas using requestAnimationFrame
  24. How to embed an input or textarea in a canvas element?
  25. How to detect shape on a transparent canvas?
  26. How to implement SVG’s preserveAspectRatio=”xMinYMin slice” for canvas drawImage method.
  27. Scaling an image to fit on canvas
  28. True Isometric Projection with HTML5 Canvas
  29. HTML5 Canvas: Get Event when drawing is finished
  30. loading an image on web browser using Promise()

Leave a Comment