Можем ли мы получить реальный размер изображения через холст?

Question

В теге изображения, если мы не предоставим свойство width и height, мы ничего не получим при получении ширины и высоты изображения. Я использую элемент canvas, чтобы загрузить изображение и пропорционально масштабировать его. Чтобы сделать это, я должен получить фактический размер изображения. Можно ли сделать это в HTML 5?

Answer 1

HTMLImageElement имеет два свойства для этого, naturalWidth и naturalHeight.Используйте их.

Как в:

var img = new Image();

img.addEventListener('load', function() {
  // once the image is loaded:
  var width = img.naturalWidth; // this will be 300
  var height = img.naturalHeight; // this will be 400
  someContext.drawImage(img, 0, 0, width, height);
}, false);

img.src = 'http://placekitten.com/300/400'; // grab a 300x400 image from placekitten

Целесообразно устанавливать источник только после того, как определитель прослушивателя событий определен, см. Исследование Phrogz по этому вопросу здесь: Следует установить src для изображениячтобы данные URL были доступны сразу?

Answer 2

Невозможно получить ширину / высоту до загрузки изображения.

Попробуйте что-то вроде:

// create new Image or get it right from DOM, 
// var img = document.getElementById("myImage");
var img = new Image();

img.onload = function() { 
  // this.width contains image width 
  // this.height contains image height
}

img.src = "image.png";

В любом случае onload не сработает, если изображение было загружено до выполнения скрипта. В конце концов вы можете встроить скрипт в HTML <img src="test.jpg" onload="something()">

Answer 3

если я вас правильно понимаю, вы можете использовать метод getComputedStyle.

var object = document.getElementById(el);
var computedHeight = document.defaultView.getComputedStyle(object, "").getPropertyValue("width"); 

Answer 4

Не до конца понял ваш вопрос.

Но вы можете использовать javascript, чтобы получить ширину и высоту изображения.

, а затем передать его в

 / Five arguments: the element, destination (x,y) coordinates, and destination 
// width and height (if you want to resize the source image).
 context.drawImage(img_elem, dx, dy, dw, dh);

при рисовании изображения на холсте.

или отметьте это, если это поможет

http://jsfiddle.net/jjUHs/