CODEWITHSUNDEEP
javascriptmeteorbase64
Adrien
Adrien

Reputation: 2934

Convert base64 to png in meteor app

I have a meteor application and in this one I get a base64 image. I want to save the image on a Digital Ocean instance, so I would convert it in a png or an other image format and send it to the server to get an url of the image. But I didn't find a meteor package that does this.

Do you know how I can do that ?

Upvotes: 1

Views: 581

Answers (3)

Adrien
Adrien

Reputation: 2934

I solved my problem using fs.writeFile from File System.

This is my javascript code on client side, I got a base64 image (img) from a plugin and when I click on my save button, I do this :

$("#saveImage").click(function() {
    var img = $image.cropper("getDataURL")
    preview.setAttribute('src', img);
    insertionImage(img);
});

var insertionImage = function(img){
    //some things...
    Meteor.call('saveTileImage', img);
    //some things...
}

And on the server side, I have :

Meteor.methods({
    saveTileImage: function(fileData) {
      var fs = Npm.require('fs');
      var path = process.env.PWD + '/var/uploads/';

      base64Data  =   fileData.replace(/^data:image\/png;base64,/, "");
      base64Data  +=  base64Data.replace('+', ' ');
      binaryData  =   new Buffer(base64Data, 'base64').toString('binary');
      var imageName = "tileImg_" + currentTileId + ".png";
      fs.writeFile(path + imageName, binaryData, "binary", Meteor.bindEnvironment(function (err) {
          if (err) {
                  throw (new Meteor.Error(500, 'Failed to save file.', err));
                } else {
                  insertionTileImage(imageName);
                }
        }));
    }
});


var insertionTileImage = function(fileName){
    tiles.update({_id: currentTileId},{$set:{image: "upload/" + fileName}});
}

So, the meteor methods saveTileImage transform the base64 image into a png file and insertionTileImage upload it to the server.

Upvotes: 1

msj121
msj121

Reputation: 2842

I was running into a similar issue.

run the following:

meteor npm install --save file-api

This will allow the following code on the server for example:

import FileAPI from 'file-api';
const { File } = FileAPI;

const getFile = function(name,image){
  const i = image.indexOf('base64,');
  const buffer = Buffer.from(image.slice(i + 7), 'base64');
  const file = new File({buffer: buffer, name, type: 'image/jpeg'});
  return file;
}

Simply call it with any name of file you prefer, and the base64 string as the image parameter.

I hope this helps. I have tested this and it works on the server. I have not tested it on the client but I don't see why it wouldn't work.

Upvotes: 1

Alisson Oliveira
Alisson Oliveira

Reputation: 11

BlobUrl, would it be a better option for you?

Save the images to a server as you like in base64 or whatever, and then when you are viewing the image on a page, generate the blobUrl of it. The url being used only at that time, preventing others from using your url on various websites and not overloading your image server ...

Upvotes: 0

Related Questions