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
New Contributor
Posts: 5
Registered: ‎05-17-2013
My Device: Blackberry Bold 9900
My Carrier: MTN
Accepted Solution

Image resize with HTML5 Canvas - Distortion

Hi all

 

I'm working on a Webworks app where I need to resize an image for upload to a server. I'm using JQuery Mobile, the app needs to run on OS6 and up. The user can either use the camera or select an image off the device. The relevant code is as follows:

 

function handleOpenedFile(fullPath, blobData) {
                var image = new Image();
                image.src=fullPath; //path to image
                image.onload = function () {
                    var resized = resizeMe(image); // send it to canvas
                    //Do stuff with the DataURL returned from resizeMe()
                };
        }

function resizeMe(img) {

            var canvas = document.createElement('canvas');
            var width = Math.round(img.width / 2);
            var height = Math.round(img.height / 2);
            canvas.width = width;
            canvas.height = height;
            var ctx = canvas.getContext("2d");
            ctx.drawImage(img, 0, 0, width, height);
            return canvas.toDataURL("image/jpeg", 0.8);
        }

 I then use the Base64 in the DataURL for uploading to the server. The images get scaled but they come out garbled. Parts of the image are shifted around and colours come out strange. It's not the scaling per se that messes up the image as it comes out garbled if you draw it on the canvas without any scaling.

 

Does anyone have any idea how to fix this or have an alternative suggestion for resizing an image for upload?

New Contributor
Posts: 5
Registered: ‎05-17-2013
My Device: Blackberry Bold 9900
My Carrier: MTN

Re: Image resize with HTML5 Canvas - Distortion

I've managed to solve the resizing issue for anyone who is also running into this. Replacing

return canvas.toDataURL("image/jpeg", 0.8);

 with

return canvas.toDataURL();

 solved the issue with the strange visual artifacts. This returns a nicely resized image without any weirdness.

Retired
Posts: 1,382
Registered: ‎07-02-2009
My Device: BlackBerry Bold 9900
My Carrier: Bell

Re: Image resize with HTML5 Canvas - Distortion

Thanks for posting your solution.  Glad you were able to resolve the issue.

Follow me on Twitter: @n_adam_stanley
-------------------------------------------------------------------------------------------------------------------------
Your app doesn't work? Use BlackBerry remote web inspector to find out why.
New Contributor
Posts: 4
Registered: ‎02-19-2014
My Device: Onyx
My Carrier: Pay Per Cloud

Re: Image resize with HTML5 Canvas - Distortion


Iyashu wrote:

I've managed to solve the resizing issue for anyone who is also running into this. Replacing

return canvas.toDataURL("image/jpeg", 0.8);

 with

return canvas.toDataURL();

 solved the issue with the strange visual artifacts. This returns a nicely resized image without any weirdness.


I am really appreciate your post. It do help with my image problem. Thanks!