CODEWITHSUNDEEP
javascriptandroidcanvasibm-mobilefirst
arin1405
arin1405

Reputation: 677

How to save an HTML5 canvas element as an image?

I am using IBM Worklight 6.0 to develop a native mobile app.

I have one canvas element in the app which I need to save as an image file in the local storage of mobile device. The code is given below:

HTML:

<body>
<div id="sketch">
    <canvas id="paint"></canvas>
</div>
<input type="button" name="saveCanvas" value="Save" onclick="saveCanvas()">

    <script src="js/canvas.js"></script>
</body>

Java Script:

function saveCanvas() {

 var canvas = document.getElementById("paint");        
 var context = canvas.getContext("2d");                   

 var myimage = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream"); 
 window.location.href=myimage; 

}

I need a pop up window to allow user to save the image in local storage. Now the problem is, when I test the app in Worklight Mobile Browser Simulator, a pop up window opens to save the image but it does not work when I test it in Android Virtual Device or in my device.

Please help me to know how can I save my canvas as an image in local storage of the device.

Upvotes: 0

Views: 1363

Answers (1)

Idan Adar
Idan Adar

Reputation: 44516

Had this application been a web app which is not based on Worklight/Cordova, you could have used your code or this HTML5 Canvas example and it will indeed work...

However, when in the context of a Cordova app (or Worklight app), the Cordova WebView does not have "download permission". So you are required to use the Cordova File or FileTransfer API to save the converted image to the local storage.

You can also try to use this Cordova plug-in: Canvas2ImagePlugin

  • Because you are using Worklight 6.0, which uses Cordova 2.6, you will need to use v0.2 of the plug-in. This version is missing the Java implementation, so you'll need to copy it over from v0.4 and modify it somewhat I believe...

  • If you choose to upgrade to Worklight 6.1, which uses Cordova 3.1, you can use v0.5 of the plug-in that does not require anything other than what is written in the plug-in guidelines.

You can of course choose to write one of your own or fork the above...

Upvotes: 2

Related Questions