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
The_Anomaly
Posts: 322
Registered: ‎08-06-2012
My Device: Dev Alpha / Playbook / Curve 9300
Accepted Solution

Image editing on playbook

Was wondering how to save an image after being edited.

 

I have coded an app that takes a photo then displays it for editing purposes.  The user has various controls that can be used to apply different effects.  Problem is this:  The image is smaller as it is on screen surrounded by controls.  I'm using a canvas element which I then can use to save.

 

How would I apply the effects to the image in its original size?  I thought of maybe creating a new screen (I'm using bbui) and passing parameters to it to apply the effects, then force saving it...  Is there another approach?

If it helped you, click like. :smileyhappy:
Please use plain text.
BlackBerry Development Advisor
chadtatro
Posts: 614
Registered: ‎10-01-2009
My Device: Z10
My Carrier: Bell

Re: Image editing on playbook

[ Edited ]
You can grab your canvas pixel data as a base64 string, then pass that string to the html5 file API to save it. I'm hoping to have a full example of this posted in the somewhat near future. To get b64 from your canvas, you'd use this command, after you do the canvas ctx.drawImage...
var b64 = canvas.toDataURL("image/jpeg", 1);
Chad Tetreault | App Development Consultant | BlackBerry Developer Relations | developer.blackberry.com | @chadtatro
Please use plain text.
Developer
The_Anomaly
Posts: 322
Registered: ‎08-06-2012
My Device: Dev Alpha / Playbook / Curve 9300

Re: Image editing on playbook

Tx for the reply BUT, will that save the image at its original size if I am editing it in a canvas element half the screen size OR will it save the image at the half size that its currently at on screen.

 

Will try your code later today, need to finish coding some effects first.  Just wondering if this has been done before.

If it helped you, click like. :smileyhappy:
Please use plain text.
BlackBerry Development Advisor
chadtatro
Posts: 614
Registered: ‎10-01-2009
My Device: Z10
My Carrier: Bell

Re: Image editing on playbook

I believe when you do your drawImage() you specify the width/height.  It'll be based upon that.

Chad Tetreault | App Development Consultant | BlackBerry Developer Relations | developer.blackberry.com | @chadtatro
Please use plain text.
Developer
The_Anomaly
Posts: 322
Registered: ‎08-06-2012
My Device: Dev Alpha / Playbook / Curve 9300

Re: Image editing on playbook

Any chance someone has some code for this?

 

I am using camanjs (http://www.camanjs.com) to do some effects on the image before saving and was wondering how this would work.

 

The code they supply is:

 

Caman('img/example.jpg', '#image-caman', function () {
  this.saturation(-20);
  this.brightness(10);
  
  this.render(function () {
    this.save('png'); 

/* shows a download file prompt. Tried this didn't get a prompt but the web inspector on the device EVENTUALLY dumps some data of image type but no prompt... :( */ // or... this.toBase64();

/* base64 data URL representation of the image. useful if you want to upload the modified image. Tried this it didn't work! */
}); });

 

 

If it helped you, click like. :smileyhappy:
Please use plain text.
Developer
The_Anomaly
Posts: 322
Registered: ‎08-06-2012
My Device: Dev Alpha / Playbook / Curve 9300

Re: Image editing on playbook

Web inspector sample:

 

Resource interpreted as Document but transferred with MIME type image/octet-stream: "data:image/octet-stream;base64,iVBORw0KGgoAAAANSUhEUgAAAt4AAAHqCAYAAAAzl0l5AAAgAElEQVR4XqS9WYyk2XXndyMyIzMj97X2vbq6m93NJptLc9VQNKnNkmyJ0kij0QgcAbIAGTAMjB9sYwZ+8gAGDBh+8ovtJwOGARuaGWBs2RpIooakuFNcutl77UtW7mtk5Br+/c79bvbXySJHI0UhKiK/+Ja7nHvO/6y38d//F/9Rb3p6Km1tb6Tl5aW0uLycJo76U2NpJTUHW2lydCKtbe+kU6fm0traWuo1+lKz2Up7h720t7eTet291Gy1U3ucvzcO0uhgX+pr7KaJiYnU29hMKR2m/jSUxsaHUuPgIO3u96fe/m4aHh1ID1aW0/BAKw0OTaat/ZS+/sMfpStXL6dTw2NpujWa1ja7PHs3fb+5ktYbzTTaGE4HA31pc3cnPTPRThcHBlPv8CA1Bxqpv9VK2wfj6fWHC2m7...

If it helped you, click like. :smileyhappy:
Please use plain text.
Developer
The_Anomaly
Posts: 322
Registered: ‎08-06-2012
My Device: Dev Alpha / Playbook / Curve 9300

Re: Image editing on playbook

Solved it using this thread.  You need to edit a webworks AIR file in order to accomplish it.

http://supportforums.blackberry.com/t5/Web-and-WebWorks-Development/stringToblog-save-image-problem/...

 

Tx to  for pointing me to this thread.

If it helped you, click like. :smileyhappy:
Please use plain text.