Free Trial
10 days, no credit_card

<< More Tutorials

How to create a square thumbnail from an image in Javascript using rethumb?

To create a square thumbnail 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 paramOperation = "square";
            var paramValue = 100; // Square size in pixels.
            
            var imageURL = "http://images.rethumb.com/image_coimbra_600x300.jpg";

            newImage.src = "http://api.rethumb.com/v1/" + paramOperation + "/" + paramValue + "/" + 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-to-square.html

More examples using Javascript

How to use rethumb in Javascript? How to resize an image by width in Javascript using rethumb? How to resize an image by height in Javascript using rethumb? How to resize an image by width and height in Javascript using rethumb? How to create a square thumbnail from an image in Javascript using rethumb? How to read Exif data in json format from an image in Javascript using rethumb? How to read GPS coordinates from an image in Javascript using rethumb? How to convert an image to JPG, GIF, PNG, TIF or WebP in Javascript using rethumb? How to resize an image to cover any dimensions in Javascript using rethumb?

Source code examples at GitHub