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

Question

Недавно я сделал и разместил Catifier.com.

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

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

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

Answer 1

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

Так поясню, когда вы хотите сделать это, вот шаги:

• Добавить свою фотографию в невидимом DOM элемента.
• Вы сможете получить ширину изображения и heignt при запуске события 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. Если это помогает больше.