<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>
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);
.container { border: solid 1px black; }