1

I am looking to create a client site solution using HTML, CSS and Javascript.

My requirements are:

I have the image URL. Now, I need help in creating a solution in javascript that gets the image from URL, resize it to 600px width (while keeping the aspect ratio) and downloads the image in the browser.

Can I do that? Now sure where to start with the code and I have looked everywhere but there is no solution that actually resize the image width and gives me the output.

This is what I have so far but it is not doing what I need:

<!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>
kuml
  • 231
  • 5
  • 15
  • "downloads the image in the browser" - means what? User saves it? Do you mean to actually to alter the file? – epascarello Apr 03 '19 at 12:53
  • Basic idea with a file input: https://stackoverflow.com/questions/23945494/use-html5-to-resize-an-image-before-upload and uploading – epascarello Apr 03 '19 at 12:56
  • By "downloads the image in the browser" I mean when we download something on the browner and it gets saved in "My Downloads" or whatever location. Basically, I am looking for a JS solution that gets image from the URL, resize it and triggers the resized file after altering it. So, I end up with an image of 600px wide on my local machine. – kuml Apr 03 '19 at 13:29

0 Answers0