Trang chủ
Share Code

[SHARE CODE] Cách Lấy Kích Thước Của Ảnh Bằng JavaScript

Hình ảnh là một phần quan trọng trong phát triển trang web và ứng dụng, và đôi khi chúng ta cần lấy thông tin về kích thước của hình ảnh để tùy chỉnh hiển thị và tương tác. Trong bài viết này, chúng ta sẽ khám phá cách sử dụng JavaScript để lấy kích thước của hình ảnh một cách đơn giản và hiệu quả.
Để lấy size của một hình ảnh bất kỳ với JavaScript, có rất nhiều cách, dưới đây là một vài cách từ đơn giản đến sử dụng jQuery.

Lấy Size Hình Ảnh Bằng JavaScript Thuần:

Đầu tiên, chúng ta cần có một đối tượng hình ảnh trên trang web hoặc ứng dụng của mình. Sau đó, sử dụng JavaScript, chúng ta có thể truy cập thuộc tính naturalWidth và naturalHeight của đối tượng hình ảnh để lấy kích thước thực tế của nó.

  
  // Lấy đối tượng hình ảnh
  var img = document.getElementById("my-image");

  // Lấy kích thước thực tế của hình ảnh
  var width = img.naturalWidth;
  var height = img.naturalHeight;

  // Hiển thị kích thước
  console.log("Kích thước của hình ảnh là: " + width + " x " + height);
Trong ví dụ trên, chúng ta sử dụng phương thức getElementById để lấy đối tượng hình ảnh thông qua ID của nó. Sau đó, chúng ta sử dụng thuộc tính naturalWidth và naturalHeight để lấy kích thước thực tế của hình ảnh. Cuối cùng, chúng ta hiển thị kích thước bằng cách sử dụng console.log hoặc bạn có thể hiển thị nó trên trang web theo cách khác.
Hoặc bạn cũng có thể dùng clientWidth và clientHeight

  
  var img = document.getElementById('imageid'); 
  //hoặc bất kỳ cách nào bạn sử dụng để truy cập đối tượng hình ảnh
  var width = img.clientWidth;
  var height = img.clientHeight;

Lấy Size Hình Ảnh Bằng Thư Viện jQuery:

Nếu bạn đang sử dụng jQuery và bạn đang yêu cầu kích thước hình ảnh, bạn phải chờ cho đến khi hình ảnh được tải hoàn chỉnh, nếu không bạn sẽ chỉ nhận được giá trị zero (không có thông tin về kích thước).

  
  $(document).ready(function() {
    $("img").load(function() {
        alert($(this).height());
        alert($(this).width());
    });
  });
Bạn có thể thay alert thành console.log nếu không muốn thông báo hiện lên

Công Cụ Lấy Size Ảnh Online

Nếu bạn lười thì có thể dùng công cụ dưới đây luôn cho tiện
Chọn hình ảnh:

Created by Cuongbok.

Trong bài viết này, chúng ta đã tìm hiểu về cách sử dụng JavaScript để lấy kích thước của hình ảnh một cách dễ dàng và linh hoạt. Bằng cách truy cập các thuộc tính naturalWidth và naturalHeight của đối tượng hình ảnh, chúng ta có thể lấy kích thước thực tế của hình ảnh và sử dụng thông tin đó cho các mục đích hiển thị và tương tác.

Thông qua việc lấy kích thước của hình ảnh, chúng ta có thể thực hiện các tác vụ như điều chỉnh kích thước hiển thị, xác định tỷ lệ khung hình, tải hình ảnh tùy chỉnh hoặc tạo các hiệu ứng động dựa trên kích thước hình ảnh.

Tuy nhiên, hãy nhớ rằng việc lấy kích thước của hình ảnh bằng JavaScript chỉ có thể thực hiện sau khi hình ảnh đã được tải hoàn toàn. Vì vậy, để đảm bảo tính chính xác, hãy chắc chắn kiểm tra xem hình ảnh đã tải xong trước khi lấy kích thước.

Tổng kết lại, việc lấy kích thước của hình ảnh bằng JavaScript là một kỹ năng quan trọng trong phát triển trang web và ứng dụng. Với khả năng truy cập và sử dụng thuộc tính naturalWidth và naturalHeight, chúng ta có thể làm việc với hình ảnh một cách linh hoạt và tạo ra các trải nghiệm tương tác hấp dẫn cho người dùng.

Đăng nhận xét

Lưu ý

Khuyên bạn hạn chế bình luận ẩn danh, hãy đăng nhập bằng tài khoản Google.

Nếu muốn bình luận 1 đoạn code, bạn hãy mã hóa code để code hiển thị chính xác nhé!