How to change bitmap width and height in easeljs?

Question

I am using easeljs to create HTML5 page. I have to load the images in canvas. How to change the width and height of the bitmap i am loading.

var img = new Image();  
img.src = image_path+images; // image from folder        
var loading_img = new createjs.Bitmap(img);  
stage.addChild(loading_img);

It just display the image in canvas, I try to use the

loading_img.sourceRect = { x:img.width/2, y:img.height/2, width:280, height:150 };

but it crop the image(280*150).

Thanks, Sathya

score 10 · Accepted Answer · answered Feb 11 '13 at 15:46

10

Instead of adjusting the width and height, you would adjust scaleX and scaleY. To double the size of the image, you would do this:

loading_img.scaleX=2.0;
loading_img.scaleY=2.0;

answered Feb 11 '13 at 15:46

markE

102,905
11
164
176

Ya it zoom the image by 2x. but my need is to convert the bitmap width and height to 280*150 not to zoom it. The actual size is somewhat 800*600. Like that i have 5 images with various width and height – sathya Feb 12 '13 at 06:41
Going from 800x600 to 280x150 you have multiple operations you can do: scale&crop, just crop, just scale(stretch) - I'm guessing you want to scale&crop, for that you would have to apply a mask and use scaleX/scaleY like markE already mentioned – olsn Feb 12 '13 at 08:52
1

Scaling can "zoom" an image ... Scaling can ALSO "shrink" an image ... In your case, you want to shrink your image from 800x600 to 280x150 ... To do that, you can use these scale values to "shrink" your image: loading_img.scaleX=280/800 and loading_img.scaleY=150/600; ... Your image will shrink and will not be cropped ... Your image will be distorted a bit since you are not scaling proportionatly. – markE Feb 12 '13 at 09:18
it works but it looks ugly when i move the image around by changing the regX and regY – madprops Jul 14 '15 at 22:49
any idea on how to scale the image proportionally ?? – Niranth Reddy Oct 11 '19 at 09:54

score 3 · Answer 2 · answered Aug 29 '16 at 14:24

You have to first load the image (so you can know it's height and width), and than create the bitmap and set the scale.

var image = new Image();
image.onload = function(){
    var bitmap = new createjs.Bitmap(image);
    bitmap.scaleX = YOUR_WIDTH/image.width;
    bitmap.scaleY = YOUR_HEIGHT/image.height;
    this.stage.addChild(bitmap);
};
image.src = 'thePathToYourImage.png';

score 1 · Answer 3 · answered Feb 26 '13 at 12:04

This works good for me

img[h] = new Image();
img[h].src = //image path
r_mc[h] = new createjs.Bitmap(img[h]);
r_mc[h].y = 15;
r_mc[h].x = 10
r_mc[h].scaleX=280/r_mc[h].image.width;  //200
r_mc[h].scaleY=140/r_mc[h].image.height; //100
stage.addChild(r_mc[h]);

if r_mc[h].image.width and r_mc[h].image.height did't affect your image size means try to get the image sizes prior to this and set like that

r_mc[h].scaleX=280/200;
r_mc[h].scaleY=140/100;

Thanks,
Sathya

score 0 · Answer 4 · answered Nov 11 '17 at 10:23

0

Yes, scaleX/Y functions work pretty well for image resizing.

Ol Ata

answered Nov 11 '17 at 10:23

olav

1
1

score 0 · Answer 5 · answered Oct 12 '19 at 12:21

0

I usually do it like this:

var bitmap = new createjs.Bitmap(image object);
bitmap.scaleX = (your width number value) / bitmap.image.width;    
bitmap.scaleY = (your height number value) / bitmap.image.height;
stage.addChild(bitmap);

answered Oct 12 '19 at 12:21

Paul Iştoan

61
1
4

How to change bitmap width and height in easeljs?

5 Answers5