0

在这里，我正在上传图像并在文本框中提供新的宽度和高度，当我提交原始图像尺寸时必须根据新的宽度和高度进行更改并保存在同一个文件夹中。但它不起作用我该怎么做，任何人都可以帮助我请？

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Demo</title>
    <script>
        function ImageResizer() {
            var srcImg = document.getElementById("imgID").value;
            var newImg = new Image();
            newImg.src = srcImg.attr('src');
            var height = newImg.height;
            var width = newImg.width;
            var newWidth = document.getElementById("widthID").value;
            var newHeight = document.getElementById("HeightID").value;               
        }
    </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>

这是我的 demo.jsp 页面，我正在上传图片并希望使用新的高度和宽度调整上传图片的大小。

4

1 回答 1

0

那是因为srcImg包含输入的值input而不是输入本身。您正在尝试访问attr始终为undefined. 相反，只需使用

newImg.src = srcImg; // srcImg itself contains the value of input

如果您想要输入，请使用：

var srcImg = document.getElementById("imgID");

修改了你的 js 函数：

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);
}

演示：http: //jsfiddle.net/lotusgodkk/GCu2D/182/

于 2014-06-18T06:27:56.527 回答