i make all steps in this link
https://github.com/devgeeks/Canvas2ImagePlugin/blob/master/README.md

but didn't work

i need full example or youtube video

thx

i upload my simple

http://www.mediafire.com/?dkkge3r7l33aki6

First off, awesome plugin.

Next, I think I followed all the instructions in the readme but I'm getting build errors in the Canvas2ImagePlugin.m.

Errors:
line 28: ARC forbids explicit message send of "autorelease'
line 28: 'autorelease' is unavailable: not available in automatic reference counting mode

line 54: 'release' is unavailable: not available in automatic reference counting mode
line 54: ARC forbids explicit message send of 'release'

line 55: ARC forbids explicit message send of 'dealloc'

Any thoughts of direction on these errors would be great.
I'm running xcode 4.6.3 and cordova 3.0 and iOS 6.1

This looks like a great plugin - found it on StackOverflow and it's just what I need. Unfortunately, I can't get it to build in Cordova / Xcode 4.3.1. I've seen on your blog there are a bunch of issues with Cordova - I'm hoping this isn't one of them.

I updated phonegap references to Cordova - e.g.

import <Foundation/Foundation.h>

ifdef CORDOVA_FRAMEWORK

import <Cordova/CDVPlugin.h>

else

import "CDVPlugin.h"

endif

And all references to PGPlugin in Canvas2ImagePlugin.h.

As well as changing

import "Cordova/NSData+Base64.h"

to

import "NSData+Base64.h"

in Canvas2ImagePlugin.m, which then throws a whole bunch of errors:

"Cannot find interface declaration for 'Canvas2Image'"
"Property implementation must have its declaration in interface 'Canvas2Image'"
"'Canvas2Image' cannot use 'super' because it is a root class"

...

If you have time to have a look, that would be amazing. If it's an insoluble problem with Cordova, fair enough, I'll keep looking. I've tried a huge number of plugins and approaches to save a canvas image to the iOS photo roll, and I haven't got one to work yet...

Cordova has built in support for handling Base64 encoded strings. I've cleaned up the code. See it here: https://github.com/vstirbu/Canvas2ImagePlugin.

I've tested in Cordova 1.8.1

The plugin gives back the image URL of the saved file in Android. In iOS it gives back a stock message "image saved". It would be handy to be able to act on the image in iOS.
I sent a pull request with the fix.

I have a simple call to window.canvas2ImagePlugin.saveImageDataToLibrary as seen below:

        window.canvas2ImagePlugin.saveImageDataToLibrary(
            function (msg) {
                $scope.ShareThisPicture(msg);
            },
            function (err) {
                $scope.SimpleAlert("Error", err);
            },
            document.getElementById('myCanvas')
        );

However, when I call the function on an Window Phone 8.1 emulator, I get an error "Missing Command Error" thrown. Any idea what might be causing this?

Has some method to return the ImageURI?? I need this information to pass to FileTransfer

Will this work for Phonegap build?

I have tried implemention this plugin, it throws NullPointerException while saving.
I have posted for the same here :
http://stackoverflow.com/questions/22898574/cordova-canvastoimageplugin-throws-nullpointerexception-error-while-saving-the-i
Above link contains a screenshot of the error.

Perhaps a configuration option to choose to either save the image to the gallery/camera roll (as it does currently) or to save it to the app's filesystem and return the file URL (allowing the dev to then upload to a server via FileTransfer, open in another app, etc).

Hi,

Would you mind changing the plugin signature to something like this?

function(successCallback, failureCallback, canvas)

This would work better with my codebase. I don't mind hacking this locally. Just thought this might be a good idea generally. :)

i download this example
http://cl.ly/0n1Y3j0S2Q2y
but
how can i save image when i click button not in the loading

After uploading and building my app with the Canvas2ImagePlugin configured, I see Canvas2Image in the plugins list, but the installed version is N/A.

Plugin Source Version Latest Installed Platforms
org.devgeeks.canvas2imageplugin pgb 0.6.0 0.6.0 n/a android,ios,winphone

I've tried downgrading from cli-5.2.0 to 3.0, but with no luck.

Is there anything else I need to be doing to get PGB to install the plugin?

Hello !
I just tested the plugin with the latest Ionic version, and it works just fine !

Do you think it would be complicated to ad a parameter for a specific folder to save the picture ?
I think about classical Apps that use a folder (instagram and many others)
Thank you !

Alain

First off, thank you for taking the time to write this plugin.

I have it working as intended on iOS but on my Android version (Lollipop), it saves the image as a file to the Pictures folder, but it does not show up in the camera roll. I can get it displayed if I open up "Photos" and choose "Device Folders" as the source. Additionally, the success callback fires but the return value is empty so I do not have a path.

The same thing happens on your demo app here: https://build.phonegap.com/apps/946650/share

I should mention that I'm using PhoneGap Build.

I am newbie to PhoneGap, so i do not know to use your plugin on Android. It was different with the plugin that I have used. Can you write a demo on android ?

Hi devgeeks....nice plugin

May I know is this plugin also working for android?

If yes, will you show some guide for me

Thanks a lot...

Hi,

Thanks a lot for the wonderful plugin.
I'm using this plugin for iOS and facing two issues:
Whenever I save any image, it creates a new folder in Camera roll. Can't it be saved just as an image, instead of a folder and then an image inside that folder.

Also the success and error callback are never getting called.

I'm still having trouble getting the plugin to work on my iOS device through PhoneGap Build. I'm using the Config.xml that you pointed me to -https://gist.github.com/devgeeks/ba5a96e3d673b84c9e75 - only modified to use my app icon assets and I'm using the following minimalist index.html in order to diagnose the issue. Can anyone see what I'm doing wrong here. I've been using Build quite successfully on my main app, but am struggling to get this plugin to work even in this simplest case. I'm losing my mind on this! Is my canvas not valid in some way? Really appreciate any help.

<!DOCTYPE html> 
<html> 
    <head> 
    <meta name="viewport" content="width=device-width, initial-scale=1"> 

<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.css" />
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.0/jquery.mobile-1.4.0.min.js"></script>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" charset="utf-8">

var container;
var c;

document.addEventListener("deviceready",onDeviceReady,false);

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

</script>

<style type="text/css">
    #myCanvas {
        border: dotted 3px black;
        background-color: lightGray;
    }
</style>

</head> 
<body> 
    <div data-role="page" id="main" >
        <div data-role="header" data-position="fixed" style="min-height: 45px; padding-top: 15px;"">
            <h1><div id="posttitlearea" style="display:inline; top: 20px;">Hello World for canvas2ImagePlugin</div></h1>
        </div><!-- /header -->
        <div data-role="content" >          
            <p>This document contains our first canvas example</p>
            <canvas id="myCanvas" width="250" height="300"></canvas>
        </div><!-- /content -->
        <div data-role="footer" data-position="fixed">
        </div><!-- /footer -->
    </div><!-- /page postdetail -->
</body>
</html>

First of all thanks a lot for the great work and your plugin. I have been able to use it successfully with my Phonegap 2.2 iOS project. The only issue I am facing is that the Canvas image is saved with a black background. Is there anyway to get a white background? My application is a Canvas Paint program and hence I need to save the image in a white background color. Please help me out.
I had one more doubt. How do I get the saved image path? I need to email the image using EMailComposer plugin.
Thanks in advance.
Joseph

I'm trying to use this plugin to save a canvas into image and store into the library, but it's not working. Not even the error log message.
Do you now some other method to save a canvas.dataURL as image in the library?

Hi. I'm trying to use your plugin with Cordova 2.1.0 and I'm getting some errors when compiling. I'm not sure if I'm doing something wrong or if something is missing from the code.

The first problem is in Canvas2ImagePlugin.h
'NSDataAdditions.h' file not found

The second problem is in Canvas2ImagePlugin.h:
...
//Expected identifier or '('
{
NSString* callbackId;
}

@Property (nonatomic, copy) NSString* callbackId;

• (void)saveImageDataToLibrary:(NSMutableArray_)arguments withDict:(NSMutableDictionary_)options;

//Missing context for method declaration

@EnD

Thanks.

Is there a way to check the access rights before save to notify the user that there might not be any rights.

Fresh Cordova 3.0 project. Only plugin installed and the image that is saved is just solid black. Any ideas?

        function onDeviceReady()
        {
            window.canvas2ImagePlugin.saveImageDataToLibrary(
                function(msg){
                    console.log(msg);
                },
                function(err){
                    console.log(err);
                },
                document.getElementById('myCanvas')
            ); 
        }
        document.addEventListener('deviceready', this.onDeviceReady, false);

I see that Windows 10 is not supported. I will try to see what I can do to help even if I am not confortable with anything that is not javascript :D

I'm using the plugin in an android application, and looping over an array of images. When doing so, some are skipped and don't show up in the gallery.

Thanks for the plugin. I got it to work fine on Android but it is not being recognized on iOS.

I installed it with this command:
cordova plugin add https://github.com/devgeeks/Canvas2ImagePlugin.git

But I get this error. Is there a step I am missing?
CDVPlugin class Canvas2ImagePlugin (pluginName: Canvas2ImagePlugin) does not exist.

Thanks,
Mark

hai dev

         i  develop app based  capture image and  upload to server.... here i want add datetime and more  on image(bottom of right)... i done  with canvas that come good... i need store a image  that complete on android using ur plugin... so i nxt is done with windows phone 8 .. it complicate for me .. i don't know where put  .js file and .cs .. help me

advance thanks
pathmanabhan kv

Hi,

trying to use this plugin for ios, its working in android but not in ios, please note i am using phonegap build to compile ipa

code

index.html

script.js
[code]
function uploadImage(rul) {
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");
var imageObj = new Image();
imageObj.src = rul;
imageObj.onload = function () {
try{
canvas.width = imageObj.width;
canvas.height = imageObj.height;
context.drawImage(imageObj, 0, 0);
window.canvas2ImagePlugin.saveImageDataToLibrary(
function(msg){
alert(JSON.stringify(msg));
},
function(err){
alert(JSON.stringify(err));
},
document.getElementById('myCanvas')
);
}catch(e){alert("ERROR:"+JSON.stringify(e));}
};
}
uploadImage("http://icdn.indiaglitz.com/hindi/gallery/Actress/PriyankaChopra/Priyanka_Chopra_8615_218.jpg");

[/code]

config.xml

<gap:plugin name="org.devgeeks.canvas2imageplugin" version="0.6.0" source="plugins.cordova.io" />

i am getting following error when excuted
{"code":18,"name":"SecurityError", "message":"SecurityError: DOM Exception 18","line":22,"column":45,"sourceURL":"file:///private/var/mobile/Containers/Data..../www/plugins/../Canvas2ImagePlugin.js"}

the same thing worked for android

I am trying to save a gif image, I modded the library to use the image data that i send it.

https://github.com/snowbreeze/Canvas2ImagePlugin

I am passing a base64 gif but it says bad base-64

My image is something like this.
data:image/gif;base64,R0lGODlhLAEsAQAAACH/C05FVFNDQVBFMi4wAwEAAAAsAAAAACwBL…guOulCrMu6tq478a7svOtrxQw02os7F8XTiD77DuNMIPrWg6+ihxSS7zLzbjQvPRwvCAgAOw==

Hi,

I recently 'upgraded' my iphone to ios9 and this plugin no longer seems to work.
Is this a known issue and can anyone suggest a workaround?

Thanks in advance,
Darren

Hi, I needed jpeg support so I changed this line, maybe make this available as a setting?

//var imageData = canvas.toDataURL().replace(/data:image/png;base64,/,'');
var imageData = canvas.toDataURL("image/jpeg", 1.0).replace(/data:image/jpeg;base64,/,'');

When there is no permission given to the app to save an image to the photo roll no feedback function are being called. (iOS 6.1.2)

To simulate this, go to settings > privacy > photos then disable access to photos for the specific app.

It will throw the following error:
ERROR: Error Domain=ALAssetsLibraryErrorDomain Code=-3310 "Data unavailable" UserInfo=0x1f0836e0 {NSLocalizedRecoverySuggestion=Launch the Photos application, NSUnderlyingError=0x1e5bdb10 "Data unavailable", NSLocalizedDescription=Data unavailable}

After that it does not seem to call the webview callbacks.

I'm so stoked to see this plugin, but have been loving PhoneGap Build. So I guess this is a plea to update Build with the latest code. I'm a bit of a newbie or I'd offer to help. Any assistance would be appreciated.

I've been trying to use Canvas2Plugin and i finally got cordova.exec working with it, but, when it's called on android, it throws an error: Class Not Found.

The code is:

  var SaveImage = function(element, success, error){
      var canvas = document.getElementById(element);
      var imageDataUrl = canvas.toDataURL('image/jpeg', 1.0);
      var imageData = imageDataUrl.replace(/data:image\/png;base64,/,'');
      cordova.exec(success, error, 'Canvas2ImagePlugin', 'saveImageDataToLibrary', [imageData]);
      $scope.return = 'Saved';
  };

  var success = function(msg){
      $scope.return = msg;  
  };

  var error = function(err){
      $scope.return = err;
  };

  $scope.save = function(){
      SaveImage('pwCanvasMain', success, error);
  };

As you may see, I'm using angular.js.
Does anyone know whats is this error?
On IOS it isn't saving.

Thanks.

Hi,

Can you please extend the plugin so that we can pass the path of the folder where image needs to be saved.

Hi guys. How to change/custom name and the directory of file?

If do not exists, how I can to create this feature?

Thanks.

Hi, I have attempted to use this plugin both in Chrome (desktop) and also on my android phone (4.4.2), and I am receiving the same error when attempting to save the canvas.

I have tried doing some research into this error message, but all I can find are things that talk about CORS, so I'm not sure if that applies to trying to write an image to a local storage (either from chrome browser on desktop or phonegap android app).

I would greatly appreciate any thoughts you might have on how to get around this error.

thanks!

i tries to save the Image created in canvas,

but it gives me error as :
Error: Failed to execute 'toDataURL' on 'HTMLCanvasElement'

mycode is as follows :

var canvasMemDOM =$('<canvas>');
var canvasMem=canvasMemDOM.get(0);

$(canvasMemDOM).attr('width', imageWidth+"px");
$(canvasMemDOM).attr('height', imageHeight+"px");

var ctxMem=canvasMem.getContext("2d");
ctxMem.drawImage(img, 0, 0, imageWidth, imageHeight);
ctxMem.drawImage(canvas, 0, 0);

canvasImageUrl = canvasMem.toDataURL();

i get error at last line..

canvasImageUrl = canvasMem.toDataURL();

Cordova iOS 4 removed several deprecated methods which are used by this plugin, so the plugin crashes when used in an app built with Cordova iOS 4.

For example, this line:

NSData* imageData = [NSData dataFromBase64String:[command.arguments objectAtIndex:0]];

Causes a crash because dataFromBase64String no longer exists in Cordova iOS 4.0:

https://github.com/apache/cordova-ios/blob/master/guides/API%20changes%20in%204.0.md

Does this work with iOS 7?

Im trying to get this to work on my iPhone 4s with iOS 7.
The canvas is created with three.js and the "canvas-renderer".
But i don't get any issues from the Javascript side, all looks fine there.
The Problem is that there are no images stored at all.

Here's my Code:

onClick: function(){
    var canDiv = document.getElementById('canvas-container');
    var newCanvas = canDiv.getElementsByTagName('canvas')[0];

    window.canvas2ImagePlugin.saveImageDataToLibrary(
        function(msg){
            console.log(msg);
        },
        function(err){
            console.log(err);
        },
        newCanvas
    );

}

Are there known compatibility prob's with that iOS?
Thanks

Hello how are u ?

Thank u for great plugin

Can u tell me how to save it as jpg ?

If I cannot when it could be available ?

Hi,
i was wondering if it is possible to not save the image to the library but to send it to a remote server with the phonegap FileTransfer API (http://docs.phonegap.com/en/3.3.0/cordova_file_file.md.html#FileTransfer)? How would I do that?

Hello,

I need some help here, I'm using phonegap with angular.js, but i can't get you plugin work with angular.
I've installed the plugin by cordova add plugin, on the onDeviceReady it's been called by:

var canvas2ImagePlugin = window.plugins.canvas2ImagePlugin;

and also I'm defining it on my controller as:

$scope.save = function(){
        var cnv = document.getElementById('pwMainCanvas');

        canvas2ImagePlugin.saveImageDataToLibrary(
            function(msg){
                console.log(msg);
            }, 
            function(err){
                console.log(err);
            }, 
            'pwMainCanvas'  /*or cnv, or pwMainCanvas*/
        );
};

Someone already had made it or know what I'm doing wrong?

Thanks.

I'm trying to save an image to the iOS Library. It works with images inside /www but when I tried with images in /Documents it doesn't work.

After a bunch of tests I have this code that the fist time I tap the button it doesn't works but the second chance it works perfect.

window.requestFileSystem(window.LocalFileSystem.PERSISTENT, 0, function(fileSystem) {
fileSystem.root.getFile(fileNameImg,
{create: false, exclusive: false}, function(fileEntry) {

                    linkimagen = fileEntry.toURL();

                    imageObj.src = linkimagen;

                    context.canvas.height = imageObj.height;
                    context.canvas.width = imageObj.width;
                    context.drawImage(imageObj, 0, 0);

                    setTimeout(function() {
                         window.canvas2ImagePlugin.saveImageDataToLibrary(
                            function(msg){
                                showMessage("La im\u00e1gen se ha guardado correctamente.",null,"Test",'OK');

                            },
                            function(err){
                                alert("No se ha podido guardar la imágen.");

                            },
                            document.getElementById('myCanvas')
                        );
                    }, 1000); 
                }, function(e){alert(e);console.log(e);});
        }, function(e) {console.log(e);alert(e);});

The first time imageObj.height = 0 the second change it has the correct height....any ideas?

Thanks!

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?

I work on ionic framework. I added canvas2ImagePlugin to my project and link it in index.html.
But I have some problem that I don't know how to fix. I'm a beginner with ionic and angularJS.

Error : Canvas2ImagePlugin.js:10Uncaught ReferenceError: module is not defined

module.exports = {   /// I got error this line.
    saveImageDataToLibrary:function(successCallback, failureCallback, canvasId) {
        // successCallback required
        if (typeof successCallback != "function") {
            console.log("Canvas2ImagePlugin Error: successCallback is not a function");
        }
        else if (typeof failureCallback != "function") {
            console.log("Canvas2ImagePlugin Error: failureCallback is not a function");
        }
        else {
            var canvas = (typeof canvasId === "string") ? document.getElementById(canvasId) : canvasId;
            var imageData = canvas.toDataURL().replace(/data:image\/png;base64,/,'');
            return cordova.exec(successCallback, failureCallback, "Canvas2ImagePlugin","saveImageDataToLibrary",[imageData]);
        }
    }
  };

and I will use this code in my controller.js to save image to mobile storage.

var canvas = document.createElement( 'pwCanvasMain' );
        var ctx = canvas.getContext( '2d' );
        void ctx.drawImage( this, 0, 0, img.width, img.height);
        var dataURI = canvas.toDataURL().replace( /data:image\/png;base64,/, '' );
        function successCallback( result ) {
            q.resolve( 'file:///' + result );
        }
        function failureCallback( err ) {
            console.error( err );
            q.reject( err );
        }
        cordova.exec( successCallback, failureCallback, "Canvas2ImagePlugin", "saveImageDataToLibrary", [dataURI] );

I want to convert my canvas as image then save on my mobile device storage. But my issue is module is not defined. Please help. Thanks.

How to do that with mp4 ?

It would be very useful to get the filename or the filepath back once the image has been saved. Would you please provide this feature?

Maybe setting the filename/filepath would fix the issue so no returning value would be needed.

Thank you very much.

that will have the possibility to return the full path of the image on function return?