时间戳

首页 > 解决方案 > 如何在 asp.net mvc 中使用 html2canvas？

javascript - 如何在 asp.net mvc 中使用 html2canvas？

问题描述

当 Web 应用程序在客户端运行时，我想截取 HTML div 标签并将图像存储在服务器上。我阅读了很多关于 html2canvas 的文章并尝试实现代码，但是保存在服务器上的图像变成了全黑。我尝试将背景颜色设置为白色，但随后它变成了全白。简而言之，图像是空白的。因此，任何帮助将不胜感激。谢谢你。

html

<div id="viewer-container" class="sticky-top" style="height:70%;top:25%;width:41%;left:38%;">
    <canvas id="viewer-canvas"></canvas>
</div>

JS

    html2canvas(document.getElementById("viewer-container"), {
        onrendered: function (canvas) {
            var image = canvas.toDataURL("image/png");

            image = image.replace('data:image/png;base64,', '');

            $.ajax({
                type: "POST",
                url: '@Url.Action("TakeImage", "Home")',
                data: { base64data: image },
                success: function (result) { alert(result); }
            });
        }
    })

控制器

        [HttpPost]
        public ActionResult TakeImage()
        {
            if (Request.Form["base64data"] != null)
            {
                string image = Request.Form["base64data"].ToString();
                byte[] data = Convert.FromBase64String(image);
                var path = Path.Combine(Server.MapPath("~/BIM"), "testimage.png");
                System.IO.File.WriteAllBytes(path, data);
            }
            return View();
         }

标签： javascriptc#asp.net-mvchtml2canvas

解决方案

推荐阅读