CODEWITHSUNDEEP
c#javascriptjqueryasp.net-mvcpost
user2837849
user2837849

Reputation: 337

How to send screenshot to controller?

I`m using html2canvas library to get a snapshot from page, and how i can get that image in my C# Controller?

VIEW

$("#button").click(function () {
    var image;
    html2canvas(document.body, {
        onrendered: function (canvas) {
            image = convertCanvasToImage(canvas);
            $.post("../../HomeController/SetScreenShot", {
                sendImage: image
            }, function () {});
        }
    });
});

CONTROLLER

public void SetScreenShot()
{
    HttpPostedFileBase file = new HttpPostedFileBase();
    file = Request.Form["sendImage"].ToString();
}

Upvotes: 2

Views: 1663

Answers (2)

jeanie77
jeanie77

Reputation: 544

Simplyfing, the input hidden can be skipped. This will do the trick:

$("#button").click(function () {
    html2canvas(document.body, {
        onrendered: function(canvas) {
            var image = canvas.toDataURL("image/png");
            image = image.replace('data:image/png;base64,', '');
            $.ajax({ 
                type: "POST", 
                url: '../../HomeController/SaveSnapshot',
                dataType: 'text',
                data: { base64data : image },
                success: function(result) { alert(result); }
            });
        }
    });

CONTROLLER (a modified version, that will save the image to a mapped folder):

    [HttpPost]
    public ActionResult SaveSnapshot()
    {
        bool saved = false;
        if (Request.Form["base64data"] != null) {
            string image = Request.Form["base64data"].ToString();
            byte[] data = Convert.FromBase64String(image);
            var path = Path.Combine(Server.MapPath("~/Upload"), "snapshot.png");
            System.IO.File.WriteAllBytes(path, data);
            saved = true;
        }

        return Json(saved ? "image saved" : "image not saved");
    }

Upvotes: 2

user2837849
user2837849

Reputation: 337

I find out how to do it, just need to append that image in hidden input on page, and send it from image src

VIEW

<input type="hidden" id="hiddenScreen" />
<script>
    function convertCanvasToImage(canvas) {
                var image = new Image();
                image.src = canvas.toDataURL("image/png");
                image.id = "canvasimage";
                return image;
            }

      $("#button").click(function () {
                    var image;
                    var data;
                    html2canvas(document.body, {
                        onrendered: function(canvas) {
                            image = convertCanvasToImage(canvas);
                            $("#hiddenScreen").append(image);
                            data = $('#canvasimage').attr('src');
                        }
                    });
                     $.ajax({ 
                            type: "POST", 
                            url: '../../HomeController/SetScreenShot',
                            dataType: 'text',
                            data: {
                                base64data : data
                            }
                        });
</script>

CONTROLLER

public void SetScreenShot()
        {
            if (Session["screenShot"] == null) Session.Add("screenShot", "");
            Session["screenShot"] = Request.Form["base64data"].ToString();
        }

Upvotes: 1

Related Questions