Languages

Menu
Sites
Language
How to save the image in the mobile gallery from application

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

 

List

Responses

14 Replies
pius lee

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>

 

pius lee

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>

 

mohit kumar

Hi,

Its work fine,but it not allow to save more then one image.I have used two canvas one is at back and another is front.There are two canvas on which two images are there.I have problem with it not allow to save both image in the gallery.please help me.

                                                      

 

 

my code is

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <link rel="stylesheet" type="text/css" href="css/style.css" />
    <script src="js/main.js"></script>

    <script>
        window.addEventListener('load', function(){
            var box2 = document.getElementById('box2'),
            boxleft, // left position of moving box
            boxtop,
            startx,
            starty, // starting x coordinate of touch point
            dist = 0, // distance traveled by touch point
            touchobj = null // Touch object holder
         
            box2.addEventListener('touchstart', function(e){
                touchobj = e.changedTouches[0] // reference first touch point
                boxleft = parseInt(box2.style.left) // get left position of box
                startx = parseInt(touchobj.clientX) // get x coord of touch point
               e.preventDefault() // prevent default click behavior
            }, false)
         
           box2.addEventListener('touchstart', function(e){
               touchobj = e.changedTouches[0] // reference first touch point
                boxtop = parseInt(box2.style.top) // get left position of box
                starty = parseInt(touchobj.clientY) // get x coord of touch point
                e.preventDefault() // prevent default click behavior
            }, false)
         
            box2.addEventListener('touchmove', function(e){
                touchobj = e.changedTouches[0] // reference first touch point for this event
                var dist = parseInt(touchobj.clientX) - startx // calculate dist traveled by touch point
                // move box according to starting pos plus dist
                // with lower limit 0 and upper limit 380 so it doesn't move outside track:
                box2.style.left = ( (boxleft + dist > 380)? 380 : (boxleft + dist < 0)? 0 : boxleft + dist ) + 'px'
               e.preventDefault()
           }, false)
         
          box2.addEventListener('touchmove', function(e){
                touchobj = e.changedTouches[0] // reference first touch point for this event
                var dist = parseInt(touchobj.clientY) - starty // calculate dist traveled by touch point
                // move box according to starting pos plus dist
                // with lower limit 0 and upper limit 380 so it doesn't move outside track:
                box2.style.top = ( (boxtop + dist>380)? 380 : (boxtop + dist < 0)? 0 : boxtop + dist ) + 'px'
                e.preventDefault()
            }, false)     
        }, false)
    </script>
    
    <style>
        #box2 {
          
            display: block;
            position: absolute;
            top: 100px;
            left: 100px;
            right: 0;
            bottom: 0;
            width: 100%;
            height: 100%;
            background-size:100% 100%;
        }
    </style>

</head>

<body style="background-color:yellow;">
        <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>
    <hr>

    <button id="savbtn">Save</button>
    <button id="cpybtn">Copy</button>

    <script>
                function grayscale(img) {   
            var canvas = document.getElementById("filtercanvas");
            var ctx = canvas.getContext('2d');
            ctx.drawImage(img, 0, 0, 359,475); 
            var img_data = ctx.getImageData(0, 0, img.width, img.height);
                   ctx.putImageData(img_data, 0, 0);
        }
        var img = new Image();
        img.onload = function() { grayscale(this); }
        img.src = "css/images/frm21.gif";
        
        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("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");
        }
        
        function copy_image() {
            var destination = 'images/frm21.gif';
            var onerror = function(err) {
                console.log(err.name + " : " + err.message)
            }
            var onsuccess = function(dir) {
                dir.copyTo("wgt-package/images/frm21.gif", 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>

    <script>
        window.onload = function() {
            drawEx1();
        }
        var image1 = null;
        
        function drawEx1() {
            image1 = new Image();
            image1.src =
                "css/images/mohit.jpeg";
            image1.addEventListener('load', drawImage1);
        }
        function drawImage1() {
            var canvas1  = document.getElementById("box2");
            var context = canvas1.getContext("2d");           
            context.drawImage(image1, 10, 10,200,200);
        }     
    </script>

</body>

</html>

Marco Buettner

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");
}

 

mohit kumar

Hi Marco Buettner,

Thank you so much.Its work fine.

very happy Tizen

 

 

 

thanks and regards

Mohit Kumar

 

mohit kumar

Hi,

    I am developing photoframe application.Once i clicked on save button.It saved in gallery,but the size of my pic is changed and position also chane.

My pic appers outside the locket.Please help me.

                                 

The position of pic i have fixed but it size apper bigger.

 

 

 <script>
                function grayscale(img) {
            
            var canvas = document.getElementById("filtercanvas");
            var ctx = canvas.getContext('2d');
            ctx.drawImage(img, 0, 0, 359,475);
            
             ctx.globalAlpha = 0.4;
            
            var img_data = ctx.getImageData(0, 0, img.width, img.height);
                
            ctx.putImageData(img_data, 0, 0);
        }
        var img = new Image();
        img.onload = function() { grayscale(this); }
        img.src = "css/images/frm1.png";
        
        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(can1, 0, 0);
        ctx.drawImage(can2, 50, 50);


        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("frm1.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");
        }
               
        document.getElementById("savbtn").addEventListener("click", save_canvas, false);
        document.getElementById("cpybtn").addEventListener("click", copy_image, false);
    </script>

    <script>
        window.onload = function() {
            drawEx1();
        }
        
        var image1 = null;
        
        function drawEx1() {
            image1 = new Image();
            image1.src =
                "css/images/mohit.jpeg";
            image1.addEventListener('load', drawImage1);
        }
        
        function drawImage1() {
            var canvas1  = document.getElementById("box2");
            var context = canvas1.getContext("2d");
        
            
            context.drawImage(image1, 0,0,263,150);
        }
    </script>

 

mohit kumar

Hi,

Its ok.I have resolved it.

 

 

thanks anr regards

Mohit Kumar

mohit kumar

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

 

mohit kumar

Hi,

    Once my pic saved in the gallery then it apper above the locket.I want it to be apper inside the locket.Here i capture image of output.

Please help me.

 

                                                      

 

 

my image in the gallery should be apper inside the locket like

 

                                  

 

mohit kumar

Hi,

Its works fine.once i click on save button then my image saved in mobile gallery,but i want my pic to be apper inside the locket.

 

Before clicking on save button my pic is inside the locket its fine.


 

Palitsyna

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

 

mohit kumar

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

Seoghyun Kang

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

Marco Buettner

The solution was posted ... Whats your problem?

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