locked
save a canvas image to asp.net c# RRS feed

  • Question

  • User-1651858287 posted

    I am to save to 

    I am generate Javascript grab a signature which I am trying to save.

    I have the signature in the canvas. 

    <canvas id="SigCnv" name="SigCnv" width="250" height="50" style="border: solid;"></canvas>

     I am trying to save the  image in in using c#. 

    Thursday, May 17, 2018 1:24 PM

All replies

  • User465171450 posted

    Get the image from JavaScript, then you can send the base64 encoded string to the server and unencode and save it there. 

    Take a look at the answer on this stack overflow on getting the image from the canvas.

    https://stackoverflow.com/questions/923885/capture-html-canvas-as-gif-jpg-png-pdf

    Thursday, May 17, 2018 5:29 PM
  • User283571144 posted

    Hi sweetSteal,

    According to your description, I suggest you could firstly use jquery toDataURL to convert the canvas to image/png format.

    Then we could use ajax to send this image to web method in code-behind.

    At last we could save the image in the web method.

    Aspx:

    <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="GetCanvasFromClientToServer.aspx.cs" Inherits="AspNetNormalIssue.Webform.GetCanvasFromClientToServer" %>
    
    <!DOCTYPE html>
    
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
        <script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.2.min.js" type="text/javascript"></script>
        <script>
            function drawShapes() {
    
                var canvas = document.getElementById("SigCnv");
    
                var context = canvas.getContext("2d");
    
                context.fillStyle = "Blue";
    
                context.fillRect(0, 0, 200, 200);
    
                context.beginPath();
    
                context.lineWidth = "4";
    
                context.strokeStyle = "Green";
    
                context.fillStyle = "Yellow";
    
                context.arc(150, 100, 50, 20, Math.PI * 2, false);
    
                context.stroke();
    
                context.fill();
    
            }
        </script>
    </head>
    <body onload="drawShapes()">
        <form id="form1" runat="server">
            <div>
                <canvas id="SigCnv" name="SigCnv" width="250" height="50" style="border: solid;"></canvas>
                <input type="button" id="btnSave" name="btnSave" value="Save the canvas to server" />
                <script type="text/javascript">
    
                    // Send the canvas image to the server.
    
                    $(function () {
                        $("#btnSave").click(function () {
                            var image = document.getElementById("SigCnv").toDataURL("image/png");
                            image = image.replace('data:image/png;base64,', '');
                            $.ajax({
                                type: 'POST',
                                url: 'GetCanvasFromClientToServer.aspx/UploadImage',
                                data: '{ "imageData" : "' + image + '" }',
                                contentType: 'application/json; charset=utf-8',
                                dataType: 'json',
                                success: function (msg) {
                                    alert('Image saved successfully !');
                                }
                            });
                        });
                    });
                </script>
            </div>
        </form>
    </body>
    </html>
    

    Webmethod:

    using System;
    using System.Collections.Generic;
    using System.IO;
    using System.Linq;
    using System.Web;
    using System.Web.Services;
    using System.Web.UI;
    using System.Web.UI.WebControls;
    
    namespace AspNetNormalIssue.Webform
    {
        public partial class GetCanvasFromClientToServer : System.Web.UI.Page
        {
            protected void Page_Load(object sender, EventArgs e)
            {
    
            }
    
            [WebMethod()]
            public static void UploadImage(string imageData)
            {
                string fileNameWitPath = @"D:\" + 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);
                        bw.Write(data);
                        bw.Close();
                    }
                }
            }
        }
    }

    Best Regards,

    Brando

    Friday, May 18, 2018 9:32 AM
  • User-415630335 posted

    I'm getting an error using this solution - do you know how to resolve?  I'm using ASP.NET Forms web application.

    jquery-3.3.1.js:9600 POST http://localhost:39952/cameratest.aspx/UploadImage 401 (Unauthorized)

    Monday, February 3, 2020 3:22 PM
  • User-415630335 posted

    How to resolve this per https://stackoverflow.com/questions/23033614/asp-net-calling-webmethod-with-jquery-ajax-401-unauthorized :

    ~/App_Start/RouteConfig.cs

    settings.AutoRedirectMode = RedirectMode.Off;
    Monday, February 3, 2020 3:52 PM