Usage Example

[InductiveIdeas]

Hey Devgeek. Thanks for responding to and getting a fix out for the xcode errors I was getting. I created a brand new app to test out the plugin and it builds just fine no errors. So awesome, thanks.

I hope I'm not missing something completely trivial but I an getting this error:
"undefined is not an object (evaluating window.canvas2ImagePlugin.saveImageDataToLibrary() )"

I basically put your example javascript code in an onclick where I was populating the canvas with an image before it would save, here's the code:

function uploadImage() {
    var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");

    var imageObj = new Image();
    imageObj.src = "http://www.kodyaz.com/images/windows-8-screenshots/consumer-beta-windows-8-start-screen.png";

    imageObj.onload = function () {
        context.drawImage(imageObj, 0, 0);
    };

    window.canvas2ImagePlugin.saveImageDataToLibrary(
        function(msg){
        console.log(msg);
        },
        function(err){
        console.log(err);
        },
        document.getElementById('myCanvas')
        );
}

Am I missing something, or using the plugin wrong?

[devgeeks]

Hrm... I can't replicate it.

I just tried this with a brand new project.

• cordova create blah org.devgeeks.blah blah
• cd blah
• cordova platform add ios
• cordova plugin add https://github.com/devgeeks/Canvas2ImagePlugin.git

Then I edited ./www/index.html and added this above the <div class="app">:

    <canvas id="myCanvas" width="165px" height="145px"></canvas>
    <div><a href="#" id="clickme">Click me</a></div>

Then in ./www/js/index.js I added your uploadImage() function at the top (above var app = {):

function uploadImage() {
    var canvas = document.getElementById("myCanvas");
    var context = canvas.getContext("2d");

    var imageObj = new Image();
    imageObj.src = "http://www.kodyaz.com/images/windows-8-screenshots/consumer-beta-windows-8-start-screen.png";

    imageObj.onload = function () {
        context.drawImage(imageObj, 0, 0);
            window.canvas2ImagePlugin.saveImageDataToLibrary(
            function(msg){
                console.log(msg);
            },
            function(err){
                console.log(err);
            },
            document.getElementById('myCanvas')
        );
    };
}

note: I moved the call to window.canvas2ImagePlugin.saveImageDataToLibrary() into imageObj.onload so that the saved image would contain the image added to the canvas and not save it before it was finished loading).

Then finally I added the following to app.onDeviceReady() right under the app.receivedEvent('deviceready'); call:

var clickme = document.getElementById("clickme");
clickme.addEventListener('click', uploadImage);

Then ran it on the emulator with:

cordova emulate ios

...and the image saved as expected when I clicked on the "click me" link.

Can you repeat these steps and see if it works for you?

[InductiveIdeas]

Welp, ya did it again. I followed what you did above and it is all working perfect. This is great! It must have been I wasn't waiting for the onDeviceReady function. Also good call on putting the canvas2imageplugin function inside the imageObj.onload I did overlook that.

But as far as I can tell everything is working perfect in cordova/phonegap 3.0. As a said before this plugin (rocks) cordova needs this built in. Thanks for all the help.

[devgeeks]

Glad it's working!

[sankari123]

I tried your code in Sony and ASUS tab. I could not store the file locally (gallery / Pictures)
Step 1 -
Step 2 - onDeviceReady() included-- var clickme = document.getElementById("btn4");
btn4.addEventListener('click', savePhoto);

step 3 - function savePhoto()

function savePhoto()
{
var canvas=document.getElementById("theCanvas");
var ctx=c.getContext("2d");
tmp = ctx.getImageData(0,0,canvas.width, canvas.height);
imgDataUrl = canvas.toDataURL();

var imageObj = new Image();
imageObj.src = imgDataUrl;
imageObj.onload = function () {
    context.drawImage(imageObj, 0, 0);
        window.canvas2ImagePlugin.saveImageDataToLibrary(
        function(msg){
            console.log(msg);
        },
        function(err){
            console.log(err);
        },
        document.getElementById('theCanvas')
    );
};

}