Languages

Menu
Sites
Language
Is there any one to help me

Hi,

I have some problem with my aaplication.I have posted my problem,please help me.

 

 

thanks and regards

Mohit kumar

View Selected Answer
List

Responses

5 Replies
Vikram

so, what's the details or problem link? 

mohit kumar

Hi,

I have developed locket photo frame application.Once i click on save button it save in gallery.But my image is aapper out side the locket after save in gallery.

 

when my frame is save in the gallery then my pic aapper outside the frame.Its look like

          

after saving in gallery my pic aaper outside the locket.

 

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:150px;
             left:150px;           
            right: 0;
            bottom: 0;
            width: 166px;
            height: 188px;
            background-size:100% 100%;
        }
    </style> -->

</head>

<body onload="fiximage();" style="background-color:yellow;">


    <canvas id="box2" style="border:1px solid red;left:0; top:0;position:absolute;height:200px;width:133px;background-size:100% 100%;"></canvas>
<canvas id="filtercanvas" width="359" height="475"></canvas>
<canvas id="finalcanvas" width="359" height="475"></canvas>
    
    <hr>
<div style="top:94%;position:absolute;">
    <button id="savbtn">Save</button>
    <button id="cpybtn">Copy</button>
</div>

    <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, 48, 230,130,135);


        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>
</body>

</html>

 

thanks and regards

Mohit Kumar

 

mohit kumar

Hi,

I have developed locket photo frame application.Once i click on save button it save in gallery.But my image is aapper out side the locket after save in gallery.

when my frame is save in the gallery then my pic aapper outside the frame.Its look like

          

after saving in gallery my pic aaper outside the locket.

 

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:150px;
             left:150px;           
            right: 0;
            bottom: 0;
            width: 166px;
            height: 188px;
            background-size:100% 100%;
        }
    </style> -->

</head>

<body onload="fiximage();" style="background-color:yellow;">


    <canvas id="box2" style="border:1px solid red;left:0; top:0;position:absolute;height:200px;width:133px;background-size:100% 100%;"></canvas>
<canvas id="filtercanvas" width="359" height="475"></canvas>
<canvas id="finalcanvas" width="359" height="475"></canvas>
    
    <hr>
<div style="top:94%;position:absolute;">
    <button id="savbtn">Save</button>
    <button id="cpybtn">Copy</button>
</div>

    <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, 48, 230,130,135);


        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>
</body>

</html>

 

thanks and regards

Mohit Kumar

 

Mark as answer
Marco Buettner

Did you try to switch can2 and can1?

ctx.drawImage(can2, 48, 230,130,135);
ctx.drawImage(can1, 0, 0);

 

mohit kumar

Hi,

Thank you so much.