js 将Html网页效果保存成图片

需要下载的效果图：

HTML

需要引用js：html2canvas.js

<div class="back" id="qrCode">
                        <div class="blu">
                            <div style="color:white;font-size:24px;text-align:center;padding-top:60px;">
                                <span>取号二维码</span>
                            </div>
                            <img id="srurl" width="260" height="260"style="margin-top:65px;margin-left:73px;" />
                            <div style="color:white;font-size:24px;text-align:center;padding-top:30px;">
                                <span>请使用微信扫一扫</span>
                            </div>
                        </div>
                        <div style="padding-top:20px;color:#01348b;font-size:26px;text-align:center">
                            <img src="~/Content/images/qh.png" width="50" height="50" />
                            <span>扫码取号</span>
                        </div>
                    </div>

　CSS

<style>
    .back {
         410px;
        height: 605px;
        background-color: white;
        border-radius: 20px;
        border: 1px solid #ccc;
        box-shadow: 6px 6px 6px #ccc;
        /*考虑浏览器兼容性*/
        -moz-box-shadow: 6px 6px 6px #ccc;
        -webkit-box-shadow: 6px 6px 6px #ccc;
    }

    .blu {
         410px;
        height: 520px;
        background-color: #0751d9;
        border-radius: 20px;
        border-bottom-left-radius: 0px;
        border-bottom-right-radius: 0px;
    }

    .zf {
         410px;
        height: 80px;
        margin-top: 80px;
        background-color: white;
        border-bottom-left-radius: 20px;
        border-bottom-right-radius: 20px;
    }
</style>

　JS

$('#lr_save_btn').on('click', function () {
                //将网页保存为本地图片
                //html2canvas(document.querySelector("#qrCode")).then(canvas => {
                //    //将canvas内容保存为文件并下载
                //    canvas.toBlob(function(blob) {
                //        saveAs(blob, "~/Resource/aaa.png");
                //    });
                //});
               //将网页保存为base64格式

                html2canvas($("#qrCode"), {
                    onrendered: function (canvas) {
                    var dataUrl = canvas.toDataURL();
                   }
                });

 });

完整代码块：

JS

//此处二维码为动态赋值，所以调用此方法[GetQrcodeSave]获取动态二维码并将其保存到本地，返回图片保存地址
$('#lr_save_btn').on('click', function () {
                $.lrSetForm(top.$.rootUrl + '/Coller/GetQrcodeSave', function (data) {
                    if (data.code != null) {//为二维码动态赋值var imgobj1 = document.getElementById("srurl");
                        imgobj1.src = data.code;
                        //获取要保存成图片的代码块
                        html2canvas($("#qrCode"), {
                             
                            onrendered: function (canvas) {
                               //将网页保存为base64
                                var dataUrl = canvas.toDataURL();
                                //调用保存文件方法，
                                $.ajax({
                                    url: '/HM_PCClient/Device/ImgTest',
                                    data: { "img": dataUrl },
                                    dataType: "json",
                                    type: 'POST',
                                    success: function (data) {
                                        learun.alert.success("文件保存成功");
                                    }
                                });
                            }
                        });
                    }
                });
               
            });

　　C#

using System.Threading;
using System.Windows.Forms;

#region 对文件进行选择保存文件窗口
        public ActionResult ImgTest(string img)
        {
            ShowSaveFileDialog(img);
            return Content(new ResParameter { code = ResponseCode.success, info = "1", data = "" }.ToJson());
        }
        public string ShowSaveFileDialog(string img)
        {
            string localFilePath = "";
            SaveFileDialog sfd = new SaveFileDialog();
            //设置文件类型 
            //sfd.Filter = "Excel表格（*.xls）|*.xls";
            sfd.Filter = "JPG图片文件（*.jpg）|*.jpg";
            //设置文件默认名称
            sfd.FileName = DateTime.Now.ToString("yyMMddhhmmss");
            //设置默认文件类型显示顺序 
            sfd.FilterIndex = 1;
            //保存对话框是否记忆上次打开的目录 
            sfd.RestoreDirectory = true;
            //点了保存按钮进入 
            Thread t = new Thread((ThreadStart)(() =>
            {
                if (sfd.ShowDialog() == DialogResult.OK)
                {
                    //获得文件路径 
                    localFilePath = sfd.FileName.ToString();
                    //获取文件名，不带路径
                    string fileNameExt = localFilePath.Substring(localFilePath.LastIndexOf("\\") + 1) + ".jpg";
                    string strbase64 = img.Substring(img.IndexOf(',') + 1);
                    strbase64 = strbase64.Trim('\0');
                    byte[] imageBytes = Convert.FromBase64String(strbase64);//保存图片
                    System.IO.File.WriteAllBytes(localFilePath, imageBytes);

                }
            }));
            t.SetApartmentState(ApartmentState.STA);
            t.Start();
            t.Join();
            return localFilePath;
        }
        #endregion