Resizing Image in Javascript Using its URL Alone - Backbone.Js

Question

Consider the following code:

if (realNodeType === 'custom') {
    let icon = '/icon/custom/' + item.get('icon') + '.png';
    let iconUrl = window.location.protocol + '//' + window.location.host + '/' + window.location.pathname.split('/')[1] + icon;
    treeNodeMap[parentLabel].get('nodes').add(new Backbone.Model({
        id: item.get('id'),
        name: item.get('name'),
        icon: iconUrl
    }));
}

icon returns the url of the image I'm looking for. The only problem is that I'm getting it in a slightly bigger dimension (21x21). What I would like to do is to resize it once I get it to (16x16). Is this possible?

I thought about adding another field success like this:

    ...
    id: item.get('id'),
    name: item.get('name'),
    icon: iconUrl,
    success: function(icon){
    //resizing goes here
    }

However, I'm unable to access the image's height and width using that method.

Can you not just use CSS to set the size of the icon? It will obviously still be 21x21 but you could just display it as 16x16 — Reinstate Monica Cellio, Oct 15 '19 at 15:05
Thanks for your time. Unfortunately, using CSS is not an option here. There's no way it can be resized using js? — Jesse James, Oct 15 '19 at 15:06
Yes, you can. It just seems overkill, but here's a link... https://stackoverflow.com/questions/19262141/resize-image-with-javascript-canvas-smoothly — Reinstate Monica Cellio, Oct 15 '19 at 15:08

Resizing Image in Javascript Using its URL Alone - Backbone.Js

0 Answers0