Save images in html canvas to local_html/css_WEB-ITnose

When you want to do this, you can:

js direct operation save

post back save

js directly operates and saves

ms gives the official solution, refer to the following:
Save canvas image locally
demo address

The effect on IE10 is still good. Other IE versions have not been tested.
Unfortunately, other browsers such as chrome do not support it.

Saving post back

Another solution is to take out the content in the canvas, post back to the server, and then use the file download method to save the image locally.

In this way, I have to go back to the server and the data traffic is not too small (of course, it is still small for the current network speed and server configuration, unless it is really very large), although it is indeed not good. But I don't have a better solution yet.

If you do not need to edit the canvas content (such as QR code, etc.), but just dynamically generate pictures or pictures for display, you can also directly use server-side programming such as GD to generate memory picture display. to the client (or generate a temporary server file and delete it when no longer needed).
Compared with the above method, this method leaves the image processing on the server, which will put a higher burden on the server's CPU usage. When generated on the client side, distribution is not a small factor ^_^

Example (asp.net mvc - razor):

<form method="post" action="../Download" target="_blank" style="display:none" id="form_download"></form>@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方式 width: 400, //宽度 height: 400, //高度 text: url //任意内容 }); //$("#qrcode").qrcode("@ViewBag.url"); function saveAsLocalImage() { // 如果使用getElementById或者$("#qrcode")的方式，会报错说不支持toDataURL方法 var myCanvas = document.getElementsByTagName('canvas')[0]; var image = myCanvas.toDataURL("image/png"); // 这个form动态生成也行 var f = $('#form_download'); // 命名带上“1”是为了提醒以后可以做成多个的键值对 var name1 = $('<input name="name1" type="text" value="@Html.Raw(Model.Title)" />'); var val1 = $('<input name="val1" type="text" value="' + image + '" />'); name1.appendTo(f); val1.appendTo(f); f.submit(); // 因为这个f不是动态生成的，需要清空这个form，否则第二次提交就有问题了。 f.html(""); } </script>}

public ActionResult Download(FormCollection collection){    try    {        // 一样的，命名带上“1”是为了提醒以后可以做成多个的键值对        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);    }}