javascript 截图html并保存

原创已于 2023-03-22 11:49:35 修改 · 481 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

收录于

前端

于 2023-03-22 11:45:46 首次发布

前端代码

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta charset="utf-8" />
    <meta name="layout" content="main">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />


    <style type="text/css">
        html {
            height: 100%;
        }

        body {
            height: 100%;
        }

        #box {
            color: green;
            font-size: 30px;
            border: 1px solid #ccc;
            background: #aaa;
            width: 300px;
            height: 100%;
        }

        
    </style>
</head>
<body>
    <input type="button" value="下载标签到本地" id="saveData">
    <div class='box' id="qrcode"></div>
    <script type="text/javascript" src="../JavaScript/UserControl/jquery-1.4.2.min.js"></script>
    <script src="../JavaScript/QrCode/qrcode.js"></script>
    <script type="text/javascript" src="http://html2canvas.hertzen.com/dist/html2canvas.js"></script>
    <script src="https://polyfill.io/v2/polyfill.min.js"></script>
    <script type="text/javascript">

        new QRCode(document.getElementById("qrcode"), {
            text: "11111111",
            width: 70,
            height: 70,
            colorDark: "#000000",
            colorLight: "#FFFFFF",
            correctLevel: 3 
        });
        //保存截图数据
        $('#saveData').click(function () {
            for (var i = 0; i < AssList.length; i++) {
                
                var node = document.getElementById("#qrcode")
                //#qrcode:要截图的DOM元素
                //useCORS:true:解决跨域问题
                html2canvas(node, { useCORS: true }).then(function (canvas) {
                    var imgData = canvas.toDataURL();
                    //发送数据到后台
                    Upload(imgData);
                })
            }
            
        })
    </script>
</body>
</html>

后台接收数据并保存

public Response<string> Base64ToImage(string dataURL)
		{
			try
			{
				string date = DateTime.Now.ToString("yyyyMMdd");
				string Url = HttpContext.Current.Server.MapPath("~/Files/Uploads/" + date + "");//项目路径
				string QrUrl = HttpContext.Current.Server.MapPath("~/Files/Uploads/" + date + "/QrCode");//图片存放路径
				string Name = Guid.NewGuid().ToString() + ".png";
				dataURL = dataURL.Replace("data:image/png;base64,", "").Replace("data:image/jgp;base64,", "").Replace("data:image/jpg;base64,", "").Replace("data:image/jpeg;base64,", "");//将base64头部信息替换
				byte[] bytes = Convert.FromBase64String(dataURL);
				MemoryStream memStream = new MemoryStream(bytes);
				System.Drawing.Image mImage = System.Drawing.Image.FromStream(memStream);

				Bitmap bp = new Bitmap(mImage);

				if (!Directory.Exists(Url))//判断路径是否存在
				{
					Directory.CreateDirectory(Url);//创建路径
				}
				if (!Directory.Exists(QrUrl))//判断路径是否存在
				{
					Directory.CreateDirectory(QrUrl);//创建路径
				}
				bp.Save(QrUrl + "\\" + Name, System.Drawing.Imaging.ImageFormat.Png);//保存到服务器路径
				
				return InvokeResult.Success<string>("");

			}
			catch (Exception e)
			{
				return InvokeResult.Fail<string>(e.Message);
			}
		}

标签

#javascript #html #前端 #c#