How to upload canvas to project's folder using javascript and mvc

user_4850568 0
Viewed 344

I would like to save the my canvas into my project's folder 'Upload', so trying to convert it into image and then sending it to code behind and saving. But its getting whole web page screenshot not just canvas.

This is my javascript code :

html2canvas(document.body, {onrendered: function (canvas) {
var mergedImage = canvas.toDataURL("image/png");
mergedImage = mergedImage.replace('data:image/png;base64,', '');
var param = { imageData: mergedImage };
$http({
        method: 'POST',
        url: '/Admin/MyController/UploadImage',
        data: JSON.stringify(param),
        dataType: 'JSON',
        headers: { 'content-type': 'application/json' }
     }).then(function (response) {
 alert('Your photos successfully uploaded!');
});
}
});

This is my c# code in mvc controlle's file: 

[HttpPost]
        public ContentResult UploadImage(string imageData)
        {
            try
            {
                string fileNameWithPath = Server.MapPath("~/Images/SomeFolder/custom_name.png");
                if (!Directory.Exists(fileNameWithPath))
                {
                    using (FileStream fs = new FileStream(fileNameWithPath, FileMode.Create))
                    {
                        using (BinaryWriter bw = new BinaryWriter(fs))
                        {
                            byte[] data = Convert.FromBase64String(imageData);
                            bw.Write(data);
                            bw.Close();
                        }
                    }
                }
            }
            catch (Exception ex)
            {

            }

            return Content("Uploaded");
        }

I just need to save canvas only into the my project's folder.

html5-canvas asp.net-mvc javascript
1 Answers

It seems that your getting a screenshot, so your controller must be working fine. However, looking at https://html2canvas.hertzen.com/, I see:

<div id="capture" style="padding: 10px; background: #f5da55">
    <h4 style="color: #000; ">Hello world!</h4>
</div>

and:

html2canvas(document.querySelector("#capture")).then(canvas => {
    document.body.appendChild(canvas)
});

The intended result is to screenshot what is inside the #capture element. So they do it with html2canvas(document.querySelector("#capture")).then().

You're saying that you're getting the whole web page instead of the canvas only. But I think that it's the expected behavior considering that you wrote this: html2canvas(document.body, ...) where you ask for a screenshot of the body element. Using html2canvas, you should replace document.body by the id of the canvas.

However, you may not need to do this. You can simply get the image data of the canvas and save it. To do so, you can use: const dataURL = canvas.toDataURL();, or if you need something else: https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement

It may also help: https://www.html5canvastutorials.com/advanced/html5-canvas-save-drawing-as-an-image/

user_51729000
Related