Free Trial
10 days, no credit_card

<< More Tutorials

How to resize an image by width and height in Javascript using rethumb?

To resize an image or photo in Javascript use the following code:

<html>
    <head>
        <script language = "JavaScript">
        window.onload = function()
        {
            var newImage = new Image;
            newImage.onload = function() {
                var imgElement = document.getElementById("img1");
                imgElement.src = this.src;
            }

            var paramOperation1 = "height";
            var paramValue1 = 100; // New height in pixels.

            var paramOperation2 = "width";
            var paramValue2 = 100; // New width in pixels.

            var imageURL = "http://images.rethumb.com/image_coimbra_600x300.jpg";

            newImage.src = "http://api.rethumb.com/v1/" + paramOperation1 + "/" + paramValue1 + "/" + paramOperation2 + "/" + paramValue2 + "/" + imageURL;
        }
        </script>
    </head>

    <body>
        <img id="img1">
    </body>
</html>

Start using this example now

Use the following commands to get started:

$ git clone https://github.com/rethumb/rethumb-javascript-examples.git
$ cd rethumb-javascript-examples
$ open resize-by-width-and-height.html

More examples using Javascript