Languages

Menu
Sites
Language
Download file from dataURL

I have a web application with a Canvas element and I am required to save the image currently in the canvas to the Device at a preferred location.

I have obtained the dataURL on clicking the save button and trying to download the image.

var dataURL = canvas.toDataURL();
document.getElementById("test").setAttribute("href",dataURL);
document.getElementById("test").setAttribute("download","image.png");
document.getElementById("test").click();

I also tried

window.open(canvas.toDataURL,"tempimage.png");

which works in browser but is not working in the app.

 

Any suggestions or solution on How to download as an image the content under canvas tag?

List

Responses

7 Replies
AVSukhov

Hello,

Try to use following:

var dirName;
tizen.filesystem.resolve("Images", function(dir) {
        dirName = dir;
      }, function(err) {
        alert("Could not resolve directory " + fs.dirName + ": " + err.message);
      }, "rw");
dirName.createFile(fileName);
var file = dirName.resolve(fileName);
file.openStream('w', function(fileStream) {
        var data = canvas.toDataURL().replace("data:image/png;base64,", "");
        fileStream.writeBase64(data);
        fileStream.close();
}

After this call scanFile from Content API.

For more info please see FyleSystem API and Content API in documenatation.

Nguyen Ly

Did you success, Mr Ekka? Please share your status.

AVSukhov

Hello,

Did you try sample code above?

You can store you canvas using FileSystem API.

Nguyen Ly

Hello Mr AVSukhov.

Thanks for reply me very soon. :)

Yes I tried your sample code.

But error accurs in this function: 

dirName.createFile(fileName);

The error says that: it can not create file name.

I am coding tizen web app for Gear 2, using tizen wearable 1.0.0

Marco Buettner

did you define the variable "fileName"? :D

AVSukhov

Hello,

Try this:

var dirName = "Images",
    fileExt = ".png",
    fileName = "test",
    file = null;

tizen.filesystem.resolve(dirName.toLowerCase(), function(dir){
    dir.createFile(fileName + fileExt);
    file = dir.resolve(fileName + fileExt);
    file.openStream('w', function(fileStream) {
        var dataURL = drawing.getCanvasRender().toDataURL().replace("data:image/png;base64,", "");
        fileStream.writeBase64(dataURL);
        fileStream.close();

        /* Scan created file in folder. This allows to create or update a content
         * in the content database. */
        tizen.content.scanFile(file.toURI(), function() {
          alert('scanning is completed. database refreshed');
        }, function(err) {
          alert('The following error occurred: ' + err.name);
        });
    }, function(err) {
      console.log("Could not open file stream: " + err.message);
    });
}, function(err) {
    alert("Could not resolve directory.");
}, "rw");

 

Nguyen Ly

It works, AVSukhov.

Thanks for greate help.

Now image is created in images folder. But with black background, while my cavas is white background.

I will resolve the rest.

Thanks in advance, AVSukhov