Save a canvas chart as a picture or PDF

Canvas picture of a good picture although can be todataurl () to the binary stream of the string format, the picture is a little larger can not be sent, of course, if the requirements are simple, you may add an image element on the page, the stream will be transferred directly to the image SRC can display the picture.

But most of the time we also want to pop up the Save box, save the image to our own desired path, or add some statistical and analytical information to the PDF together to save a PDF file, which needs to be processed in the background, two ways: the background of a new Web browser loading the current page, Then will get to the picture stream information sent to the foreground pop-up saved dialog box, background sent to the foreground is no character length limit, but this method is if you save the PDF, he is then put in the PDF, the picture is too long truncated; another way is to use the parameters to the background, the background with GDI + On the bitmap again, canvas can be achieved, the background of GDI + can also be implemented, and some implementations may be more convenient, the advantage of this method is that there is no picture size limit.

I have recently done a project with the second method of implementation, put the code:

1. Front code "Click Save Image Button":

        var width = Drawobject.getcanvas (). Width;var height = Drawobject.getcanvas (). Height;var figures = Drawobject.getcurrentfigures (); $.ajax ({url: "./warehouseprinthandler.ashx?action=drawpng&width=" + width + " &height= "+ Height,type:" POST ", Data:" datas= "+ json.stringify (figures), success:function (FileName) {$ (' # Frameimage '). attr (' src ', "./warehouseprinthandler.ashx?action=getpng&filename=" + fileName);},error:function ( ERR) {alert ("Print failed.");});

The foreground needs to draw the information through the Ajax to the backstage of a handler, handler is responsible for receiving parameters, and the picture is saved to an IIS shared path, the picture name back to the foreground, the front desk with a size of 0 iframe to reload the page, Use this picture name to go back to the background to take the picture stream and pop up the Save prompt box.

2. IFRAME Code

<iframe width= "0" height= "0" id= "frameimage" name= "frameimage" frameborder= "0" scrolling= "no" ></iframe>

3. Backstage Code

if (action. ToString () = = "Drawpng") {if (context. request["datas"] = = null) {return;} Double w = double. Parse (context. request["width"]. ToString ());d ouble h = Double. Parse (context. request["Height"]. ToString ()); string allfigures = Context. Server.urldecode (context. request["Datas"]. ToString ()); list<drawmodel> figurelist = aspsoft.warehouse.util.jsonhelper.jsondeserialize<list<drawmodel>> (Allfigures); warehousedrawing drawing = new Warehousedrawing (); string fileName = Drawing. Getimageurl (int) w, (int) h, figurelist, FilePath), context. Response.Write (fileName);//ms. WriteTo (response.outputstream); context. Response.End ();} else if (action. ToString () = = "Getpng") {string fileName = context. request["FileName"]. ToString (); string fullfilename = FilePath + "/" + Filename;context. Response.appendheader ("Content-disposition", String. Format ("Attachment; Filename={0}.png; ", Httputility.urlencode (DateTime.Now.ToString (" Yyyymmdd_hhmmss "), System.Text.Encoding.UTF8)) ; context. Response.WriteFile (fulLfilename); context. Response.End ();}

Getimageurl is a concrete painting method, the picture is saved to a shared path, must be the shared path that IIS can access, not the local path, the second request is to obtain a PNG, is actually to obtain the path of PNG, IFrame loading the path of the picture will automatically get the picture flow information, which is the browser automatically processing, the key here is to add attachment, to be sent as an attachment.

This method must send two requests to be completed later, because if the first time through the SRC method of the IFRAME request picture, because only through the QueryString request, cannot pass large data, because the need to paint the amount of data is also relatively large, must first through the AJAX request. The same goes for PDF, which is to put bitmap information in a PDF.

Save a canvas chart as a picture or PDF