Welcome!

Welcome to the official BlackBerry Support Community Forums.

This is your resource to discuss support topics with your peers, and learn from each other.

inside custom component

Web and WebWorks Development

Reply
Developer
Posts: 33
Registered: ‎10-29-2013
My Device: BB10
My Carrier: TMO

Image from the file system dimensions

Hi

 

I want to put the image from the file system to canvas in the application.

 

var canvas=document.getElementById("canvas"); // grabs the canvas element
    var ctx=canvas.getContext("2d"); // returns the 2d context object
    var canvas = document.getElementById('canvas');
    var context = canvas.getContext('2d');
    var imageObj = new Image();
    imageObj.onload = function() {
        context.drawImage(imageObj, 0, 0,720,670);
      };
      imageObj.src=imagePath;

 this works but the image i use (camera photos) are not scaled to fit the canvas size. I could scale them if i knew the width and height of the image i open. Is there any way to find this out?

Contributor
Posts: 33
Registered: ‎01-17-2013
My Device: BB10 Dev Alpha Sim
My Carrier: Verizon

Re: Image from the file system dimensions

Just check imageObj.width and .height in the onload function
Developer
Posts: 33
Registered: ‎10-29-2013
My Device: BB10
My Carrier: TMO

Re: Image from the file system dimensions

Unfortunately this does not work when you use existing file from the file system and not upload it. Width and height are always 0
Contributor
Posts: 33
Registered: ‎01-17-2013
My Device: BB10 Dev Alpha Sim
My Carrier: Verizon

Re: Image from the file system dimensions

Hmmm, I'll post code I have when I get home.
In my project it is working just fine with a file from the file system
Contributor
Posts: 33
Registered: ‎01-17-2013
My Device: BB10 Dev Alpha Sim
My Carrier: Verizon

Re: Image from the file system dimensions

Here is the code I am using:

 

var details = {
		          mode: blackberry.invoke.card.FILEPICKER_MODE_PICKER,
		          type: [blackberry.invoke.card.FILEPICKER_TYPE_PICTURE]
		      };
			  blackberry.invoke.card.invokeFilePicker(
			  	details,
			  	enyo.bind(this,this.loadImage),
		        function (reason) {
		        },
		        function (error) {
		            
		        }
	      	  );

 And the loadImage function:

 

c.img = new Image();
			c.img.onload = enyo.bind(this, function() {
				
					var can = this.$.canvasOrig.hasNode();
					if (can) {
						var ratio = [700 / c.img.width, 700 / c.img.height ];
					    ratio = Math.min(ratio[0], ratio[1]);
					    var w = c.img.width * ratio;
					    var h = c.img.height * ratio;
					    
						can.width = w;
						can.height = h;
						var c = can.getContext('2d');

						c.drawImage(c.img,0 ,0 ,w,h);
						this.photos[this.photos.length-1].origsrc=can.toDataURL("image/jpeg", 0.85);
						this.photos[this.photos.length-1].src=this.photos[this.photos.length-1].origSrc;
						
						this.$.cropPic.setSrc(this.photos[this.photos.length-1].origSrc);
						
						
					}
				
					
					this.$.cropPic.setSrc(this.photos[this.photos.length-1].origSrc);
					
					
				}
			});
			this.photos.push(c);
			this.photos[this.photos.length-1].img.src=c.origSrc

 

And i get the width and height no problem.

 

How are you getting the image path?

Developer
Posts: 33
Registered: ‎10-29-2013
My Device: BB10
My Carrier: TMO

Re: Image from the file system dimensions

Thanks. Actually my mistake was that i tried accessing image width and height property before onload callback :smileyhappy: