Как изменить размер изображения в javascript

У меня есть редактор HTML, который вставляет элементы из предопределенных кнопок с помощью javascript и хотел бы добавить кнопку, чтобы иметь возможность опубликовать миниатюру загруженного изображения со ссылкой, чтобы просмотреть его в полном размере. Я создал следующий код, но он не работает и всегда вставляет изображение размера 100X100. Может ли кто-нибудь предложить лучший способ, который работает?Как изменить размер изображения в javascript

// insert HTML code 
insertHtml: function (url, title) { 
    var imgHeight; 
    var imgWidth; 
    function setHTMLImageSize() { 
     imgHeight = this.height; 
     imgWidth = this.width; 
     var ImageRatio = (imgHeight/imgWidth); 
     if (imgWidth > 100) { 
      imgWidth = 100; 
      imgHeight = (imgWidth * ImageRatio); 
     } 
     return true; 
    } 
    var myImage = new Image(); 
    myImage.name = url; 
    myImage.onload = setHTMLImageSize; 
    myImage.src = url; 
    if (imgWidth = 0) { 
     imgWidth = 100; 
    } 
    if (imgHeight = 0) { 
     imgHeight = 100; 
    } 
    this.get_designPanel().insertHTML("<a href=\"" + url + "\" target=\"" + "_blank" + "\" style=\"" + "text-decoration: none" + "\" ><img src=\"" + url + "\" title=\"" + title + "\" width=\"" + imgWidth + "\" height=\"" + imgHeight + "\" /></a><br/>click image to View full size<br/>"); 
}

источник

2016-12-11 David DIlley

Вы устанавливаете ширину и высоту до 100, прежде чем функция onload активирует. Нагрузка будет происходить асинхронно, поэтому вы должны выполнить проверку нулевой высоты или ширины внутри обратного вызова.

Редактировать: - Как отмечалось в увеличении в примечании ниже, вы также использовали равные по назначению, а не для проверки условий. Я бы изменил их на тройку равным ===, как правило, когда вы знаете тип, который вы ожидаете.

Не все-таки проще управлять эскизом через CSS? Вы можете установить свойства max-height и max-width для поддержания пропорций.

источник

2016-12-11 10:15:05 AndFisher

Done с событием OnLoad SetHTMLImageSize называют –

@DavidDIlley - Да, kindof. Этот вызов влияет на изображение в вашем коде, известном как 'myImage'. Этот вызов 'SetHTMLImageSize' изменяет значения, которые' imgWidth' и 'imgHeight'. К сожалению, они используются до того, как они получили значение. Пробег через код видит, что они оба ничего не держат (не ноль, но ничего - то есть «undefined»). Кроме того, в вызове, где вы проверяете, были ли они равны нулю, вы ошибочно использовали '=' (set to) а не '==' (равно). Добавьте несколько вызовов в 'console.log', и вы увидите, что код не выполняется в том порядке, в котором вы, похоже, думаете, что это так. – enhzflep

Спасибо, что указали single = out ... Я пропустил это ... Я мог бы использовать CSS, если бы я просто хотел установить изображение «thumbnail» на предопределенный размер, но я на самом деле пытаюсь масштабировать изображение и все еще поддерживайте исходное соотношение ширины и высоты, используя максимальную ширину, чтобы она не искажалась ... –

Спасибо всем ... из предложения CSS Я решил проблему, удалив весь код для определения размера изображения и вместо этого включив атрибут стиля, устанавливающий ширину до 100 и высоту в auto в код изображения HTML добавляется к редактору ... смотри ниже

 this.get_designPanel().insertHTML("<br/>Thumbnail view<br/><a href=\"" + url + "\" target=\"" + "_blank" + "\" style=\"" + "text-decoration: none;" + "\" ><img style=\"" + "width: 100px; height: auto" + "\" src=\"" + url + "\" alt=\"" + title + "\" title=\"" + title + "\" /></a><br/>Click image to view in seperate window<br/>");

источник

2016-12-11 23:53:51

Я забыл о изображениях, размер которых может быть меньше 100 пикселей ... приведенный выше код фактически увеличит изображение, которое пользователь вставляет, если он меньше 100 пикселей ...предположим, что это сработает, но я все еще ищу способ масштабировать изображение, только если оно превышает 100 пикселей :) –

Как изменить размер изображения в javascript

ответ

Смежные вопросы