Hi guys

I have a project where I need to save the canvas screenshot to mobile photo gallery

The browser plugin with its example from C2 only worked on PC browsers but not on android. after 20+ hours of research I managed to do it.

apparently, there is a third party Cordova plugin for this purpose, it is called "Canvas2ImagePlugin"

I am not an expert in programming, let alone writing plugins from scratch. so I edited the "Canvas" plugin from R0J0hound to test it and it WORKED.

Here is what I did:

1) add the following in Canvas "edittime.js"

AddAction(44, 0, "Canvas2Image", "Canvas", "Canvas2Image", "Canvas2Image", "Canvas2Image");

2) add the following in Canvas "runtime.js"

acts.Canvas2Image= function ()

{

var imageData = this.canvas.toDataURL().replace(/data:image\/png;base64,/,'');

cordova.exec(null, null, "Canvas2ImagePlugin","saveImageDataToLibrary",[imageData]);

};

3) create a new C2 project, drop a canvas, color it red, create a button and on the even sheet, button on clicked => Canvas2Image

note: running the project on PC will not save the file for you, actually it will give you an error because it does not understand cordova.exec.

4) on Intel XDK, you need to add the plugin and enable few permissions:

4.1) Add Canvas2ImagePlugin:

from Cordova Setting, go to Third Party Plugins

click on "get plugin from the web" and fill in the following:

name=: Canvas2ImagePlugin

Plugin ID=: org.devgeeks.Canvas2ImagePlugin

Repro URL=:

(I do not have previllage to post URLs on this forum yet, maybe someone can do that for me, it is on github under /devgeeks/Canvas2ImagePlugin.git)

4.2) enable external storage read/write permission in order to be able to access the photo gallery:

Click on permission -> Android-Crosswalk

in add Permission text field add the following (submit after each enetry):

READ_EXTERNAL_STORAGE

WRITE_EXTERNAL_STORAGE

note: I am not sure if I need read access, but I added it anyway.

we are done, now just export the project and build it

now run the app on your mobile and click the button. go and check your gallery and you will find a sweet red image sitting there

hope you guys find this helpful.

I finally did it

check my other thread: forum/plugin-canvas2imageplaugin_t116018

Any luck with saving snapshots to file on android mobile.

the example provided in C2 works on PC but not on my mobile (crosswalk)

do I have to enable any permissions on Intel XDK?

I searched this and it seems that I do not need to add any permission for saving to internal SD. so this should not be an issue.

EDIT1:

I tried enabling the following permissions on intel XDK but it did not work

READ_EXTERNAL_STORAGE

WRITE_EXTERNAL_STORAGE

then I tried enabling all crosswalk plugins, again did not work

so the question remains, why the browser plugin is not able to save snapshots on mobile devices?

EDIT2:

apparently, cordova does not support downloading files/images directly. but there is a plugin for this here:

in Intel XDK, Third party plugin -> get plugin from web

plugin name = "canvas2imageplugin"

plugin ID = "org.devgeeks.canvas2imageplugin"

tick checkbox: Plugin is located in the Apache Cordova Plugins Registry

we just need an expert on this forum to make a construct 2 plugin to enable it. anyone?