Node and canvas save (download) images

Recently, I am working on a function to save it as an image.

In fact, this function is quite simple. You can use todataurl () conversion, or directly use the canvas2image. js and base64.js scripts to implement the function,

Some important code is as follows:

// Use JavaScript code to download var imagedate = document. getelementbyid ("canvas "). todataurl ("image/PNG"); window. location. href = "image/octet-stream" + imagedate; // search for these two scripts var ocanvas = document. getelementbyid ("canvas"); canvas2image. saveaspng (ocanvas); // This will prompt you to save the PNG Image canvas2image. saveasjpeg (ocanvas); // This will prompt you to save the jpg image canvas2image. saveasbmp (ocanvas); // This will prompt you to save the BMP image // return a  element var oimgpng = canvas2image containing the PNG image. saveaspng (ocanvas, true); // returns a  element var oimgjpeg = canvas2image that contains a jpg image. saveasjpeg (ocanvas, true); // returns a  element var oimgbmp = canvas2image that contains BMP images. saveasbmp (ocanvas, true); // all of these functions can accept the parameters of height and width. // you can adjust the image size. // Save the canvas as a PNG canvas2image. saveaspng (ocanvas, false, 100,100 );

In fact, if only PNG is used, it would be enough to use native code. Of course, if you need many functions, then the two scripts will be enough for you.

However, the road to life will not be so smooth (every time programming is like this, it is so smooth, there must be a problem), ie reports an error, my project is actually based on IE, every time a script is run, a "Script Error -- error: the data area passed to the system call is too small! ". The cause of this error isIn the Data URL protocol, it takes too long to convert an image to a base64 encoded string.IE will report an error. (If you cannot find a solution, please let us know)

In desperation, you can only save the image through the background node, and then return the address to achieve the download effect (node file API is quite easy to use ).

Directly run the Code:

// Front-end client code var imageurl = document. getelementbyid ("canvas "). todataurl (); $. post ("/saveimage", {image: imageurl}, function (data) {If (Data = "OK") {alert ("successful ")}}) // node background code app. post ('/saveimage', function (req, Res) {var imgdata = req. body. image, base64data = imgdata. replace (/^ data: Image \/\ W +; base64,/, ""), databuffer = new buffer (base64data, 'base64'); FS. writefile ("out.png", databuffer, function (ERR) {If (ERR) {res. send (ERR);} else {res. send ("OK ");}});});

The only thing to note here is that the base64 encoding received by the new buffer should be removed from "data:". For example, I use canvas. "data: image/PNG; base64, aaaaaaaaaaaaaaaaaaa ",

The new buffer should receive "aaaaaaaaaaaaaaaaaaaaaaa ",

            base64Data = imgData.replace(/^data:image\/\w+;base64,/, ""),

This is the purpose. Nothing else can be said.

Finally, I am a front-end engineer ~~, I recently turned into a full-stack engineer. Fortunately, it's node, which I like. Well, I will become a javascript engineer in the future.