JavaScript で HTML Canvas を使用して画像のサイズを変更する

グラフィックは、Web アプリケーションの重要な部分である画像の側面を説明するために使用されます。HTML には、グラフィックを作成する 2つの方法があります。1つは canvas で、もう 1つは SVG です。今日の記事では、グラフィックを作成する方法、特にキャンバスと JavaScript を使用して HTML で画像を描画する方法を学習します。

JavaScript を使用して HTML の canvas で画像のサイズを変更する

Canvas は、Web アプリケーションでグラフィックを描画するために使用される標準の HTML 要素です。これは、境界線やコンテンツのないページ上の長方形の領域にすぎません。ユーザーはこの長方形の領域を使用してグラフィックを描画できます。

キャンバスにレンダリングされるグラフィックは、通常の HTML および CSS スタイルとは異なります。そこに含まれるすべてのグラフィックを含むキャンバス全体は、単一の DOM 要素として扱われます。

HTML の canvas のメソッド

1. getContext()：これは canvas によって提供される組み込みメソッドであり、contextType に応じてキャンバス上の描画コンテキストを返します。コンテキスト識別子がサポートされていないか、すでに構成されている場合は、null が返されます。サポートされているコンテキストタイプは、2d、webgl、webgl2、および bitmaprenderer です。
2. drawImage()：これは、canvas によって提供される組み込みメソッドであり、さまざまな方法でキャンバスに画像を描画するのに役立ちます。

drawImage() の構文

context.drawImage(
    $image, $sx, $sy, $sWidth, $sHeight, $dx, $dy, $dWidth, $dHeight);

パラメーター

• $image：キャンバスに描画する必要のある画像ソースを指定する必須パラメーターです。画像ソースは、CSSImageValue、HTMLImageElement、SVGImageElement などのようなものにすることができます。
• $sx：これは、ソース画像の X または水平座標を指定するオプションのパラメータです。目的の画像に描画するために、左上隅から長方形として測定されます。
• $sy：これは、ソース画像の Y または垂直座標を指定するオプションのパラメータです。目的の画像に描画するために、左上隅から長方形として測定されます。
• $sWidth：ソース画像の幅を指定するオプションのパラメータです。目的の画像に描画するために、左上隅から長方形として測定されます。
• $sHeight：これは、ソース画像の高さを指定するオプションのパラメーターです。目的の画像に描画するために、左上隅から長方形として測定されます。
• $dx：これは、宛先画像の X または水平座標を指定する必須パラメーターです。ソース画像が配置されている左上隅から長方形として測定されます。
• $dy：これは、宛先画像の Y または垂直座標を指定する必須パラメーターです。ソース画像が配置されている左上隅から長方形として測定されます。
• $dWidth：これは、宛先画像の幅を指定するオプションのパラメーターです。左上隅から長方形として測定されます。値が指定されていない場合、デフォルトの幅はソース画像の幅です。
• $dHeight：宛先画像の高さを指定するオプションのパラメーターです。左上隅から長方形として測定されます。指定しない場合、デフォルトの高さはソース画像の高さです。

JavaScriptCanvas を使用して画像のサイズを変更する手順

サンプルコード：

<img src="https://images.pexels.com/photos/3408744/pexels-photo-3408744.jpeg?auto=compress&cs=tinysrgb&dpr=2" width="500" height="400">
<canvas id="canvas" width=1000></canvas>

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
const img = new Image();
img.src =
    'https://images.pexels.com/photos/3408744/pexels-photo-3408744.jpeg?auto=compress&cs=tinysrgb&dpr=2';

img.onload = function() {
  // set height proportional to destination image
  canvas.height = canvas.width * (img.height / img.width);
  // step 1 - resize to 75%
  const oc = document.createElement('canvas');
  const octx = oc.getContext('2d');
  // Set the width & height to 75% of image
  oc.width = img.width * 0.75;
  oc.height = img.height * 0.75;
  // step 2, resize to temporary size
  octx.drawImage(img, 0, 0, oc.width, oc.height);
  // step 3, resize to final size
  ctx.drawImage(
      oc, 0, 0, oc.width * 0.75, oc.height * 0.75, 0, 0, canvas.width,
      canvas.height);
}

出力：