This is my demo.jsp page where i have two fields to give new height and width to change the uploaded image size with new one.could anybody tell me how to do this?
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>ImageSizeModification</title>
<script>
function ImageResizer() {
console.log('called');
var srcImg = document.getElementById("imgID").value;
var newImg = new Image();
newImg.src = srcImg;
var height = newImg.height;
var width = newImg.width;
var newWidth = document.getElementById("widthID").value;
var newHeight = document.getElementById("HeightID").value;
console.log(newImg, srcImg, newWidth, newHeight, height, width);
}
</script>
</head>
<body>
<%
out.println("<table>");
out.println("<tr><td><input type='file' id='imgID'></td></tr>");
out.println("<tr><td>Enter new Width:</td><td><input type='text' id='widthID'></td></tr>");
out.println("<tr><td>Enter new Height:</td><td><input type='text' id='HeightID'></td></tr>");
out.println("<tr><td><input type='button' value='Submit' onclick='ImageResizer()'></td></tr>");
out.println("</table>");
%>
</body>