Saving canvas image to server ASP.NET mvc

Question

What I am trying to do is to capture an image and then save it on the server side. So far, the image was only being saved on the client side.

<script>


    html2canvas(document.querySelector("body")).then(canvas => {
        var img = canvas.toDataURL("image/png")
        var img = canvas.toDataURL("image/png").replace("image/png", "image/octet-stream");
        ///location.href = img;



        $.ajax({
            type: 'POST',
            url: "UserHome/UploadImage",
            data: '{ "imageData" : "' + img + '" }',
            contentType: 'application/json; charset=utf-8',
            dataType: 'json',
            success: function (msg) {
                alert('Image saved successfully !');
            }
        });

</script>

UserHomeController:

static string path = @"E:\XXXXX\XXXXXXX\";

 [WebMethod()]
        public static void UploadImage(string imageData)
        {
            string fileNameWitPath = path + DateTime.Now.ToString().Replace("/", "-").Replace(" ", "- ").Replace(":", "") + ".png";
            using (FileStream fs = new FileStream(fileNameWitPath, FileMode.Create))
            {
                using (BinaryWriter bw = new BinaryWriter(fs))
                {
                    byte[] data = Convert.FromBase64String(imageData);//convert from base64
                    bw.Write(data);
                    bw.Close();
                }
            }
        }

I have followed this tute: http://www.dotnetfunda.com/articles/show/1662/saving-html-5-canvas-as-image-on-the-server-using-aspnet

Why isn't it saving the image soon as the page is done loading? Although, It is displaying the image in another tab if I uncomment the following line and removing the ajax:

///location.href = img;

Furthermore, I want to know if it is possible to capture the screen even if the browser is minimized? or any way to get that done?

Updated:

So I have successfully saved the screenshot to my server side, but the question remains, how do I capture the screen when the browser is minimized? I run the script and minimize the browser but it still captures the browser image and saves it to the server folder. Is there anyway I can work to capture the image of the screen outside the browser now?

Looks like you have problem sending file. Try answer from [here](https://stackoverflow.com/questions/5392344/sending-multipart-formdata-with-jquery-ajax). — sphirate.thremer, Dec 27 '17 at 11:26

score 0 · Answer 1 · answered Dec 27 '17 at 11:27

0

The tutorial is using .net web forms which works a little differently to MVC.

I would try replacing the [WebMethod()] decoration with [HttpPost] and return an ActionResult

[HttpPost]
public ActionResult UploadImage(string imageData)
{
    // do stuff
    return new ActionResult();
}

You may find it useful to look at the network tab in the browser dev tools to see what the response from the server is. I suspect right now it is throwing a 500 error.

answered Dec 27 '17 at 11:27

Tom Elmore

1,980
15
20

I tried this with a few other amendments to the code. Please see the Updated question. – Dec 27 '17 at 12:40
Glad you got the controller working. You might get better results with that as another question. Im not aware of an API that can do that since it is outside the browsers sandbox. A plugin might be needed. – Tom Elmore Dec 27 '17 at 19:55

score -1 · Answer 2 · answered Dec 27 '17 at 11:47

You should send a byte array to the server, where byte array is your image. For example you can check here, how to get blob from canvas.

On client-side: let formData = new FormData(); formData.append('files[0]', someBlob);// send formData

On server side : var form = await Request.ReadFormAsync(); var file = form.Files.First(); var bytes = file.OpenReadStream().ToBytes();

Saving canvas image to server ASP.NET mvc

2 Answers2