How to save the image in the mobile gallery from application

By mohit kumar

29 Jul 2015 09:11 English 14 Replies

Hi,

I have develop an application in which i have an image and i want my image to save in the mobile gallery.I have retrieved images from gallery to application.Now i want to save image from application to mobile gallery.

please help me

thanks and regards

Mohit Kumar

Responses

10 Replies

pius lee

30 Jul 2015 09:27

I make some snippet for this question.

https://developer.tizen.org/ko/community/code-snippet/web-code-snippet/save-canvas-image-file-system-and-copy-file-other-place.

In this snippet, you can save canvas to file system on the fly and copy a file to other place.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
</head>

<body>
<!-- drawing canvas for filtering image -->
<canvas id="filtercanvas" width="250" height="333"></canvas>
<hr>
<button id="savbtn">Save to Local</button>
<button id="cpybtn">Copy Original to Local</button>

<script>
function grayscale(img) {
    var canvas = document.getElementById("filtercanvas");
	var ctx = canvas.getContext('2d');
	ctx.drawImage(img, 0, 0);
	var img_data = ctx.getImageData(0, 0, img.width, img.height);
	var data = img_data.data;
	for (var i=0; i<data.length; i+=4) {
		var brightness = 0.299 * data[i] + 0.587 * data[i+1] + 0.114 * data[i+2];
		data[i] = brightness;
		data[i+1] = brightness;
		data[i+2] = brightness;
	}

	ctx.putImageData(img_data, 0, 0);
}
var img = new Image();
img.onload = function() { grayscale(this); }
img.src = "images/face.jpg";

function save_canvas() {
	var canvas = document.getElementById("filtercanvas");
	var duri = canvas.toDataURL();
	var data = duri.substr(duri.indexOf(',')+1);

	var onerror = function(err) {
		console.log(err.name + " : " + err.message)
	}
	var onstream = function(stream) {
		stream.writeBase64(data);
		stream.close();
	}
	var onsuccess = function(dir) {
		var f = dir.createFile("face.png");
		f.openStream("w", onstream, onerror, "UTF-8");
	}
	
	tizen.filesystem.resolve("images", onsuccess, onerror, "rw");
}

function copy_image() {
	var onerror = function(err) {
		console.log(err.name + " : " + err.message)
	}
	var onsuccess = function(dir) {
		dir.copyTo("wgt-package/images/face.jpg", "images/face_original.jpg", true);
	}
	tizen.filesystem.resolve("images", onsuccess, onerror, "rw");
}

document.getElementById("savbtn").addEventListener("click", save_canvas, false);
document.getElementById("cpybtn").addEventListener("click", copy_image, false);
</script>
</body>
</html>

Reply to this post
Mark as answer

pius lee

30 Jul 2015 09:46

For Gallery App detect saved image, You should scan file for content system.

This is patched code, and snippet was patched also.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
</head>

<body>
<!-- drawing canvas for filtering image -->
<canvas id="filtercanvas" width="250" height="333"></canvas>
<hr>
<button id="savbtn">Save to Local</button>
<button id="cpybtn">Copy Original to Local</button>

<script>
/*
You must need three privilege for this source.

<tizen:privilege name="http://tizen.org/privilege/filesystem.write"/>
<tizen:privilege name="http://tizen.org/privilege/filesystem.read"/>
<tizen:privilege name="http://tizen.org/privilege/content.write"/>
*/
function grayscale(img) {
    var canvas = document.getElementById("filtercanvas");
	var ctx = canvas.getContext('2d');
	ctx.drawImage(img, 0, 0);
	var img_data = ctx.getImageData(0, 0, img.width, img.height);
	var data = img_data.data;
	for (var i=0; i<data.length; i+=4) {
		var brightness = 0.299 * data[i] + 0.587 * data[i+1] + 0.114 * data[i+2];
		data[i] = brightness;
		data[i+1] = brightness;
		data[i+2] = brightness;
	}

	ctx.putImageData(img_data, 0, 0);
}
var img = new Image();
img.onload = function() { grayscale(this); }
img.src = "images/face.jpg";

function save_canvas() {
	var canvas = document.getElementById("filtercanvas");
	var duri = canvas.toDataURL();
	var data = duri.substr(duri.indexOf(',')+1);

	var onerror = function(err) {
		console.log(err.name + " : " + err.message)
	}
	var onsuccess = function(dir) {
		var f = dir.createFile("face.png");
		f.openStream("w", function (stream) {
			stream.writeBase64(data);
			stream.close();
			tizen.content.scanFile(f.toURI());
		}, onerror, "UTF-8");
	}
	
	tizen.filesystem.resolve("images", onsuccess, onerror, "rw");
}

function copy_image() {
	var destination = 'images/face_original.jpg';
	var onerror = function(err) {
		console.log(err.name + " : " + err.message)
	}
	var onsuccess = function(dir) {
		dir.copyTo("wgt-package/images/face.jpg", destination, true, function(){
			tizen.filesystem.resolve(destination, function(f){
				tizen.content.scanFile(f.toURI());
			}, onerror, "r");
		});
	}
	tizen.filesystem.resolve("images", onsuccess, onerror, "rw");
}

document.getElementById("savbtn").addEventListener("click", save_canvas, false);
document.getElementById("cpybtn").addEventListener("click", copy_image, false);
</script>
</body>
</html>

Reply to this post
Mark as answer

Palitsyna

31 Jul 2015 04:13

Hello,

another example, that allows to save image from canvas:

var directory = "images",
file = null;

tizen.filesystem.resolve(directory, 
                 function(dir){ 
                   dir.createFile("image.png");
                   file = dir.resolve("image.png");
                          
                    file.openStream('w', function(fileStream) {
                         // Get canvas dataURL
                         var imageDataURL = document.getElementById("canvas").toDataURL();
                         imageDataURL = imageDataURL.replace("data:image/png;base64,", "");
                           
                         // Write data to the file and close fileStream
                         fileStream.writeBase64(imageDataURL);
                         fileStream.close();

                         // Update the content database
                         tizen.content.scanFile(file.toURI(), successCB, null);
                     });
                   },                       
                 function(e){ console.log("Error" + e.message);},
                 "rw");
function successCB() {
      alert("Content database successfully updated");
}

http://tizen.org/privilege/filesystem.read and http://tizen.org/privilege/content.write privileges are required.

Regards,

Svetlana Palitsyna

Reply to this post
Mark as answer

mohit kumar

31 Jul 2015 06:27

Hi,

I want to save images from my application to mobile gallery.How can i do this.I am developing photo frame.please help me

thanks and regards

Mohit Kumar

Reply to this post
Mark as answer

Seoghyun Kang

03 Aug 2015 09:09

Hello,

Could you explain your applicaiton in detail?

Especially, please explain your image in detail.

ex) Whether use the canvas / whether edited by user / whether included in your application

Thanks

Reply to this post
Mark as answer

Marco Buettner

31 Jul 2015 06:33

The solution was posted ... Whats your problem?

Share you code ... And dont let write all your code by other peoples

Reply to this post
Mark as answer

Marco Buettner

03 Aug 2015 07:51

Easy, merge your two canvas into one canvas and save this imageData to the filesystem ;)

HTML-Snippet

<canvas id="box2" style="border:1px solid red;left:0; top:0;position:absolute;height:200px;width:200px;"></canvas>
<canvas id="filtercanvas" width="359" height="475"></canvas>
<canvas id="finalcanvas" width="359" height="475"></canvas>

JS-Snippet

function save_canvas() {
    var can1 = document.getElementById("filtercanvas"),
        can2 = document.getElementById("box2"),
        can3 = document.getElementById("finalcanvas"),
        ctx = can3.getContext('2d'),
        uri = null,
        data = null;

    ctx.drawImage(can, 0, 0);
    ctx.drawImage(can2, 0, 0);


    uri = can3.toDataURL(),
    data = uri.substr(uri.indexOf(',')+1);

    var onerror = function(err) {
        console.log(err.name + " : " + err.message)
    }
    var onsuccess = function(dir) {
        var f = dir.createFile("frm21.gif");
        f.openStream("w", function (stream) {
            stream.writeBase64(data);
            stream.close();
            tizen.content.scanFile(f.toURI());
        }, onerror, "UTF-8");
    }
    
    tizen.filesystem.resolve("images", onsuccess, onerror, "rw");
}

Reply to this post
Mark as answer

mohit kumar

03 Aug 2015 08:16

Hi Marco Buettner,

Thank you so much.Its work fine.

very happy Tizen

thanks and regards

Mohit Kumar

Reply to this post
Mark as answer

mohit kumar

03 Aug 2015 09:50

Hi,

Its ok.I have resolved it.

thanks anr regards

Mohit Kumar

Reply to this post
Mark as answer

mohit kumar

03 Aug 2015 10:00

Hi,

I have fixed the position where image to be apper,but my pic is not apper inside the locket.Some part of my pic goes above the locket.I want it to be below the locket.My pic apper at the position i want but it apper above the locket.

Please help me.

thanks and regards

Mohit Kumar

Reply to this post
Mark as answer

User Menu

Tizen Forums

Community

Community

Responses

Search form

Responses