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
New Contributor
Posts: 5
Registered: ‎01-16-2013
My Device: Dev Alpha B, Playbook
Accepted Solution

Resize Image via canvas does not work on Alpha Device

Hi,

 

I've got the following problem in my WebworksSDK based BB10-App: I want to resize a picture (jpg) which I receive as base64-encoded String. After putting it into an <img> and thereafter into a canvas I resize the picture via the canvas' context and grab the resized-base64. In Ripple it works perfectly, unfortunately the behaviour is different on my Alpha-Device: after the resize of the image a big part (1/4) of the image is black. I've spend a lot of time on this issue but still I haven't found a solution.. is this a bug or am I doing something wrong?

Can someone help me please?

 

Kind regards

Dirk

 

 

This is the code:

   [..]

                    var canvas = document.getElementById("cameraPhoto");
                    var img = new Image();
                    var ctx = canvas.getContext("2d");
                    var canvasCopy = document.createElement("canvas");
                    var copyContext = canvasCopy.getContext("2d");
                                    
                    img.onload = function()
                        {
                            var ratio = 1;
                            var ratioW = 1;
                            var ratioH = 1;
                                      

                           // maximum size of the picture should be 800x600    
                            if (img.width > 800)
                            {    
                                ratioW = 800 / img.width;
                            }
                                            
                            if (img.height > 600)
                            {
                                ratioH = 600 / img.height;
                            }
                                            
                            if (ratioW < ratioH){ratio = ratioW;}
                            else{ ratio = ratioH;}
                                            
                    
                            canvasCopy.width = img.width;
                            canvasCopy.height = img.height;
                            copyContext.drawImage(img, 0, 0);
                            canvas.width = img.width * ratio;
                            canvas.height = img.height * ratio;
                            ctx.drawImage(canvasCopy, 0, 0, canvasCopy.width, canvasCopy.height, 0, 0, canvas.width, canvas.height);
                            var baseResized = canvas.toDataURL("image/jpeg",0.9);

                                            
                        };

                        img.src=reader.result; // here comes the base64 image from a file...

BlackBerry Development Advisor
Posts: 203
Registered: ‎12-18-2012
My Device: Z10, Q10, Q5, Z30, Z3

Re: Resize Image via canvas does not work on Alpha Device

Hi,

 

What is the purpose of the canvas? Why not set height and width on the img?

 

Thanks,

Bryan

Bryan Higgins
BlackBerry WebWorks
@bryanhiggins
New Contributor
Posts: 5
Registered: ‎01-16-2013
My Device: Dev Alpha B, Playbook

Re: Resize Image via canvas does not work on Alpha Device

Hi Bryan,

 

thanks four your fast reply.

As far as I know a canvas must be used to resize / scale an image.. the purpose of the canvas is to resize the image and to get a new base64 containing the smaller image after the change. I found this BB10-sample app ( https://github.com/blackberry/BB10-WebWorks-Samples/tree/master/camera ) and there a canvas is used too..

 

Kind regards,

Dirk

New Contributor
Posts: 5
Registered: ‎01-16-2013
My Device: Dev Alpha B, Playbook

Re: Resize Image via canvas does not work on Alpha Device

Sorry, i mixed the example app up with something else.. in the example they don't use canvas - anyway, I need to change the image itself, not the size of its presentation.
New Contributor
Posts: 5
Registered: ‎01-16-2013
My Device: Dev Alpha B, Playbook

Re: Resize Image via canvas does not work on Alpha Device

Hmm.. am I the only one with this problem? In case of yes: how would you suggest to scale down an image on the fly taken by the phone's camera? I want to show thumbnails of fotos in my app - when I use <img> to show a small version of a picture the app crashs - I think this happens because the pictures are to big: in case of 10 images that would be summed up about ~10MB (10 images á ~1000kb). Therefore I think I have to scale down the images (at least an image size of 800x600 would still be good enough for my app's purpose).
Contributor
Posts: 16
Registered: ‎08-27-2011
My Device: Curve9300, PlayBook

Re: Resize Image via canvas does not work on Alpha Device

[ Edited ]

Your problem is easy:

Just replace:

    ctx.drawImage(canvasCopy, 0, 0, canvasCopy.width, canvasCopy.height, 0, 0, canvas.width, canvas.height);

by :

    ctx.drawImage(img, 0, 0);

and you are done. "img" will fit automatically into the cavas of scaled size, thus scaled by 'ratio'. This slight change will fix your issue.

 

Notes:

1) canvasCopy is useless, but it does not harm you can leave it. You have just one line to change in your code, as above.

2) your understanding of the function drawImage() seems incorrect to me. The proto is drawImage(Image,..), not drawImage(Canvas,...)

Developer
Posts: 189
Registered: ‎08-13-2008
My Device: Not Specified

Re: Resize Image via canvas does not work on Alpha Device

Hi

 

I am confused by what you are trying to do  with regards your code.

 

I put together a quick test page.

 

See if this works on the BB10.

 

<html>
  <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">
        <meta name="viewport" content="width=device-width">
        <script  type="text/javascript">
            function setUp(){
                fileUp = document.getElementById('fileInput');
                fileUp.addEventListener('change',resizeImg, false);
            }
            function resizeImg(evt) {
                try {
                    var f = evt.target.files[0];
                    var reader = new FileReader();
                    reader.onload = function(e){
                        var fileData = e.target.result;
                        //var c = document.createElement('canvas');
                        var c = document.getElementById('cameraPhoto');
                        var ctx = c.getContext("2d");
                        var imgA = new Image();
                        var fileUp = document.getElementById(evt.target.id);
                        imgA.onload = function(){
                            var cy = 0;
                            var imgHeight = imgA.height;
                            var imgWidth = imgA.width;
                            if (imgHeight > imgWidth) {
                                var ratio = imgHeight/800;
                                imgHeight = 800;
                                imgWidth = Math.round(imgWidth/ratio);
                            }
                            else if (imgWidth > imgHeight) {
                                var ratio = imgWidth/600;
                                imgHeight = Math.round(imgHeight/ratio);
                                imgWidth = 600;
                            }
                            else {
                                imgHeight = mwFileUp.imgLength;
                                imgWidth = mwFileUp.imgLength;
                            }
                            c.height = imgHeight;
                            c.width = imgWidth;
                            ctx.drawImage(imgA,0,cy,imgWidth,imgHeight);
                            var newFileData = c.toDataURL('image/jpeg');
                        }
                        imgA.src=fileData;
           
                    }
                    reader.readAsDataURL(f);               
                }
                catch (e) {
                    alert(e.message);
                }
             }
        </script>
  </head>
  <body onload="setUp()">
    <input type="file" id="fileInput">
    <br>
    Canvas:<br>
    <canvas id="cameraPhoto">
  </body>
</html>

 

 

Cheers

 

Andrew

New Contributor
Posts: 5
Registered: ‎01-16-2013
My Device: Dev Alpha B, Playbook

Re: Resize Image via canvas does not work on Alpha Device

@fmbois: Thanks for your post. You are right - I should use a img and not a canvas :-) Anyway, just replacing it did not solve the issue..

 

@abarber: Thank yu too for your post. I replaced my code with yours and now it works, you saved my day :-)  I will work on my understanding of the canvas..

 

Again, thanks a lot!