Tizen Developers

Hi AVSukhov,

document.getElementById('opengl').addEventListener("click", function() {
        try {
            var appControl = new tizen.ApplicationControl(
                "http://tizen.org/appcontrol/operation/pick",
                null,
                "image/*",
                null, [new tizen.ApplicationControlData("http://tizen.org/appcontrol/data/selection_mode", ["single"])]);
 

            var appControlReplyCallback = {
                onsuccess: function(reply) {
                    var path = reply[1].value[0];
                    path = "file://" + path;

                    //document.getElementById('box2').setAttribute("src", path);
                        
                    
                    sessionStorage.setItem("mohit", path); //saves to the database, key/value
                   // box2.src =path;
                   location.reload();
              //      sessionStorage.getItem("mohitt");
                    
                },
                onfailure: function() {
                    console.log("The launch application control failed");
                }
            };

            tizen.application.launchAppControl(
                appControl,
                null,
                function() {
                    console.log("launch application control succeed");
                },
                function(e) {
                    console.log("launch application control failed. reason: " + e.message);
                },
                appControlReplyCallback
            );
        } catch (e) {
            alert("Error " + e.name + " : " + e.message);
        }
       
    
    });

function grayscale(img) {
var canvas = document.getElementById("box2");
    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.2126 * data[i] + 0.7152 * data[i+1] + 0.0722 * data[i+2];
        data[i] = brightness;
        data[i+1] = brightness;
        data[i+2] = brightness;
    }

    ctx.putImageData(img_data, 0, 0);
}
 

function mohitji()
{    

var img = new Image();

img.onload = function() { grayscale(this); }
var sss = sessionStorage.getItem("mohit");
img.src =sss;    //this not work

//img.src="images/girls1.jpg";  //this work fine
}

Please Help me

Thanks and regards

Mohit Kumar

Hi,

      This work fine with sigle color.I want to implement gray scale for six types.But above code make it for single.I have changed the value but it not work.

Please help me

Thanks and regards

Mohit Kumar

Hi,

 I want to implement this on the button click.I want to create a button when user click on the button then gray scale effect display on image.

Please help me

Thanks and regards

Mohit Kumar

Hi,

         I am very near to implement gray scale.But  once i click on button then it not make gray scale.This code is work fine for the fix path.But not work with the image selected from gallery.Please help me.

document.getElementById('opengl').addEventListener("click", function() {
        try {
            var appControl = new tizen.ApplicationControl(
                    "http://tizen.org/appcontrol/operation/pick",
                    null,
                    "image/*",
                    null, [new tizen.ApplicationControlData("http://tizen.org/appcontrol/data/selection_mode", ["single"])]);

                var appControlReplyCallback = {
                    onsuccess: function(reply) {
                        var path = reply[1].value[0];
                        path = "file://" + path;
                        var pathh=JSON.stringify(reply);
                        sessionStorage.setItem("grayy", pathh);
                       // alert(JSON.stringify(reply));
                        var img = new Image();
                        img.onload = function() {
                            var canvas = document.getElementById("box2");
                            var ctx = canvas.getContext('2d');
                            ctx.drawImage(img, 0, 0, canvas.width * 0.99, canvas.height * 0.999);
                            }
                           
                        }
                        img.src = path;
                        
                    },
                    onfailure: function() {
                        console.log("The launch application control failed");
                    }
                };
                tizen.application.launchAppControl(
                    appControl,
                    null,
                    function() {
                        console.log("launch application control succeed");
                    },
                    function(e) {
                        console.log("launch application control failed. reason: " + e.message);
                    },
                    appControlReplyCallback
                );
        } catch (e) {
            alert("Error " + e.name + " : " + e.message);
        }
      
    });

function grayscale(img) {
    var canvas = document.getElementById("box2");
        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) {
             data[i+0]=data[i+4]=data[i+6]=(data[i]+data[i+4]+data[i+8])/5;
        }

        ctx.putImageData(img_data, 0, 0);
    }
    

    function gray()
    {    
    var img = new Image();
//alert(grayy);
    img.onload = function() { grayscale(this); }
    var sss = sessionStorage.getItem("grayy");
    alert(sss);
//    img.src =sss;    //this not work

    img.src="images/girls1.jpg";  //this work fine
    }

Thanks and regards

Mohit Kumar

Hello,

You can use some third-party libraries for this purpose, f.e. grayscale.js

Some more info about turn canvas to gray scale you can find here:

http://permadi.com/tutorial/jsCanvasGrayscale/index.html

Hello,

here you can find some examples of usage of Application Control: https://developer.tizen.org/development/guides/web-application/tizen-features/application/application

Hope it will help you

Hello,

here you can find one more example. You can also try to modify something there to understand how it works.

http://www.html5canvastutorials.com/advanced/html5-canvas-grayscale-image-colors-tutorial/