Save the image in the html canvas to the local device.

Save the image in the html canvas to the local device.

When you want to do this, you can:

Save js operations directly Save post back Save js operations directly

Ms provides an official solution. refer to the following:
Save the canvas image locally
Demo address

The results on IE10 are good, and Other IE versions are not tested.
Unfortunately, chrome and other browsers do not.

Save post back

Another solution is to retrieve the content in the canvas, post back to the server, and save the image locally by downloading the file.

In this way, I went back to the server again, and the data traffic was not too small (of course, it is still a small significance for the current network speed and server configuration, unless it is really a lot too large ), although it is really not good, I do not have a better solution.

If you do not need to edit canvas content (such as QR code), but dynamically generate images or images for display, you can also use programs such as GD on the server to generate memory images and display them to the client (or generate temporary server files and delete them when not needed ).
Compared with the above practice, this method will save the image processing on the server, it will be more negative to the server's cpu usage. In the case of client generation, distributed is not distributed.

Example (asp.net mvc-razor ):

@ Section scripts {<script type = "text/javascript" src = "~ /Scripts/jquery. qrcode. min. js "> </script> <script type =" text/javascript "src = "~ /Scripts/qrcode. min. js "> </script> <script type =" text/javascript "> var url =" @ Html. raw (Url. action ("CheckTicket", "MeetingCenter", new {area = "wxfuns", id = Model. id }). encodeUrlWithOauth (Model. wxAcct. appId) "; $ (" # qrcode "). qrcode ({// render: "canvas", // table | canvas mode width: 400, // width height: 400, // height text: url // any content}); // $ ("# qrcode "). qrcode ("@ ViewBag. url "); function saveAsLocalImage () {// If getElementById or $ (" # qrcode ") is used, an error is returned indicating that the toDataURL method var myCanvas = document is not supported. getElementsByTagName ('canvas ') [0]; var image = myCanvas. toDataURL ("image/png"); // This form is also dynamically generated using var f =$ ('# form_download '); // The name with "1" is to remind you that multiple key-value pairs can be created in the future var name1 = $ (''); Var val1 = $ (''); Name1.appendTo (f); val1.appendTo (f); f. submit (); // because this f is not dynamically generated, you need to clear this form; otherwise, the second submission will be problematic. F.html ("") ;}</script>}

Public ActionResult Download (FormCollection collection) {try {// same, naming with "1" is to remind you that multiple key-value pairs can be created in the future: string name1 = collection ["name1"]; string val1 = collection ["val1"]; if (string. isNullOrEmpty (name1) | string. isNullOrEmpty (val1) | (val1.StartsWith ("data: image/png; base64") = false) {return new EmptyResult ();} var base64 = val1.Substring (22 ); byte [] bytes = Convert. fromBase64String (base64); MemoryStream memStream = new MemoryStream (bytes); return File (memStream, "application/octet-stream", Server. urlEncode (name1 + ". png ");} catch (Exception ex) {return Content (ex. message );}}