Как можно изменить размер изображения до 600 пикселей в ширину с помощью JavaScript и загрузить его, если у меня есть URL-адрес изображения? - PullRequest
Новая
       32

Как можно изменить размер изображения до 600 пикселей в ширину с помощью JavaScript и загрузить его, если у меня есть URL-адрес изображения?

1 голос
/ 03 апреля 2019

Я хочу создать решение для клиентского сайта с использованием HTML, CSS и Javascript.

Мои требования:

У меня есть URL-адрес изображения.Теперь мне нужна помощь в создании решения на javascript, которое получает изображение из URL, изменяет его размер до ширины 600 пикселей (сохраняя соотношение сторон) и загружает изображение в браузер.

Можно ли это сделать?Теперь убедитесь, с чего начать с кода, и я посмотрел везде, но нет решения, которое бы на самом деле изменило ширину изображения и дало бы мне вывод.

Это то, что я пока имею, но это не то, что янужно: 

<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
</head>
<body>

<div class="imgContainer" style="width:600px; overflow:hidden; background-color: black">
    <img src="https://www.google.com/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" id="imgCat">
</div>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.11.3.min.js"></script>
<script>
    $(window).load(function() {
        var heightRate =$("#imgCat").height() / $("#imgCat").parent(".imgContainer").height();
        var widthRate = $("#imgCat").width() / $("#imgCat").parent(".imgContainer").width();

        if (window.console) {
            console.log($("#imgCat").height());
            console.log(heightRate);
            console.log(widthRate);
            console.log(heightRate > widthRate);
        }
        if (heightRate <= widthRate) {
            $("#imgCat").height($("#imgCat").parent(".imgContainer").height());
        } else {
            $("#imgCat").width($("#imgCat").parent(".imgContainer").width());
        }
    });
</script>

</body>
</html>
...