how to save canvas data to file

Question

i am using node.js to save canvas to image img in writeFile is extractedby using toDataURL on my canvas element. it doenot save file here is my code

var fs = IMPORTS.require('fs'); var path = IMPORTS.require('path'); path.exists('images/', function(exists){     if (exists) {          fs.writeFile('images/icon.png', img, function(err){             if (err)                  callback({                     error: false,                     reply: err                 });             console.log('Resized and saved in');             callback({                 error: false,                 reply: 'success.'             });         });     }     else {         callback({             error: true,             reply: 'File did not exist.'         });     }  });     

Answer 1

Here is a literal example of how to save canvas data to a file in Nodejs. The variable img is a string generated by canvas.toDataURL(). I've assumed you already know how to POST that string from the browser to your Nodejs server.

HTML snippet that generates the sample image I used:

<canvas id="foo" width="20px" height="20px"></canvas> <script> var ctx = $('#foo')[0].getContext('2d'); for (var x = 0; x < 20; x += 10) {     for (var y = 0; y < 20; y += 10) {         if (x == y) { ctx.fillStyle = '#000000'; }         else { ctx.fillStyle = '#8888aa'; }         ctx.fillRect(x, y, 10, 10);     } } console.log($('#foo')[0].toDataURL()); </script> 

Nodejs snippet to decode the base64 data and save the image:

const fs = require("fs").promises;  (async () => {      // string generated by canvas.toDataURL()   const img = "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0"       + "NAAAAKElEQVQ4jWNgYGD4Twzu6FhFFGYYNXDUwGFpIAk2E4dHDRw1cDgaCAASFOffhEIO"       + "3gAAAABJRU5ErkJggg==";      // strip off the data: url prefix to get just the base64-encoded bytes   const data = img.replace(/^data:image\/\w+;base64,/, "");      const buf = Buffer.from(data, "base64");   await fs.writeFile("image.png", buf); })(); 

Output: