Penjanaan lakaran kecil automatik menggunakan JavaScript

Dengan perkembangan Internet, gambar telah menjadi bahagian yang sangat diperlukan dalam halaman web. Tetapi apabila bilangan imej meningkat, kelajuan memuatkan imej telah menjadi isu yang sangat penting. Untuk menyelesaikan masalah ini, banyak tapak web menggunakan lakaran kecil untuk memaparkan imej, tetapi untuk menghasilkan lakaran kecil, kita perlu menggunakan alat pemprosesan imej profesional, yang merupakan perkara yang sangat menyusahkan bagi sesetengah orang bukan profesional. Kemudian, menggunakan JavaScript untuk mencapai penjanaan lakaran kecil automatik menjadi pilihan yang baik.

Bagaimana untuk menggunakan JavaScript untuk menghasilkan lakaran kecil automatik? Pertama, kita perlu memahami API Fail HTML5. API Fail membolehkan kami membaca fail tempatan dan mengendalikan fail ini menggunakan JavaScript. Kita boleh menggunakannya untuk mendapatkan maklumat yang berkaitan tentang imej, seperti lebar dan ketinggian imej. Selepas kami memperoleh maklumat imej, kami boleh mula menjana imej kecil.

Berikut ialah contoh menggunakan API Fail untuk membaca imej setempat:

<input type="file" onchange="handleFiles(this.files)">
<script>
function handleFiles(files) {
  var img = new Image;
  var reader = new FileReader;
  reader.onload = function(e) {
    img.src = e.target.result;
    document.body.appendChild(img);
  }
  reader.readAsDataURL(files[0]);
}
</script>

Kod ini mendapatkan imej melalui elemen a2dc5349fb8bb852eaec4b6390c03b14 dan menggunakan FileReader untuk membaca data imej. Selepas bacaan selesai, tetapkan atribut src imej kepada data baca, dan imej yang dimuat naik boleh dipaparkan pada halaman.

Seterusnya, kita perlu mengecilkan saiz imej. Kami boleh melengkapkan operasi lakaran kecil melalui kanvas. Kanvas ialah elemen HTML yang digunakan untuk melukis grafik Ia membolehkan kita melukis pelbagai bentuk pada halaman, termasuk teks dan gambar. Kita boleh meletakkan imej ke dalam Kanvas, melakukan operasi lakaran kenit dan kemudian mendapatkan data lakaran kenit dan memaparkannya pada halaman.

Berikut ialah contoh penggunaan Kanvas untuk menjana lakaran kenit:

<input type="file" onchange="handleFiles(this.files)">
<script>
function handleFiles(files) {
  var canvas = document.createElement('canvas');
  var ctx = canvas.getContext('2d');
  var reader = new FileReader;
  reader.onload = function(e) {
    var img = new Image;
    img.onload = function() {
      var w = img.width, h = img.height;
      var max = Math.max(w, h);
      var scale = max / 200;
      canvas.width = w / scale;
      canvas.height = h / scale;
      ctx.drawImage(img, 0, 0, canvas.width, canvas.height);
      var data = canvas.toDataURL();
      var thumbnail = new Image;
      thumbnail.src = data;
      document.body.appendChild(thumbnail);
    }
    img.src = e.target.result;
  }
  reader.readAsDataURL(files[0]);
}
</script>

Kod ini menggunakan Kanvas untuk menjana lakaran kenit dan memaparkan lakaran kenit pada halaman. Dalam contoh ini, kami mengehadkan saiz lakaran kenit kepada 200 piksel Jika lebar dan ketinggian imej kurang daripada 200 piksel, lakaran kecil tidak akan diproses.

Melalui pengenalan di atas, kita dapat mengetahui bahawa tidak sukar untuk menggunakan JavaScript untuk mencapai penjanaan lakaran kecil automatik. Kami hanya perlu menguasai penggunaan asas API Fail dan Kanvas untuk menyelesaikan kerja ini dengan mudah. Pada masa yang sama, dalam penggunaan sebenar, kita juga perlu memberi perhatian kepada beberapa masalah, seperti isu keserasian yang mungkin dihadapi, dan lain-lain, yang perlu diselesaikan dengan cara yang disasarkan. Saya harap pengenalan dalam artikel ini dapat membantu semua orang.

Atas ialah kandungan terperinci Penjanaan lakaran kecil automatik menggunakan JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!