Node and canvas save (download) images

Source: Internet
Author: User
Tags bmp image

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.








Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.