在前端開發中，經常需要調整圖片大小，特別是在響應式設計中。 JavaScript可以透過呼叫圖片的API來實現圖片大小的調整，本文將為你介紹如何使用JavaScript來調整圖片大小。
一、使用CSS來調整圖片大小
在介紹JavaScript調整圖片大小之前，我們先來看看如何使用CSS來調整圖片大小。在HTML中，我們可以透過CSS屬性來實現圖片的大小調整，例如：
<img src="example.jpg" style="width: 50%; height: auto;">
上面的程式碼中，透過style屬性設定了圖片的寬度為50%，高度自適應。這種方式非常簡單，但有時候我們需要透過JavaScript來動態地調整圖片大小，這時候我們就需要使用圖片API了。
二、使用圖片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。圖片載入完畢後，我們可以使用width和height屬性來設定圖片的大小。最後，我們將修改後的圖片展示在HTML中。
三、總結
在本文中，我們介紹如何使用JavaScript來調整圖片大小。我們可以使用CSS來簡單地調整圖片大小，同時也可以使用HTML5 Canvas和HTMLImageElement中的API來實現更複雜的調整。使用Canvas可以給我們更多的自由度，但是需要較為繁瑣的繪圖過程；而使用HTMLImageElement則較為簡單，但是功能相對較弱。根據自己的需求進行選擇即可。
以上是javascript怎麼調整圖片大小的詳細內容。更多資訊請關注PHP中文網其他相關文章！
