Dynamic image size from gui asset

[cptainmtt]

Is it possible to dynamically resize an image loaded from the assets folder?

I tried by creating an image object but get 403 forbidden errors.

var img = new Image();

img.src = "buttons/" + icon + "_up.png";

console.log("img.src = " + img.src);

img.onload = function() {

console.log("image width = " + this.width + " , height = " + this.height);

xpos = (150 - this.width) / 2;

CF.setJoin("s1", this.src);

CF.setProperties({join: "s1", opacity: 1.0, x: xpos, w: this.width, h: this.height}, 0, 1, CF.AnimationCurveLinear);

};

Cheers,

Matt

[vmailtk5]

I was told no but for images hosted elsewhere

--
You received this message because you are subscribed to the Google Groups "CommandFusion Software" group.
To unsubscribe from this group and stop receiving emails from it, send an email to commandfusio...@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Jarrod Bell]

I have packaged up a proof of concept by Arnault Raes (see credits on the following link):
https://github.com/CommandFusion/DemoUserInterfaces/tree/master/ImageResize

See the readme and the guiDesigner project for how this works.

It's quite amazing what you can do with JavaScript and a little out of the box thinking!

Regards,

Jarrod Bell
CommandFusion
www.commandfusion.com

[cptainmtt]

Thanks for the providing that script Jarrod. Managed to find exactly what I was looking for in there with the btoa() function so I can adjust the image size and position dynamically from cached files. Works a treat!

var url = "buttons/" + icon + "_up.png";

CF.loadAsset(url, CF.BINARY, function(body) {

// update image size and location

var img = new Image();

img.onload = function() {

// center image to 150 x 150px area

xpos = (150 - this.width) / 2;

ypos = (150 - this.height) / 2;

var j = "s"+joins.menus.home;

CF.setJoin(j, url);

CF.setProperties({join: j, x: xpos, y: ypos, w: this.width, h: this.height}, 0, 0, CF.AnimationCurveLinear);

};

img.src = "data:image/png;base64,"+btoa(body);

});

Cheers,

Matt