Bagaimana untuk mengubah saiz imej dengan javascript

Dalam pembangunan bahagian hadapan, selalunya perlu mengubah saiz imej, terutamanya dalam reka bentuk responsif. JavaScript boleh melaraskan saiz imej dengan memanggil API imej Artikel ini akan memperkenalkan anda cara menggunakan JavaScript untuk melaraskan saiz imej.

1. Gunakan CSS untuk melaraskan saiz imej

Sebelum memperkenalkan JavaScript untuk melaraskan saiz imej, mari kita lihat dahulu cara menggunakan CSS untuk melaraskan saiz imej. Dalam HTML, kita boleh melaraskan saiz imej melalui atribut CSS, contohnya:

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

Dalam kod di atas, lebar imej ditetapkan kepada 50% melalui atribut gaya, dan ketinggian adalah adaptif . Kaedah ini sangat mudah, tetapi kadangkala kita perlu melaraskan saiz imej secara dinamik melalui JavaScript, kemudian kita perlu menggunakan API imej.

2. Gunakan API imej untuk melaraskan saiz imej

1 Gunakan HTML5 Canvas untuk melaraskan saiz imej

HTML5 Canvas ialah elemen HTML yang digunakan untuk melukis grafik dan animasi. Kita boleh menggunakannya untuk mencapai saiz semula imej. Dalam Kanvas, kita boleh menggunakan kaedah drawImage() untuk melukis gambar dan juga melaraskan saiz gambar. Contohnya, kod berikut akan menunjukkan cara menggunakan Kanvas untuk melukis imej dengan saiz 200x200 piksel:

// 声明一个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;
}

Kod di atas menunjukkan cara menggunakan Kanvas untuk mengubah saiz imej kepada saiz 200x200 piksel. Mula-mula, kami mencipta elemen Kanvas dan menetapkan lebar dan ketinggiannya. Seterusnya, kami mendapat konteks Kanvas dan mencipta elemen Imej. Selepas elemen Imej dimuatkan, kami melukis imej pada Kanvas dan mendapatkan imej yang diubah suai. Akhir sekali, kami memaparkan imej yang diubah suai dalam HTML.

2. Gunakan HTMLImageElement untuk melaraskan saiz imej

Selain menggunakan Canvas, kami juga boleh menggunakan API dalam HTMLImageElement untuk melaraskan saiz imej. HTMLImageElement ialah elemen imej dalam HTML, yang menyediakan beberapa sifat dan kaedah untuk mengendalikan imej. Kod berikut akan menunjukkan cara menggunakan HTMLImageElement untuk mengubah saiz imej:

// 创建一个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;
}

Kod di atas menunjukkan cara menggunakan HTMLImageElement untuk mengubah saiz imej kepada saiz 200x200 piksel. Kami mencipta elemen Imej dan menetapkan URLnya. Selepas imej dimuatkan, kita boleh menggunakan atribut lebar dan ketinggian untuk menetapkan saiz imej. Akhir sekali, kami memaparkan imej yang diubah suai dalam HTML.

3. Ringkasan

Dalam artikel ini, kami memperkenalkan cara menggunakan JavaScript untuk mengubah saiz imej. Kami boleh menggunakan CSS untuk mengubah saiz imej sahaja, dan kami juga boleh menggunakan API dalam Kanvas HTML5 dan HTMLImageElement untuk mencapai pelarasan yang lebih kompleks. Menggunakan Kanvas boleh memberi kita lebih kebebasan, tetapi memerlukan proses lukisan yang lebih rumit manakala menggunakan HTMLImageElement adalah lebih mudah, tetapi fungsinya agak lemah. Pilih sahaja mengikut keperluan anda.

Atas ialah kandungan terperinci Bagaimana untuk mengubah saiz imej dengan javascript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!