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
Regular Contributor
MMC
Posts: 50
Registered: ‎02-14-2011
My Device: Not Specified

Displaying thumbnail of last taken picture?

My app is a form that has a function in it for the user to take a picture. After they take the picture, I want them to be able to go back to the form where they'll see a thumbnail of the picture they just took. I tried the code below(found on a javascript code site). It shows a placeholder image, and only has a function for browsing to an image directory(whereas I want mine to automatically find the last taken picture). When I browse to an image, it doesn't display a thumbnail of the image, it just shows the file path. Any idea of what i'm doing wrong? I'm thinking I have to maybe use blackberry.io.readFile or blackberry.io.open.


<!-- TWO STEPS TO INSTALL IMAGE UPLOAD PREVIEW:
  1.  Copy the coding into the HEAD of your HTML document  2.  Add the last code into the BODY of your HTML document  -->
<!-- STEP ONE: Paste this code into the HEAD of your HTML document  -->
<HEAD>
<script type="text/javascript"><!-- Begin
/***** CUSTOMIZE THESE VARIABLES *****/
  // width to resize large images tovar maxWidth=100;  // height to resize large images tovar maxHeight=100;  // valid file typesvar fileTypes=["bmp","gif","png","jpg","jpeg"];  // the id of the preview image tagvar outImage="previewField";  // what to display when the image is not validvar defaultPic="spacer.gif";
/***** DO NOT EDIT BELOW *****/
function preview(what){  var source=what.value;  var ext=source.substring(source.lastIndexOf(".")+1,source.length).toLowerCase();  for (var i=0; i<fileTypes.length; i++) if (fileTypes[i]==ext) break;  globalPic=new Image();  if (i<fileTypes.length) globalPic.src=source;  else {    globalPic.src=defaultPic;    alert("THAT IS NOT A VALID IMAGE\nPlease load an image with an extension of one of the following:\n\n"+fileTypes.join(", "));  }  setTimeout("applyChanges()",200);}var globalPic;function applyChanges(){  var field=document.getElementById(outImage);  var x=parseInt(globalPic.width);  var y=parseInt(globalPic.height);  if (x>maxWidth) {    y*=maxWidth/x;    x=maxWidth;  }  if (y>maxHeight) {    x*=maxHeight/y;    y=maxHeight;  }  field.style.display=(x<1 || y<1)?"none":"";  field.src=globalPic.src;  field.width=x;  field.height=y;}// End --></script></HEAD>
<!-- STEP TWO: Copy this code into the BODY of your HTML document  -->
<BODY>
<div align="center" style="line-height: 1.9em;">Test it by locating a valid file on your hard drive:<br><input type="file" id="picField" onchange="preview(this)"><br><img alt="Graphic will preview here" id="previewField" src="spacer.gif"><br> 

Please use plain text.
Developer
praveen_rajan
Posts: 163
Registered: ‎05-06-2011
My Device: Playbook
My Carrier: Not Specified

Re: Displaying thumbnail of last taken picture?

To display images last taken using Camera camera API can be used like below described.

 

<html>
<head>
 <title>Preview Image</title>
</head>
<body>
 <input type="button" onclick="takePicture();" value="Capture" />
<img id="previewImage" src="spacer.gif" width="200" height="200" />
</body> </html>

 Your JavaScript function will be like this.

 

function takeVideo() {
  try {
    blackberry.media.camera.takeVideo(successCB, closedCB, errorCB);
  } catch(e) {
    alert("Error in supported: " + e);
  }
}

function successCB(filePath) {
document.getElementById('previewImage').src=filePath; }

This will showup the image with width and height set to 200px. Inorder to do scaling Canvas of HTML5 can be used.

 

 

Please use plain text.
Regular Contributor
MMC
Posts: 50
Registered: ‎02-14-2011
My Device: Not Specified

Re: Displaying thumbnail of last taken picture?

Hi Praveen,

      thank you for taking the time to answer my question.

 

I made the changes as you suggested but I still don't see a thumbnail displayed. My form first opens up with the spacer image(mine is showing up as broken since I didn't include the spacer.gif file). When I take a picture, I have to navigate backwards in the application until I get back to the form. The same broken spacer image is still displayed. Do you have any idea what I might be doing wrong?

 

Thanks

Please use plain text.
Developer
praveen_rajan
Posts: 163
Registered: ‎05-06-2011
My Device: Playbook
My Carrier: Not Specified

Re: Displaying thumbnail of last taken picture?

If after taking a snapshot your page redirects to another page, then when you navigate back to the form, you will have to load the image on body onload function. But the file path should also be passed back to the original form. You could keep the file path in sessionStorage.

 

<body onload="loadImage();">
</body>

 

Please use plain text.
Regular Contributor
MMC
Posts: 50
Registered: ‎02-14-2011
My Device: Not Specified

Re: Displaying thumbnail of last taken picture?

Hi Praveen,

      I discovered that the majority of the users who will be using my app are on OS 4. It's my understanding that this version doesn't support HTML5/sessionStorage. Would it be possible to save the filepath in a cookie or is there a more appropriate alternative?

Please use plain text.
Developer
praveen_rajan
Posts: 163
Registered: ‎05-06-2011
My Device: Playbook
My Carrier: Not Specified

Re: Displaying thumbnail of last taken picture?

You could pass the file path in the URL back to your original page(unless you are not using window.history.back functionality).

 

function getUrlParameters(name){

	name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
	var regexS = "[\\?&]"+name+"=([^&#]*)";
	var regex = new RegExp( regexS );
	var results = regex.exec( window.location.href );
	if( results == null )
		return "";
	else
		return results[1];
}

For example: if your url is like /snapshot.html?filePath=file_name in your snapshot page you could call getUrlParameters("filePath");


Please use plain text.