1

I'm trying to store a canvas in my divice, reading in internet i found that i have to convert my canvas to Base64, nice, i did it...

Then i searched a function to store a base64 with cordova and just found a function that stores a Blob object, so i searched again and found a function that converts my base64 to Blob, and nice again, it apparently works, but when i go to the file explorer i'm just getting a file that says in plain text (and changing its extension to .txt ):

[object Uint8Array][object Uint8Array]

This is my final code:

   function draw() {
        window.requestFileSystem(window.TEMPORARY, 5 * 1024 * 1024, function (fs) {
        console.log('file system open: ' + fs.name);
        getSampleFile(fs.root);
        }, errorHandler);
   }


  function getSampleFile(dirEntry) {

  var canvas = document.getElementById("mycanvas");
   if (canvas.getContext) {
     var ctx = canvas.getContext("2d");
     //...some code to customize the canvas

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

     var x = Math.floor((Math.random() * 100000) + 1);
     saveFile(dirEntry, b64toBlob(mURI,"image/png","512") , x+".png");
            }

  }

  function b64toBlob(b64Data, contentType, sliceSize) {
    contentType = contentType || '';
    sliceSize = sliceSize || 512;
    console.log('Estoy en B64');

    var byteCharacters = atob(b64Data);
    var byteArrays = [];

    for (var offset = 0; offset < byteCharacters.length; offset += sliceSize) {
        var slice = byteCharacters.slice(offset, offset + sliceSize);

        var byteNumbers = new Array(slice.length);
        for (var i = 0; i < slice.length; i++) {
            byteNumbers[i] = slice.charCodeAt(i);
        }

        var byteArray = new Uint8Array(byteNumbers);

        byteArrays.push(byteArray);
    }
    console.log('ByteArrays'+byteArrays);
    var blob = new Blob(byteArrays, {type: contentType});

    return blob;
  }


function saveFile(dirEntry, fileData, fileName) {
    console.log('1. DIRENTRY:'+dirEntry+', 2 FILEDATA:'+fileData+',3 FILENAME:'+fileName);
      dirEntry.getFile(fileName, { create: true, exclusive: false }, function (fileEntry) {

          writeFile(fileEntry, fileData);

      }, errorHandler);
  }

  function writeFile(fileEntry, dataObj, isAppend) {

fileEntry.createWriter(function (fileWriter) {

    fileWriter.onwriteend = function() {
        console.log("Successful file write...");
    };

    fileWriter.onerror = function(e) {
        console.log("Failed file write: " + e.toString());
    };

    fileWriter.write(dataObj);
});
}

I hope you can help me, the main goal of this is to store a picture with a watermark, so if you have another idea please tell me, thanks

Community
  • 1
  • 1
zgluis
  • 3,021
  • 2
  • 17
  • 22

1 Answers1

0

Since you need to add a water mark you may refer following links

W3School Link
Jsfiddle Link

EDITED

var yourCanvas = document.getElementById('yourCanvasId');
var context = yourCanvas.getContext('2d');
var waterMarkImg = document.getElementById("waterMarkImageId");
context.drawImage(waterMarkImg, 0, 0, yourCanvas.width, yourCanvas.height);
var basse64 = yourCanvas.toDataURL();
Charitha Goonewardena
  • 4,418
  • 2
  • 36
  • 38
  • Thanks for your answer @Charitha Goonewardena , but i'm already doing that... the problem is storing that canvas element as a png or jpeg file – zgluis Jun 07 '16 at 18:52
  • You can simply convert your canvas to a base64 String. I have edited my answer. Hope its helpful. anything need buzz me =) good luck – Charitha Goonewardena Jun 08 '16 at 03:32
  • Thanks again @Charitha Goonewardena, that is in the code above, what i need is a function to store that base64 string as a .jpg or .png, I was searching in cordova documentation but could not find something that fits it, i'll be very grateful if you can help me – zgluis Jun 09 '16 at 12:24
  • Are you going to do it in javascript ? I have implemented the backend part using C#. I can help with that – Charitha Goonewardena Jun 10 '16 at 03:27