Trim image with canvas

by bc_rikko

HTML

<div style="display: flex;">
  <figure>
    <div class="container">
      <img src="https://ja.wikipedia.org/static/images/project-logos/jawiki.png">
    </div>
    <figcaption>origin</figcaption>
  </figure>
  <figure>
    <div class="container" id="trimmed-image"></div>
    <figcaption>trimmed</figcaption>
  </figure>
</div>

CSS

.container {
  border: solid 1px black;
}

JavaScript

const trimmedImage = document.getElementById('trimmed-image');

function trimImage (src) {
  const canvas = document.createElement('canvas');
  const ctx = canvas.getContext('2d');
    
  const img = new Image();
  img.src = src;
  img.onload = () => {
		const xOffset = 0;
    const yOffset = -110;

		canvas.width = img.width;
    canvas.height = 40;
    
    // drawImage(image, xOffset, yOffset, width, height)
    ctx.drawImage(img, xOffset, yOffset);
  };
  
  return canvas;
}

const canvas = trimImage('https://ja.wikipedia.org/static/images/project-logos/jawiki.png');
trimmedImage.append(canvas);