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: 4
Registered: ‎09-12-2011
My Device: Torch
My Carrier: Rogers

image to base64 via html5 canvas

I would like to take a picture, using the WebWorks Camera API, and then convert the image to base64 so that it can be transferred to a server. I understand that I could write a java extension for WebWorks to do this, but I would like to avoid that if possible.

It is my understanding that the HTML5 canvas has the ability to import data from an image file and export data to base64. Using this concept I have created the following WebWorks application that takes a picture and then feeds it through the HTML5 canvas to get the base64 encoding (Note that much of this code is borrowed from a variety of sources around the web).

index.hmtl:
-----------

<html>
	<head>
		<script type="text/javascript">
				function getBase64Image(img) {
					// Create an empty canvas element
					var canvas = document.createElement("canvas");
					canvas.width = img.width;
					canvas.height = img.height;

					// Copy the image contents to the canvas
					var ctx = canvas.getContext("2d");
					ctx.drawImage(img, 0, 0, img.width, img.height);

					// Get the data-URL formatted image
					var dataURL = canvas.toDataURL("image/jpeg");

					return dataURL.replace("data:image/jpeg;base64,", "");
				}
				function dobase64(img)
				{
				    //Now convert image to base64 and display
					var img_base64 = new Image();
					img_base64.src="data:image/jpg;base64," + getBase64Image(img);
					document.getElementById("image").appendChild(img_base64);
				}
				function setImage (path)
				{
					//Create the Image object from the picture that was just taken
					var img = new Image();
					img.src="file://" + path;
					img.width=Math.round(150);
					img.height=Math.round(150);
					img.onLoad = dobase64(img);
				}
				function onCameraClosed() {}
				function onError() {}
				function takePicture()
				{
		   			var result = blackberry.media.camera.takePicture(setImage, onCameraClosed, onError);
				}
		</script>
	</head>
	<body>
			<div id="image">
				<button onclick="takePicture()">Take Picture</button>
			</div>
	</body>
</html>

 


config.xml:
-----------

<?xml version="1.0" encoding="utf-8"?>
<widget xmlns=" http://www.w3.org/ns/widgets"
        xmlns:rim="http://www.blackberry.com/ns/widgets"
        version="2.0"
        rim:header="RIM-Widget: rim/widget">
		
	<name>base64</name>
	<description>base64</description>
	<author>tszepesi</author>

	<access subdomains="true" uri="file:///"/>

	<feature id="blackberry.media.camera" required="true" />
	<feature id="blackberry.io.file" required="true" />

	<rim:loadingScreen backgroundColor="#808080" />
 	<rim:cache disableAllCache="true" />

	<content src="index.html"/>
</widget>

 

Unfortunatly, this does not work.

 

However, I have also tried replacing the takePicture() function with the following:


function staticPicture()
{
//Create the Image object from a packaged image
var img = new Image();
img.src="test-image.jpg";
img.width=Math.round(150);
img.height=Math.round(150);
img.onLoad = dobase64(img);
}

In this case test-image.jpg is local to the html file. For my tests I used an image that I had previously taken using my blackberry. Using the new staticPicture() function the application still does not work, but if I run the code in the browser (ie host the html and image on an external web server) it does work.

 

It is my understanding that both the original version of this application and the modified version (using a static image) should work as stand-alone WebWorks applications. Any ideas why it does not?

Developer
Posts: 163
Registered: ‎05-06-2011
My Device: Playbook
My Carrier: Not Specified

Re: image to base64 via html5 canvas

For takePicture API the setImage returns the filepath. So i suppose only the following is required in your setImage function.

 

img.src=path;



Regular Contributor
Posts: 63
Registered: ‎06-08-2012
My Device: BlackBerry
My Carrier: BlackBerry

Re: image to base64 via html5 canvas

Hi tszepesi,

I have the same problem as you!

Do you solve this problem?
Could you help me please!

I am waiting for your response soon!

An Pham