Работа с изображением с помощью javascript [требует правки]

225

08 февраля 2018, 18:34

На экране задано изображение. Написать сценарий, позволяющий изменять размеры рисунка, его границу (данные вводятся пользователем).

Answer 1

Предполагаю что вы имели ввиду это. Если вы имели ввиду обрезать картинку, есть хороший урок

var width = document.getElementById("width"); 
var height = document.getElementById("height"); 
var image = document.getElementById("image"); 
 
width.oninput = function() { 
  var value = parseInt(width.value); 
  if (typeof(value) == 'number') { 
    image.style.width = value + "px"; 
  } 
}; 
height.oninput = function() { 
  var value = parseInt(height.value); 
  if (typeof(value) == 'number') { 
    image.style.height = value + "px"; 
  } 
};

<div> 
  <input type="text" id="width" placeholder="width" /> 
  <input type="text" id="height" placeholder="height" /> 
</div> 
<div> 
  <img id="image" style="width: 100px; height: 100px;" src="http://wac.2f9ad.chicdn.net/802F9AD/u/joyent.wme/public/wme/assets/ec050984-7b81-11e6-96e0-8905cd656caf.jpg?v=54" /> 
</div>