[HTML5]Canvasを使って画像をトリミングする方法まとめ

Photo by Judy

CSSスプライトのようにbackground-positionで表示位置を調整して疑似トリミングを実現することもできるが、今回はHTML5のCanvasを使ってトリミングする方法をまとめる。

CSSスプライトについては、以下の記事を参照ください。

Canvasを使って画像をトリミングする

トリミングの方法は、CSSスプライトと同じ要領。

SlackのEmojiアイコンでスロットを作ってCSSスプライトを学ぶ | Black Everyday Company

CSSスプライトでは、widthとheightで表示領域を定め、background-positionで背景画像の位置を調整し、目的の画像だけを表示していた。

Canvasによるトリミングは、canvas.widthとcanvas.heightで表示領域を定め、描画するときにctx.drawImage(image, xOffset, yOffset)のようにoffset （CSSスプライトでいうbackground-position）で位置を調整する。

具体例を見ていただいたほうが早いだろう。

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;
}

上記例では、canvasのサイズをcanvas.width = 画像の幅、　canvas.height = 40pxにして、描画する際にctx.drawImage(img, 0, -100)のように上方向に-110pxずらしている。
結果、「ウィキペディア」という文字だけにトリミングできた。

参考サイト

• Canvas API - HTML | MDN
• CanvasRenderingContext2D - Web API インターフェイス | MDN

以上

written by @bc_rikko