How do you resize an image in javascript

Question

I have a HTML editor that inserts items from predefined buttons using javascript and would like add a button to be able to post a thumbnail of a downloaded image with a link to view it full size. I have created the following code but it doesn't work and always inserts a 100X100 size image. Can anyone suggest a better way that does work?

    // insert HTML code
insertHtml: function (url, title) {
    var imgHeight;
    var imgWidth;
    function setHTMLImageSize() {
        imgHeight = this.height;
        imgWidth = this.width;
        var ImageRatio = (imgHeight / imgWidth);
        if (imgWidth > 100) {
            imgWidth = 100;
            imgHeight = (imgWidth * ImageRatio);
        }
        return true;
    }
    var myImage = new Image();
    myImage.name = url;
    myImage.onload = setHTMLImageSize;
    myImage.src = url;
    if (imgWidth = 0) {
        imgWidth = 100;
    }
    if (imgHeight = 0) {
        imgHeight = 100;
    }
    this.get_designPanel().insertHTML("<a href=\"" + url + "\" target=\"" + "_blank" + "\" style=\"" + "text-decoration: none" + "\" ><img src=\"" + url + "\" title=\"" + title + "\" width=\"" + imgWidth + "\" height=\"" + imgHeight + "\" /></a><br/>click image to View full size<br/>");
}

AndFisher · Accepted Answer · 2016-12-11 16:59:50Z

1

You are setting width and height to 100 before the onload function has fired. The onload will happen asynchronously so you should do a check for zero height or width inside the callback.

Edit:- As observed by enhzflep in the comment below you have also used equal as assignment rather than to check conditions. I'd change them to triple equals === as a rule when you know the type you are expecting.

Is it not going to be simpler to control a thumbnail through CSS anyway? You could set max-height and max-width properties to maintain aspect ratio.

edited Dec 11, 2016 at 16:59

answered Dec 11, 2016 at 10:15

AndFisher

6431 gold badge5 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

David DIlley Over a year ago

Done with the OnLoad event SetHTMLImageSize call

enhzflep Over a year ago

@DavidDIlley - Yes, kindof. That call affects the image in your code known as myImage. This call to SetHTMLImageSize alters the values that imgWidth and imgHeight. Unfortunately, these are used before they're given a value. The run through the code sees them both holding nothing (not zero, but nothing - i.e undefined) Furthermore, in the call where you check to see if they're zero, you've mistakenly used = (set to) rather than == (is equal to). Add some calls to console.log and you'll see that the code doesn't execute in the order you appear to think it does.

David DIlley Over a year ago

Thanks you for pointing the single = out ... I missed that ... I could use a CSS if I just wanted to set the "thumbnail" image to a predefined size but I am actually trying to scale the image and still maintain the original width to height ratio using a maximum width so it is not distorted ...

David DIlley Over a year ago

From what you said it appears since the call to set the height and width variables is asynchronous there is no way to load an image, get the actual width and height values, and then insert HTML with a ratio of real image's width and height size variables in javascript. Since the image must fit in a window that is only 200px wide at this point I guess I will have to set it to a predefined size that fits and not worry about it being distorted ... I guess users can click on the 100X100 "thumbnail" image in the small windows to see it it in a separate window with it's actual ratio dimensions.

David DIlley Over a year ago

Excuse me ... I missed the part about setting the CSS to maintain aspect ratio ... I am not familiar with that process ... would that be like the following: .resizewithratio { width: 100px; height: auto; }

|

David DIlley · Accepted Answer · 2016-12-11 23:53:51Z

0

Thanks to everyone ... from the CSS suggestion I have resolved the issue by removing all the code to determine the image size and instead including a style attribute setting the width to 100 and the height to auto into the HTML image code being added to the editor ... see below

        this.get_designPanel().insertHTML("<br/>Thumbnail view<br/><a href=\"" + url + "\" target=\"" + "_blank" + "\" style=\"" + "text-decoration: none;" + "\" ><img style=\"" + "width: 100px; height: auto" + "\" src=\"" + url + "\" alt=\"" + title + "\" title=\"" + title + "\" /></a><br/>Click image to view in seperate window<br/>");

answered Dec 11, 2016 at 23:53

David DIlley

3110 bronze badges

1 Comment

David DIlley Over a year ago

I forgot about images that might be under 100 pixels wide ... the above code will actually enlarge an image the user inserts if it is under 100 pixels wide ... guess this will work for now but I am still looking for a way to scale the image only if it is over 100 pixels wide :)

Collectives™ on Stack Overflow

How do you resize an image in javascript

2 Answers 2

6 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related