Create .png image from value sent from client [node]

Question

I am creating a highchart client side. What I need to do is to get a png of that chart and store it server side.

Currently, I have produced the highchart, got the SVG and converted it to a PNG (shown below):

function saveThumbnail(graph_name, chart) {
    canvg(document.getElementById(graph_name + '_thumb'), chart.getSVG());
    var chart_Canvas = document.getElementById(graph_name + '_thumb');
    var chart_Img = chart_Canvas.toDataURL("image/png");

    $('#graph_name').val(graph_name);
    $('#graph_png').val(chart_Img);
    $('#imageForm').submit();
}

This is my #imageForm:

<form action="/overview" id="imageForm" method="post">
    <input id="graph_name" name="graph_name" type="hidden" value=""/>
    <input id="graph_png" name="graph_png" type="hidden" value=""/>
</form>

So I have set the value of the PNG to that input which was what was suggested here and I have posted that value back to the server.

Server side:

In the function below, I am trying to create/write to a file with the name of the graph PNG sent back and trying to write that PNG into that file.

function createFiles(graphName, graphPNG, callback) {
    fs.writeFile(graphDir + graphName + ".png", graphPNG, function(err) {
        if (err) {
            console.log(err);
        } else {
            console.log('File was saved!');
        }
    });
    callback(body);
}

Is there anyway to achieve this?

Note: Cannot have the highcharts server side. It was a decision made earlier and we are unable to go back.

Are you getting an error? Or is the file just containing the wrong data? What is the result of your current attempts? — ebyrob, Dec 03 '15 at 17:09
@ebyrob if I have my code like it is above, the serves spits out a 500 error. The file has been created but shows the error `Image not loaded` when I click to view it — wmash, Dec 03 '15 at 17:11
Open the file with text and hex editors. Sounds like you need to convert what you're uploading into binary and save it as a proper PNG file. — ebyrob, Dec 03 '15 at 17:13
@ebyrob opened with Atom and small icon displays. Open with notepad and it's in Ascii. How best to convert it to binary? — wmash, Dec 03 '15 at 17:21
@ebyrob I have attempted using `atob()` to go straight to PNG from base64 but no luck — wmash, Dec 03 '15 at 17:34

score 1 · Answer 1 · answered Dec 03 '15 at 16:49

1

You don't specify data type in fs.writeFile:

fs.writeFile(graphDir+graphName + ".png", graphPNG, 'binary', function(err){

binary or base64 switch your data ;)

answered Dec 03 '15 at 16:49

Jules Goullee

571
4
11

Tried both and still no luck :( – wmash Dec 03 '15 at 16:55
If you console.log(graphPNG) what had you ? – Jules Goullee Dec 03 '15 at 17:00
It is a very long base64 encoding..basics of: `data:image/png;base64,`... _and then continues with loads of Ascii_ – wmash Dec 03 '15 at 17:03
`try fs.writeFile(graphDir+graphName + ".png", graphPNG, 'base64', function(err){` – Jules Goullee Dec 06 '15 at 04:06

Create .png image from value sent from client [node]

1 Answers1