Mengurangi ukuran gambar dalam javascript

Question

Mengubah ukuran gambar dengan JavaScript (JS) menciptakan efek bagus, banyak di antaranya tidak dapat Anda lakukan di Cascading Style Sheets (CSS). Namun, meskipun Anda dapat mengotomatiskan efek zoom dengan JS untuk memungkinkan pengguna memperbesar dan memperkecil gambar, ada banyak batasan

Table of Contents Show

Bagaimana cara mengurangi ukuran gambar dalam JavaScript?
Bagaimana cara mengurangi ukuran file dalam JavaScript?
Bagaimana cara mengatur ukuran gambar dalam JavaScript?
Bagaimana cara memperkecil gambar ke ukuran tertentu?

Artikel ini menunjukkan cara mengubah ukuran gambar dalam JavaScript untuk efek zoom dan melakukan hal yang sama lebih cepat dan lebih efektif di Cloudinary, yang dengannya Anda juga dapat menerapkan banyak efek menarik lainnya. Contohnya adalah penskalaan dengan nilai persentase dan lebar penskalaan hingga 140 persen dari aslinya. Yakinlah bahwa Anda akan terkesan

Inilah topiknya

Salin tautan ke tajuk ini

Mengubah ukuran gambar dengan JS sangat berguna untuk membuat galeri produk online, di mana pengguna dapat memperbesar atau memperkecil gambar sesuai dengan pengaturan maksimum yang Anda tentukan hanya dengan satu klik

Tugas pengubahan ukuran membutuhkan dua fungsi, yang dapat Anda sisipkan langsung ke sumber HTML Anda dengan tag

function zoomout(){
    var myImg = document.getElementById("zoom_img");
    var currWidth = myImg.clientWidth;
    if(currWidth >= 50){
        alert("That’s as small as it gets.");
    } else{
        myImg.style.width = (currWidth - 100) + "px";
    }
}

1 atau ke file JS mandiri. Fungsi tersebut berfungsi untuk semua tag

function zoomout(){
    var myImg = document.getElementById("zoom_img");
    var currWidth = myImg.clientWidth;
    if(currWidth >= 50){
        alert("That’s as small as it gets.");
    } else{
        myImg.style.width = (currWidth - 100) + "px";
    }
}

2 yang Anda beri label dengan ID

function zoomout(){
    var myImg = document.getElementById("zoom_img");
    var currWidth = myImg.clientWidth;
    if(currWidth >= 50){
        alert("That’s as small as it gets.");
    } else{
        myImg.style.width = (currWidth - 100) + "px";
    }
}

3. Lihat demo lengkap kode ini

Kedua fungsi tersebut adalah sebagai berikut

function zoomout(){
    var myImg = document.getElementById("zoom_img");
    var currWidth = myImg.clientWidth;
    if(currWidth >= 50){
        alert("That’s as small as it gets.");
    } else{
        myImg.style.width = (currWidth - 100) + "px";
    }
}

4, yang membuat tindakan zoom-in untuk memperbesar ukuran gambar sebesar 100 piksel hingga ukuran maksimum yang ditentukan (1000 px. ) tercapai

function zoomin(){
    var myImg = document.getElementById("zoom_img");
    var currWidth = myImg.clientWidth;
    if(currWidth >= 1000){
        alert("You’re fully zoomed in!");
    } else{
        myImg.style.width = (currWidth + 100) + "px";
    } 
}

_

function zoomout(){
    var myImg = document.getElementById("zoom_img");
    var currWidth = myImg.clientWidth;
    if(currWidth >= 50){
        alert("That’s as small as it gets.");
    } else{
        myImg.style.width = (currWidth - 100) + "px";
    }
}

5, yang membuat tindakan zoom-out untuk memperkecil gambar sebesar 100 piksel hingga ukuran minimum yang ditentukan (50 px. ) tercapai

function zoomout(){
    var myImg = document.getElementById("zoom_img");
    var currWidth = myImg.clientWidth;
    if(currWidth >= 50){
        alert("That’s as small as it gets.");
    } else{
        myImg.style.width = (currWidth - 100) + "px";
    }
}

Untuk memungkinkan pengguna memanggil fungsi tersebut, buat antarmuka (lihat di bawah) dengan tombol untuk gambar. Tambahkan mereka di atas atau di bawah elemen gambar di file HTML Anda

<button type="button" onclick="zoomin()"><img src="/examples/images/zoom-in.png"> Zoom In</button>

<button type="button" onclick="zoomout()"><img src="/examples/images/zoom-out.png"> Zoom Out</button>

Untuk detail selengkapnya tentang mengubah ukuran gambar dengan CSS, lihat Mengubah Ukuran Gambar. Secara Manual Dengan CSS dan Secara Otomatis Dengan Cloudinary

Salin tautan ke tajuk ini

Mengotomatiskan tugas pengubahan ukuran ideal untuk memungkinkan pengguna mengubah ukuran gambar dalam JavaScript atau untuk mengubah ukurannya dengan mekanisme bawaan sebelum disimpan. Contoh kode di bagian ini ada di CodePen

Untuk memulai, buat kerangka HTML untuk memuat, mempratinjau, dan mengubah gambar Anda. Kode berikut membuat input untuk menerima gambar, tombol untuk mengaktifkan pengubahan ukuran, dan dua placeholder untuk gambar asli dan gambar yang diubah ukurannya

<input id="imageFile" name="imageFile" type="file" class="imageFile" accept="image/*"/> 
<input type="button" value="Resize Image" 
onclick="resizeImage()"/> 
<br/>
<img src="" id="preview">
<img src="" id="output">

_

Selanjutnya, buat fungsi untuk menerima gambar

Catatan

Kode di bawah ini ada di jQuery. Pastikan untuk menautkan atau merujuk ke perpustakaan jQuery

$(document).ready(function() {
  $("#imageFile").change(function(event) {
    var files = event.target.files;
    var file = files[0];

    if (file) {
      var reader = new FileReader();
      reader.onload = function(e) {
        document.getElementById("preview").src = e.target.result;
      };
      reader.readAsDataURL(file);
    }
  });
});

_

Terakhir, buat fungsi pengubahan ukuran (lihat di bawah) untuk memuat gambar ke pembaca file, atur gambar yang akan diubah ukurannya, buat kanvas untuk mengubah ukuran, dan hasilkan gambar yang diubah ukurannya. Perhatikan komentar yang dicetak tebal untuk setiap langkah

function resizeImage() {
 var filesToUploads = document.getElementById("imageFile").files;
  var file = filesToUploads[0];
    if (file) {
      var reader = new FileReader();
      
// Set the image for the FileReader
      reader.onload = function (e) {
        var img = document.createElement("img");
        img.src = e.target.result;

// Create your canvas
        var canvas = document.createElement("canvas");
        var ctx = canvas.getContext("2d");
        ctx.drawImage(img, 0, 0);

        var MAX_WIDTH = 500;
        var MAX_HEIGHT = 500;
        var width = img.width;
        var height = img.height;

// Add the resizing logic
        if (width > height) {
          if (width > MAX_WIDTH) {
            height *= MAX_WIDTH / width;
            width = MAX_WIDTH;
          }
        } else {
          if (height > MAX_HEIGHT) {
            width *= MAX_HEIGHT / height;
            height = MAX_HEIGHT;
          }
        }

//Specify the resizing result
        canvas.width = width;
        canvas.height = height;
        var ctx = canvas.getContext("2d");
        ctx.drawImage(img, 0, 0, width, height);

        dataurl = canvas.toDataURL(file.type);
        document.getElementById("output").src = dataurl;
      };
      reader.readAsDataURL(file);
    }
  }

Salin tautan ke tajuk ini

Layanan berbasis cloud untuk mengelola gambar dan video, Cloudinary menawarkan paket berlangganan gratis selamanya. Saat berada di platform tersebut, Anda dapat mengunggah gambar, menerapkan efek bawaan, filter, dan modifikasi, termasuk rotasi gambar otomatis yang sulit atau tidak mungkin dibuat dengan CSS dan JS

Juga dengan Cloudinary, Anda dapat dengan mudah mengubah gambar secara terprogram dengan SDK atau parameter URL. Cloudinary menerapkan perubahan secara dinamis, membiarkan gambar asli Anda tetap utuh. Itu berarti Anda dapat memodifikasi gambar dengan cepat seiring perkembangan desain situs Anda dan saat Anda mendukung lebih banyak perangkat dan ukuran layar—sangat nyaman dan menghemat waktu

Berikut adalah tiga cara yang lebih cepat dan lebih mudah untuk mengubah ukuran gambar dalam JavaScript dengan Cloudinary. Yang perlu Anda lakukan hanyalah menambahkan parameter ke URL

Salin tautan ke tajuk ini

Dengan Cloudinary, Anda dapat memangkas gambar secara otomatis ke ukuran yang tepat melalui AI yang sadar konten. Selama proses tersebut, Anda dapat secara otomatis memilih wajah, fitur individual, atau bidang minat dengan menerapkan filter

function zoomout(){
    var myImg = document.getElementById("zoom_img");
    var currWidth = myImg.clientWidth;
    if(currWidth >= 50){
        alert("That’s as small as it gets.");
    } else{
        myImg.style.width = (currWidth - 100) + "px";
    }
}

6 (

function zoomout(){
    var myImg = document.getElementById("zoom_img");
    var currWidth = myImg.clientWidth;
    if(currWidth >= 50){
        alert("That’s as small as it gets.");
    } else{
        myImg.style.width = (currWidth - 100) + "px";
    }
}

7)

Pengaturan

function zoomout(){
    var myImg = document.getElementById("zoom_img");
    var currWidth = myImg.clientWidth;
    if(currWidth >= 50){
        alert("That’s as small as it gets.");
    } else{
        myImg.style.width = (currWidth - 100) + "px";
    }
}

8 dalam contoh ini secara otomatis memangkas area yang paling menarik, seperti yang ditentukan oleh AI

cloudinary.imageTag('veducate/skater_2_-_800.jpg', {width: 300, height: 300, gravity: "auto", crop: "crop"}).toHtml();



Code language: JavaScript (javascript)

Anda juga dapat menentukan area yang akan dipertahankan dengan pemangkasan cerdas. Kasus penggunaan adalah untuk memastikan bahwa model tidak menjadi pusat perhatian dalam gambar produk. Contoh ini menentukan ransel sebagai area fokus

Memuat contoh kode

g_auto. klasik Memuat contoh kode

g_auto. ransel

cloudinary.imageTag('veducate/spencer-backman-482079-unsplash.jpg', {width: 175, height: 175, gravity: "auto:backpack", crop: "thumb"}).toHtml();
Code language: JavaScript (javascript)

Salin tautan ke tajuk ini

Kolase foto itu menyenangkan. Dengan menggabungkan parameter

function zoomout(){
    var myImg = document.getElementById("zoom_img");
    var currWidth = myImg.clientWidth;
    if(currWidth >= 50){
        alert("That’s as small as it gets.");
    } else{
        myImg.style.width = (currWidth - 100) + "px";
    }
}

9 dan

<button type="button" onclick="zoomin()"><img src="/examples/images/zoom-in.png"> Zoom In</button>

<button type="button" onclick="zoomout()"><img src="/examples/images/zoom-out.png"> Zoom Out</button>

0, Anda dapat mengumpulkan gambar dalam urutan apa pun dan memperindahnya dengan teks atau filter

Contoh di bawah menambahkan gambar ke kolase dengan ukuran yang diinginkan (

<button type="button" onclick="zoomin()"><img src="/examples/images/zoom-in.png"> Zoom In</button>

<button type="button" onclick="zoomout()"><img src="/examples/images/zoom-out.png"> Zoom Out</button>

1 dan

<button type="button" onclick="zoomin()"><img src="/examples/images/zoom-in.png"> Zoom In</button>

<button type="button" onclick="zoomout()"><img src="/examples/images/zoom-out.png"> Zoom Out</button>

2 atribut), posisi (

<button type="button" onclick="zoomin()"><img src="/examples/images/zoom-in.png"> Zoom In</button>

<button type="button" onclick="zoomout()"><img src="/examples/images/zoom-out.png"> Zoom Out</button>

3 dan

<button type="button" onclick="zoomin()"><img src="/examples/images/zoom-in.png"> Zoom In</button>

<button type="button" onclick="zoomout()"><img src="/examples/images/zoom-out.png"> Zoom Out</button>

4 atribut), mode potong (

<button type="button" onclick="zoomin()"><img src="/examples/images/zoom-in.png"> Zoom In</button>

<button type="button" onclick="zoomout()"><img src="/examples/images/zoom-out.png"> Zoom Out</button>

5 atribut), dan sudut rotasi (`av atribut)

Memuat contoh kode

cloudinary.imageTag('yellow_tulip.jpg', {transformation: [
  {width: 220, height: 140, crop: "fill"},
  {overlay: new cloudinary.Layer().publicId("brown_sheep"), width: 220, height: 140, crop: "fill", x: 220},
  {overlay: new cloudinary.Layer().publicId("horses"), width: 220, height: 140, crop: "fill", y: 140, x: -110},
  {overlay: new cloudinary.Layer().publicId("white_chicken"), width: 220, height: 140, crop: "fill", y: 70, x: 110},
  {overlay: new cloudinary.Layer().publicId("butterfly"), height: 200, x: -10, angle: 10}
  ]}).toHtml();
Code language: JavaScript (javascript)

Salin tautan ke tajuk ini

Dengan memangkas gambar menjadi bentuk khusus, Anda dapat menyesuaikannya di ruang mana pun. Cukup terapkan parameter

<button type="button" onclick="zoomin()"><img src="/examples/images/zoom-in.png"> Zoom In</button>

<button type="button" onclick="zoomout()"><img src="/examples/images/zoom-out.png"> Zoom Out</button>

_6 sebagai topeng dan parameter

<button type="button" onclick="zoomin()"><img src="/examples/images/zoom-in.png"> Zoom In</button>

<button type="button" onclick="zoomout()"><img src="/examples/images/zoom-out.png"> Zoom Out</button>

7 (f di URL)

Untuk mengatur semuanya, tentukan ukuran gambar akhir, tentukan mask dan fungsi terkait, dan tentukan gambar sumber, seperti ini

Memuat contoh kode

cloudinary.imageTag('pasta.png', {transformation: [
  {width: 173, height: "200", crop: “fill”},
  {overlay: new cloudinary.Layer().publicId("hexagon_sample"), flags: “cutter”},
  ]}).toHtml();
Code language: JavaScript (javascript)

Menambahkan parameter

<button type="button" onclick="zoomin()"><img src="/examples/images/zoom-in.png"> Zoom In</button>

<button type="button" onclick="zoomout()"><img src="/examples/images/zoom-out.png"> Zoom Out</button>

_8 mencocokkan topeng dengan proporsi yang Anda inginkan, seperti dalam contoh ini

Memuat contoh kode

function zoomout(){
    var myImg = document.getElementById("zoom_img");
    var currWidth = myImg.clientWidth;
    if(currWidth >= 50){
        alert("That’s as small as it gets.");
    } else{
        myImg.style.width = (currWidth - 100) + "px";
    }
}

0

Salin tautan ke tajuk ini

Selain kemampuan mengubah ukuran gambar, Cloudinary menawarkan banyak alat canggih untuk pengembang web, termasuk yang berikut ini

Bagaimana cara mengurangi ukuran gambar dalam JavaScript?

// Membuat elemen canvas secara dinamis var canvas = document. createElement("kanvas"); . getContext("2d"); . ctx. drawImage(img, 0, 0, 300, 300); // Menampilkan gambar yang diubah ukurannya di elemen pratinjau var dataurl = kanvas.