Hướng dẫn get natural width of image javascript - lấy chiều rộng tự nhiên của javascript hình ảnh

Question

Tôi có mã này cho đến nay:

Nội dung chính Show

Thông số kỹ thuật
Tính tương thích của trình duyệt web
Làm thế nào để bạn tìm thấy kích thước của một hình ảnh?
NaturalHeight là gì?
IMG Naturalwidth là gì?
Làm cách nào để tìm ra kích thước URL hình ảnh?

var img = document.getElementById('draggable');
var width = img.clientWidth;
var height = img.clientHeight;

Tuy nhiên, điều này giúp tôi có được các thuộc tính HTML - CSS. Tôi muốn nhận kích thước của tài nguyên hình ảnh thực tế, của tệp.

Tôi cần điều này bởi vì khi tải lên một hình ảnh, chiều rộng của nó được đặt thành 0px và tôi không biết tại sao điều này xảy ra. Để ngăn chặn nó, tôi muốn có được kích thước thực tế và đặt lại chúng. Điều này có thể?

EDIT: Ngay cả khi tôi cố gắng để có được NaturalWidth, tôi nhận được 0. Tôi đã thêm một hình ảnh. Điều kỳ lạ là nó chỉ xảy ra khi tôi tải lên các tệp mới và khi làm mới nó hoạt động như bình thường.

http://oi39.tinypic.com/3582xq9.jpg

Isherwood

54,4K15 Huy hiệu vàng105 Huy hiệu bạc147 Huy hiệu đồng15 gold badges105 silver badges147 bronze badges

Đã hỏi ngày 2 tháng 5 năm 2013 lúc 16:16May 2, 2013 at 16:16

0

Bạn có thể sử dụng naturalWidth và naturalHeight, các thuộc tính này chứa chiều rộng và chiều cao không được sửa đổi của hình ảnh, nhưng bạn phải đợi cho đến khi hình ảnh được tải để lấy chúng

var img = document.getElementById('draggable');

img.onload = function() {
    var width  = img.naturalWidth;
    var height = img.naturalHeight;
}

Điều này chỉ được hỗ trợ từ IE9 trở lên, nếu bạn phải hỗ trợ trình duyệt cũ hơn, bạn có thể tạo một hình ảnh mới, hãy đặt nguồn của nó thành cùng một hình ảnh và nếu bạn không sửa đổi kích thước của hình ảnh, nó sẽ trả về hình ảnh tự nhiên Kích thước, vì đó sẽ là mặc định khi không có kích thước nào khác

var img     = document.getElementById('draggable'),
    new_img = new Image();

new_img.onload = function() {
    var width  = this.width,
        heigth = this.height;
}

new_img.src = img.src;

VĨ CẦM

Đã trả lời ngày 2 tháng 5 năm 2013 lúc 16:20May 2, 2013 at 16:20

Hướng dẫn get natural width of image javascript - lấy chiều rộng tự nhiên của javascript hình ảnh

Adeneoadeneoadeneo

307K28 Huy hiệu vàng387 Huy hiệu bạc383 Huy hiệu Đồng28 gold badges387 silver badges383 bronze badges

3

Không có ___trans___pre___8 và no___trans___pre___9 cung cấp cho bạn chiều rộng và chiều cao của chính hình ảnh, chứ không phải phần tử DOM.

Ry- ♦♦

Phim thương hiệu vàng 212K5454 gold badges442 silver badges456 bronze badges

Đã trả lời ngày 2 tháng 5 năm 2013 lúc 16:18May 2, 2013 at 16:18

mashmashmash

14.2k3 Huy hiệu vàng29 Huy hiệu bạc32 Huy hiệu Đồng3 gold badges29 silver badges32 bronze badges

2

Bạn có thể sử dụng chức năng sau tôi đã thực hiện.

Hàm số

function getImageDimentions(imageNode) {
  var source = imageNode.src;
  var imgClone = document.createElement("img");
  imgClone.src = source;
  return {width: imgClone.width, height: imgClone.height}
}

html:

Sử dụng nó như thế này

var image = document.getElementById("myimage"); // get the image element
var dimentions = getImageDimentions(image); // get the dimentions
alert("width: " + dimentions.width + ", height: " + dimentions.height); // give the user a visible alert of the dimentions

Đã trả lời ngày 1 tháng 12 năm 2015 lúc 14:36Dec 1, 2015 at 14:36

Nathnoltnathnoltnathnolt

3454 Huy hiệu bạc7 Huy hiệu đồng4 silver badges7 bronze badges

1

Giao diện NO___Trans___PRE___10 thuộc tính chỉ đọc NO___Trans___Pre___6 trả về phần nội tại (tự nhiên), chiều rộng được điều chỉnh mật độ của hình ảnh trong các pixel CSS.naturalWidth property returns the intrinsic (natural), density-corrected width of the image in CSS pixels.

Đây là chiều rộng hình ảnh nếu được vẽ không có gì ràng buộc chiều rộng của nó; Nếu bạn không chỉ định chiều rộng cho hình ảnh cũng như đặt hình ảnh bên trong một thùng chứa giới hạn hoặc chỉ định rõ ràng chiều rộng hình ảnh, thì đây là số lượng pixel CSS rộng mà hình ảnh sẽ có.

Phương thức NO___Trans___Pre___7 tương ứng trả về chiều cao tự nhiên của hình ảnh.

Lưu ý: Hầu hết thời gian chiều rộng tự nhiên là chiều rộng thực tế của hình ảnh được gửi bởi máy chủ. Tuy nhiên, trình duyệt có thể sửa đổi một hình ảnh trước khi đẩy nó vào trình kết xuất. Ví dụ, Chrome làm giảm độ phân giải của hình ảnh trên các thiết bị cấp thấp. Trong những trường hợp như vậy, naturalWidth sẽ xem xét chiều rộng của hình ảnh được sửa đổi bởi các can thiệp của trình duyệt như chiều rộng tự nhiên và trả về giá trị này. Most of the time the natural width is the actual width of the image sent by the server. Nevertheless, browsers can modify an image before pushing it to the renderer. For example, Chrome degrades the resolution of images on low-end devices. In such cases, naturalWidth will consider the width of the image modified by such browser interventions as the natural width, and returns this value.

Giá trị

Một giá trị số nguyên biểu thị chiều rộng nội tại của hình ảnh, trong các pixel CSS. Đây là chiều rộng mà hình ảnh được vẽ một cách tự nhiên khi không có ràng buộc hoặc giá trị cụ thể được thiết lập cho hình ảnh. Chiều rộng tự nhiên này được hiệu chỉnh cho mật độ pixel của thiết bị mà nó được trình bày, không giống như giá trị của no___trans___pre___14.

Nếu chiều rộng nội tại không có sẵn vì hình ảnh không chỉ định chiều rộng nội tại hoặc vì dữ liệu hình ảnh không có sẵn để có được thông tin này, thì không

Ví dụ

Xem NO___Trans___Pre___16 Ví dụ: mã hiển thị hình ảnh ở cả kích thước "điều chỉnh mật độ" tự nhiên của nó và trong kích thước được hiển thị của nó được thay đổi bởi CSS của trang và các yếu tố khác.

Thông số kỹ thuật

Sự chỉ rõ
Tiêu chuẩn HTML # Dom-Img-Naturalwidth-Dev # dom-img-naturalwidth-dev

Tính tương thích của trình duyệt web

Bảng BCD chỉ tải trong trình duyệt

Làm thế nào để bạn tìm thấy kích thước của một hình ảnh?

Để xác định kích thước của hình ảnh bằng Chrome, hãy làm theo các bước sau:..

Mở trang với nguồn cấp dữ liệu của bạn trong chrome ..

Nhấp chuột phải vào hình ảnh có kích thước bạn muốn biết và chọn kiểm tra ..

Xem chiều rộng và chiều cao của hình ảnh của bạn được hiển thị trong Chrome devtools.(Lưu ý, số đầu tiên luôn là chiều rộng) ..

NaturalHeight là gì?

Thuộc tính tự nhiên trả về chiều cao ban đầu của một hình ảnh.returns the original height of an image.

IMG Naturalwidth là gì?

Thuộc tính NaturalWidth trả về chiều rộng ban đầu của hình ảnh.Ví dụ: nếu bạn có một hình ảnh ban đầu rộng 100 pixel.Sau đó, bạn tạo kiểu hình ảnh với CSS/hoặc bằng cách sử dụng thuộc tính HTML "chiều rộng" HTML để làm cho nó rộng 500 pixel.returns the original width of an image. For example, if you have an image that is originally 100 pixels wide. Then, you style the image with CSS/or by using the HTML "width" attribute to make it 500 pixels wide.

Làm cách nào để tìm ra kích thước URL hình ảnh?

Di chuột qua URL để xem bật lên với tất cả các thuộc tính hình ảnh.Biện pháp bật lên này bao gồm kích thước được hiển thị - kích thước mà trang web cần - cũng như kích thước nội tại - kích thước của hình ảnh ban đầu được tải lên.. This pop up includes the Rendered size – the dimensions that the website needs – as well as the Intrinsic size – the dimensions of the originally image uploaded.

programming javascript What is naturalHeight? Get image size Add img js

Hướng dẫn get natural width of image javascript - lấy chiều rộng tự nhiên của javascript hình ảnh

Giá trị

Ví dụ

Thông số kỹ thuật

Tính tương thích của trình duyệt web

Làm thế nào để bạn tìm thấy kích thước của một hình ảnh?

NaturalHeight là gì?

IMG Naturalwidth là gì?

Làm cách nào để tìm ra kích thước URL hình ảnh?

Bài Viết Liên Quan

Quảng Cáo

Có thể bạn quan tâm

Toplist được quan tâm

Quảng cáo

Xem Nhiều

Quảng cáo

Chúng tôi

Điều khoản

Trợ giúp

Mạng xã hội