HTML5 - определение размера изображения, изменение размера холста

Question

Я недавно сделал и принимал Catifier.com.

Это работает довольно хорошо, за исключением того, что у меня есть ошибка с сохранением, я должен работать, и он растягивает изображения, когда вы устанавливаете их в качестве фона.

Портретные изображения выглядят ужасно.

Можно ли определить ширину и высоту изображения, которое пользователь вставляет в поле, а затем соответствующим образом изменить размер холста?

Answer 1

Вы должны загрузить свое изображение в элемент DOM, чтобы узнать его размер.

Итак, если вы хотите это сделать, вот шаги:

• Добавьте ваше изображениев невидимом элементе DOM.
• Вы сможете получить ширину и высоту изображения при запуске события onload.
• Затем создайте свой холст в зависимости от этих двух переменных.

Все может быть сделано в несколько строк JavaScript.

Answer 2

Просто напишу очень общий и, вероятно, не полностью функциональный способ сделать это очень быстро, просто чтобы дать больше идеи.

var img = document.getElementByTagName('img');
for (var i = 0; i < img.length; i++) {
  var width = img[i].width,
      height = img[i].height;

  // do some stuff with the img[i] width and height here if you like. for each image on the page... 
}

Не то, как вы в конечном итоге это сделаете, но этотак же просто, как делать, img.width или height.Если это поможет больше.