JavaScriptで画像のサイズを変更する方法

フロントエンド開発では、特にレスポンシブデザインにおいて、画像サイズの調整が必要になることがよくあります。 JavaScript では画像 API を呼び出すことで画像サイズを調整することができますので、この記事では JavaScript を使用して画像サイズを調整する方法を紹介します。

1. CSS を使用して画像サイズを調整する

JavaScript を使用して画像サイズを調整する前に、まず CSS を使用して画像サイズを調整する方法を見てみましょう。 HTML では、CSS 属性を使用して画像のサイズを調整できます。例:

<img src="example.jpg" style="width: 50%; height: auto;">

上記のコードでは、画像の幅は style 属性によって 50% に設定され、高さは適応型です。 。この方法は非常に簡単ですが、場合によっては JavaScript を通じて画像サイズを動的に調整する必要があり、その場合は画像 API を使用する必要があります。

2. 画像 API を使用して画像サイズを調整します

1. HTML5 Canvas を使用して画像サイズを調整します

HTML5 Canvas は、グラフィックを描画するために使用される HTML 要素であり、アニメーション。これを使用して画像のサイズ変更を実現できます。 Canvas では、drawImage() メソッドを使用して画像を描画し、画像のサイズを調整できます。たとえば、次のコードは、Canvas を使用して 200x200 ピクセルのサイズの画像を描画する方法を示しています。

// 声明一个Canvas元素
var canvas = document.createElement('canvas');
// 设置Canvas的宽度和高度
canvas.width = 200;
canvas.height = 200;
// 获取Canvas的上下文
var ctx = canvas.getContext('2d');
// 创建一个Image元素
var img = new Image();
// 设置Image的URL
img.src = 'example.jpg';
// 加载完图片后执行函数
img.onload = function() {
  // 在Canvas上绘制图片
  ctx.drawImage(img, 0, 0, 200, 200);
  // 获取修改后的图片
  var newImg = canvas.toDataURL();
  // 展示修改后的图片
  document.getElementById('result').src = newImg;
}

上記のコードは、Canvas を使用して画像を 200x200 ピクセルのサイズに調整する方法を示しています。まず、Canvas 要素を作成し、その幅と高さを設定します。次に、Canvas のコンテキストを取得し、Image 要素を作成します。 Image 要素が読み込まれた後、Canvas 上に画像を描画し、変更された画像を取得します。最後に、変更した画像を HTML で表示します。

2. HTMLImageElement を使用して画像サイズを調整する

Canvas の使用に加えて、HTMLImageElement の API を使用して画像サイズを調整することもできます。 HTMLImageElement は HTML の画像要素であり、画像を操作するためのいくつかのプロパティとメソッドを提供します。次のコードは、HTMLImageElement を使用して画像のサイズを変更する方法を示します。

// 创建一个Image元素
var img = new Image();
// 设置Image的URL
img.src = 'example.jpg';
// 加载完图片后执行函数
img.onload = function() {
  // 设置图片的宽度和高度
  img.width = 200;
  img.height = 200;
  // 展示修改后的图片
  document.getElementById('result').src = img.src;
}

上記のコードは、HTMLImageElement を使用して画像のサイズを 200x200 ピクセル サイズに変更する方法を示しています。 Image 要素を作成し、その URL を設定します。画像が読み込まれた後、幅と高さの属性を使用して画像のサイズを設定できます。最後に、変更した画像を HTML で表示します。

3. 概要

この記事では、JavaScript を使用して画像のサイズを変更する方法を紹介しました。 CSS を使用して画像のサイズを変更するだけでなく、HTML5 Canvas および HTMLImageElement の API を使用してより複雑な調整を行うこともできます。 Canvas を使用すると、より自由度が高くなりますが、より煩雑な描画プロセスが必要になり、HTMLImageElement を使用すると簡単になりますが、その機能は比較的弱いです。ニーズに応じて選択してください。

以上がJavaScriptで画像のサイズを変更する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。