Grafik digunakan untuk menggambarkan aspek gambar yang merupakan bagian penting dari aplikasi web apa pun. HTML menawarkan dua cara untuk membuat grafik. Yang pertama adalah canvas, dan yang lainnya adalah SVG. Pada artikel hari ini, kita akan belajar cara membuat grafik, khususnya cara menggambar dalam HTML dengan kanvas dan JavaScript

Ubah Ukuran Gambar dengan canvas dalam HTML Menggunakan JavaScript

Kanvas adalah elemen HTML standar yang digunakan untuk menggambar grafik dalam aplikasi web. Itu tidak lebih dari area persegi panjang di halaman tanpa batas atau konten. Pengguna dapat menggunakan area persegi panjang ini untuk menggambar grafik

Grafik yang dirender di kanvas berbeda dari gaya HTML dan CSS normal. Seluruh kanvas dengan semua grafik di dalamnya diperlakukan sebagai satu elemen DOM

Selamat datang di tutorial singkat dan contoh cara mengubah ukuran gambar di Javascript. Ya, mengubah ukuran gambar bukan lagi masalah sisi server. Kita juga bisa melakukannya di Javascript hanya dengan beberapa baris kode

Kita dapat menggunakan API kanvas untuk mengubah ukuran gambar dalam Javascript

1. Mulailah dengan membuat gambar dan kanvas baru
   • var img = new Image[];_
   • var canvas = document.createElement["canvas"];
   • var ctx = canvas.getContext["2d"];_
2. Ubah ukuran saat memuat gambar – img.onload = [] => { ctx.drawImage[img, 0, 0, NEW WIDTH, NEW HEIGHT]; };
3. Atur sumber gambar untuk memulai – img.src = "IMAGE.JPG";

Itu mencakup dasar-dasar cepat, tetapi mari kita telusuri beberapa contoh aktual – Baca terus

ⓘ Saya telah menyertakan file zip dengan semua kode sumber di awal tutorial ini, jadi Anda tidak perlu menyalin-tempel semuanya… Atau jika Anda hanya ingin langsung masuk

 

 

SLIDE CEPAT

Unduh & Catatan

 

UNDUH & CATATAN

Pertama, berikut adalah tautan unduhan ke kode contoh seperti yang dijanjikan

 

CATATAN CEPAT

Jika Anda menemukan bug, jangan ragu untuk berkomentar di bawah ini. Saya mencoba menjawab pertanyaan singkat juga, tetapi itu adalah satu orang versus seluruh dunia… Jika Anda sangat membutuhkan jawaban, silakan periksa daftar situs web saya untuk mendapatkan bantuan dalam pemrograman

 

DOWNLOAD KODE CONTOH

Klik di sini untuk mengunduh semua kode sumber contoh, saya telah merilisnya di bawah lisensi MIT, jadi silakan membangun di atasnya atau menggunakannya dalam proyek Anda sendiri

 

 

JAVASCRIPT UBAH UKURAN GAMBAR

Baiklah, sekarang mari kita masuk ke contoh cara mengubah ukuran gambar di Javascript

 

CONTOH 1] UBAH UKURAN GAMBAR dan TAMPILKAN PADA HALAMAN

HTML

1-ubah ukuran. html

Original Image [300 X 277]

 

Resized Image [50%]

Tidak banyak di sini… Yang sebenarnya kita butuhkan hanyalah kosong untuk menggambar gambar yang diubah ukurannya

 

JAVASCRIPT

1-ubah ukuran. html

// [B1] NEW IMAGE OBJECT & HTML CANVAS
var img = new Image[],
    canvas = document.getElementById["resized"],
    ctx = canvas.getContext["2d"];

// [B2] RESIZE ON IMAGE LOAD
img.onload = [] => {
  let width = Math.floor[img.naturalWidth * 0.5],
      height = Math.floor[img.naturalHeight * 0.5];
  canvas.width = width;
  canvas.height = height;
  ctx.drawImage[img, 0, 0, width, height];
};

// [B3] GO!
img.src = "corgi.png";

_

Ya, itu saja, dan ini seharusnya cukup mudah

• [B1] Buat objek

  // [B1] NEW IMAGE OBJECT & HTML CANVAS
  var img = new Image[],
      canvas = document.getElementById["resized"],
      ctx = canvas.getContext["2d"];
  
  // [B2] RESIZE ON IMAGE LOAD
  img.onload = [] => {
    let width = Math.floor[img.naturalWidth * 0.5],
        height = Math.floor[img.naturalHeight * 0.5];
    canvas.width = width;
    canvas.height = height;
    ctx.drawImage[img, 0, 0, width, height];
  };
  
  // [B3] GO!
  img.src = "corgi.png";

  _0, dapatkan kanvas HTML
• [B2] Saat gambar dimuat penuh, kami menghitung dimensi baru dan menggambar versi yang diubah ukurannya ke
• [B3] Atur sumber gambar, mulai memuat gambar

 

 

DEMO

Gambar Asli [300 X 277]

Itu saja untuk tutorialnya, dan ini adalah bagian kecil tentang beberapa tambahan dan tautan yang mungkin berguna bagi Anda

 

PERIKSA KOMPATIBILITAS

• Kanvas – CanIUse
• Draw Image – CanIUse
• Fungsi Panah – CanIUse
• Ke Data URL – CanIUse
• Lebar & Tinggi Alami – Dapat Digunakan

Contoh-contoh ini seharusnya berfungsi di semua browser modern

 

LINK dan REFERENSI

• Kanvas API – MDN
• Elemen Kanvas – MDN
• Konversi Gambar ke Data URI dengan JavaScript – TutorialsPoint
• Unduh Kanvas Sebagai Gambar – Kotak Kodex

 

VIDEO TUTORIAL

 

LEMBAR CHEAT INFOGRAFIS

Terima kasih telah membaca, dan kami telah sampai pada akhir. Saya harap ini membantu Anda untuk lebih memahami, dan jika Anda ingin berbagi sesuatu dengan panduan ini, jangan ragu untuk berkomentar di bawah ini. Semoga berhasil dan selamat membuat kode

Bagaimana cara mengubah ukuran gambar dalam JavaScript?

Bagaimana cara mendapatkan ukuran gambar dalam JavaScript?

Bagaimana cara mengubah ukuran gambar dalam kode?

Bagaimana cara memperbesar dan memperkecil gambar menggunakan JavaScript?