Question

我希望使用HTML，CSS和Javascript创建客户端站点解决方案。

我的要求是：

我有图像URL。现在，我需要帮助以javascript创建一个解决方案，该解决方案可以从URL获取图像，将其调整为600px的宽度（同时保持宽高比），并在浏览器中下载图像。

我可以这样做吗？现在确定从哪里开始代码，我到处都看过了，但是没有解决方案可以实际调整图像宽度并为我提供输出。

这是我到目前为止所拥有的，但是没有满足我的需要：

<!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>

如果我有图片网址，如何通过javascript将图片调整为600像素的宽度并下载？

0 个答案: