Блог

Главная - Вопросы по программированию - Ошибка при изменении размера изображения (srcImg.attr) не является функцией?

Ошибка при изменении размера изображения (srcImg.attr) не является функцией?

#javascript #image #jsp #upload #resize-image

#javascript #изображение #jsp #загрузка #изменение размера-изображение

Вопрос:

Здесь я загружаю изображение, и в текстовых полях, указывающих новую ширину и высоту, когда я отправляю исходный размер изображения, должен изменяться в соответствии с новой шириной и высотой и сохраняться в той же папке.Но это не работает, как я могу это сделать, кто-нибудь, помогите мне, пожалуйста?

 <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, на которой я загружаю изображение и хочу изменить размер загруженного изображения с новой высотой и шириной.

Ответ №1:

Это потому 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 /