05-01-2013 12:34 PM - edited 05-01-2013 02:53 PM
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.
Solved! Go to Solution.
10-21-2013 07:10 PM
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
10-23-2013 09:15 AM
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).
10-23-2013 12:33 PM
10-23-2013 06:37 PM
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, ratio); 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:
And this is what i get from the dataurl:
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.
10-24-2013 08:23 PM
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.
11-18-2013 08:55 AM
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>) ?
11-18-2013 12:10 PM