0

So i have an image that is read via the FileReader with the following code:

var reader = new FileReader();

reader.onload = function (e) {
  var canvas = document.createElement("canvas");
  var context = canvas.getContext("2d");
  var imageObj = new Image();
  imageObj.src  = e.target.result;
  imageObj.onload = function(){
    //
    canvas.width = this.width;
    canvas.height = this.height;
    // Move them before drawing anything.
    context.drawImage(imageObj, 0,0);
    context.font = "40pt Calibri";
    context.fillText("My TEXT!", 20, 20);
    console.log(e.target.result);
    console.log(canvas.toDataURL("image/jpeg"));
    BuildingService.addFile({file: file, filename: guid});
    category.Pictures.push({offlineFoto: canvas.toDataURL(), FileNameOnDevice: guid});
  };

    leftToProcess--;
    if (leftToProcess == 0) {
        $scope.loadingCat = false;
        $scope.loadingSubCat = false;
    }
    $scope.$apply();
};
reader.readAsDataURL(file);

Then on the line where I do BuildingService.addFile() I add the file, but now it still contains the original data of that file.

But I have no clue on how to modify the file object, that the new base64 image data is in the file.

So how would you do this?

Kiwi
  • 2,713
  • 7
  • 44
  • 82
  • you can't modify the file object. Your `BuildingService` should accept the base64 image data for you to receive the modified data – anurupr Aug 19 '15 at 12:26
  • Hmm the `BuildingService` just accepts a `File()` maybe then make a new `File`? – Kiwi Aug 19 '15 at 12:27
  • there is no cross-browser solution to do that. see [http://stackoverflow.com/questions/8390855/how-to-instantiate-a-file-object-in-javascript](http://stackoverflow.com/questions/8390855/how-to-instantiate-a-file-object-in-javascript) – anurupr Aug 19 '15 at 12:35

0 Answers0