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
Highlighted
De1
New Contributor
Posts: 5
Registered: ‎12-23-2012
My Device: 9860
Accepted Solution

toDataURL("image/jpeg") Producing distorted images

[ Edited ]

I am doing a app which allows the user to crop an image taken with the phone or selected from the file system using HTML5 canvas. The resulting base64 jpeg however, often has distortion, discoloration and/or pixelation on the lower portion of the picture and I don't know why.

 

I have verified the image on the canvas does not have the distortion and I have also taken the base64 string produced and pasted it in web converters to verify that it is a problem with the base64 string produced.

 

The problem does not occur for png's and I have only done this for OS6 and 7 so far.

 

Any ideas?

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

Re: toDataURL("image/jpeg") Producing distorted images

Did you find any solution for this problem?

 

I am developing for BB10, and using the canvas.toDataURL() method to adjust pixels.

The resulting image i get distorts the image as you described.

 

I am testing with a dev alpha b on 10.1

BlackBerry Development Advisor
Posts: 762
Registered: ‎10-01-2009
My Device: All
My Carrier: N/A

Re: toDataURL("image/jpeg") Producing distorted images

What is the exact OS version you are using?

 

I've done this quite a bit in my apps without problem. There was a bug (maybe ~7/8 months ago) where it was not respecting the quality param you can specify as part of the toDataURL method which was causing the quality to be pretty poor but that's been fixed quite a while ago.

 

You could try doing canvas.toDataURL("image/jpeg", 1) *** the 1 is max quality if I remember correctly).

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

Re: toDataURL("image/jpeg") Producing distorted images

Looks like I am on 10.2.0.341.
I have tried both pages and jpeg with and without the quality parameters and with no parameters and it always produces the same results.
I can post some images when I get home.

Also another problem is setting the src of a img tag to the data url causes the app to eventually crash.

I have not been able to update my dev alpha to the latest. When I try the autoloader it just keeps rebooting the device
Contributor
Posts: 33
Registered: ‎01-17-2013
My Device: BB10 Dev Alpha Sim
My Carrier: Verizon

Re: toDataURL("image/jpeg") Producing distorted images

Here is an example of what it get:

 

So first, i have the user either take a fresh picture, or choose one from their phone.

 

once i get the path to the image, i load it into a new Image();

When that image loads, i resize it so it will fit on the screen:

 

This is in the img.onload():

(can is defined as the canvas object, and img is the image object.)

 

var ratio = [600 / img.width, 600 / img.height ];
			    ratio = Math.min(ratio[0], ratio[1]);
			    var w = img.width * ratio;
			    var h = img.height * ratio;
			    
				can.width = w;
				can.height = h;
				var c = can.getContext('2d');
				c.drawImage(img,0 ,0 ,w,h);

 

So then, i use to toDataURL() method to get the base 64 and store that into an img tag.

 

This is the original image:

IMG_00000019.jpg

 

And this is what i get from the dataurl:

 

base64image.jpg

 

As you can see, its mixed up in the bottom right.

 

 

I will attempt to update my dev alpha again and see if the latest 10.2 fixes this issue.

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

Re: toDataURL("image/jpeg") Producing distorted images

After literally 50 tries to get the autoloader to connect to my dev alpha, it finallly installed.

 

And now it seems all the canvas issues are fixed, as well as sticking a bunch of base64 into the src of a img tag.

 

 

I'll just have to have 10.2 be the minimum for the update.

BlackBerry Development Advisor
Posts: 762
Registered: ‎10-01-2009
My Device: All
My Carrier: N/A

Re: toDataURL("image/jpeg") Producing distorted images

Okay glad you were finally able to get it going Smiley Happy

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

Re: toDataURL("image/jpeg") Producing distorted images

So i just updated my dev alpha to 10.2.1, and this problem is happening again.

Is there a place i can report this so it can be looked into?
BlackBerry Development Advisor
Posts: 762
Registered: ‎10-01-2009
My Device: All
My Carrier: N/A

Re: toDataURL("image/jpeg") Producing distorted images

I've been using this same method on 10.2.1 and it's working great for me. May just be related to the Dev Alpha, it's definitely not showing up on my z10, or z30.

 

What does your code look like? Are you giving the function a qulality property? toDataURL('image/jpeg', <0 - 1>) ?

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

Re: toDataURL("image/jpeg") Producing distorted images

I am using the quality to lessen the size.
So first I load the whole image to a canvas, the I use todataurl to get the base64 image. I then take that and scale the image down to a max width or height of 600.
I can post the code tonight when I get home.