1

I want to take a screenshot of an HTML div tag when the web application is running on the client-side and store the image on the server. I read many articles on html2canvas and tried to implement the code however the image that is getting saved on the server is turning up all black. I tried by setting the background color to white but then it is turning up all white. In short, the image is blank. So any help will be appreciated. Thank you.

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); }
            });
        }
    })

Controller

        [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();
         }
Kunal
  • 181
  • 2
  • 16
  • Have you tried it without 'onrendered'? I suggest following the example on https://github.com/niklasvh/html2canvas and posting it in a browser-based editor so we can quickly replicate it. – Olaf Jul 13 '20 at 08:51
  • I did try without onrendered but I got the same result. I will see if following the examples helps me out. – Kunal Jul 13 '20 at 09:29
  • I actually figured something out. I want to take the image of a webgl model that i am rendering on my web page which is inside the div tag. But that model is not getting captured with html2canvas. If i select some other div tag then the image is working perfectly. Is there any different way to capture the 3d model? – Kunal Jul 13 '20 at 09:37
  • This could be an answer: https://stackoverflow.com/a/55762772/6803592 – Olaf Jul 14 '20 at 07:15

0 Answers0