Languages

Menu
Sites
Language
Getting image thumbs in a web app

Hi there,

I have a small question: I want to make a small web app that displays thumbnails of pictures stored on my phone. I have the images name, but how can I request a thumbnail? I cannot resize the image in javascript, nor can I display the full image in my app... Is there a way Tizen OS can provide resized versions of a pictured?

Also, if I switch to a hybrid app, can I natively request Tizen OS to make thumbs for the pictures I need or I have to do this (reading all the images, creating thumbnails for each one, storing them for later use etc).

Also, there is any way to invoke a file chooser from a web app that shows these thumbnails? Or I have to go with a hybrid app?

List

Responses

2 Replies
konduri sai swathi

Hi,

Try the below code

JavaScript :

gManager = tizen.content;
var gMediaItems;

function getDirectories()
{
    function onGetDirectoriesError(err) {
		console.log( 'The following error occurred: ' +  err.name);
	}
	function onGetDirectoriesSuccess(folders)
	{
		gMediaFolders = folders;
		showFolderList("ALL");
	}

	gManager.getDirectories(onGetDirectoriesSuccess, onGetDirectoriesError);
}
var ilength=0;
function onFindSuccess(items)
{
	var l=0;
	l+=ilength;
	for (var i = 0; i < items.length; i++)
	{
		if(items[i].type=="IMAGE"){
			imagefiles[l]=items[i].title;
			imageSource[l]=items[i].contentURI;
			ilength=imagefiles.length;
			l++;

		}
	}
	localStorage['iLength']=ilength;
}

function onFindError(err)
{
	console.log("------------inside error"+err);
}
function showFolderList(storageType)
{
	var mediaType ="ALL";
	var str = '';
	for (var i = 0; i <gMediaFolders.length ; i++)
	{
		if (storageType == "ALL" || storageType == gMediaFolders[i].storageType)
		{
			gManager.find(onFindSuccess, onFindError,
					gMediaFolders[i].id,
					mediaType == "ALL" ? null : new tizen.AttributeFilter("type", "EXACTLY", mediaType),
							new tizen.SortMode("title", "ASC"));
		}

	}
}
openImageList();
function openImageList(){
	if(localStorage['iLength']==0){
		console.log("No Image Files Available");
	}
	else{
		var d='<div id="iList" class="container">';
		for(var i = 0; i < imagefiles.length; i++) {
			d+='<div class="box" id='+i+'>'
			+'<a href="#imageView_page">'
			+'<img src="'+imageSource[i]+'" class="icon_size"/>'
			+'<center><figcaption class="caption_size">'+imagefiles[i]+'</figcaption></center></a></div>';
		}
		d+='</div>';
    $("#imageList_content").append(d).trigger("create").listview( );
	}
}

CSS :

.container {
    width: 500px;
}

.box {
	width: 200px;
	text-align: center;
	float: left;
	margin-bottom: 50px;
	margin-left: -13px;
	margin-top: 20px;
}

.icon_size {
	width: 75%;
	height: 35%;
}

.caption_size {
	white-space: nowrap;
	width: 10em;
	overflow: hidden;
	font-size: 70%;
	color: black;
	text-overflow: ellipsis;
}

HTML :

<div id="imageList_content"></div>

 

Alexander AVSukhov

Hello,

You may use Content API.

For more information:

https://developer.tizen.org/help/index.jsp?topic=%2Forg.tizen.web.device.apireference%2Ftizen%2Fcontent.html