locked
Save image file from image control RRS feed

  • Question

  • User1510859543 posted

    I would like to save the image displayed in an image control named saveSignature in my code behind page to a .png image file.  It is currently an image generated inside a canvas control.  Below is the aspx page markup and the code in the code behind page.  I get an error that says the strSource is an empty string.

        <asp:Panel ID="PanelSignature" runat="server" CssClass="hide" ClientIDMode="Static">
            <div id="canvas">
              <canvas class="" id="newSignature"
                style="; margin: 0; padding: 0; border: 1px solid #c4caac;">
              </canvas>
            </div>
            <script type="text/javascript">
                signatureCapture();
            </script>
            <asp:Button ID="BtnSaveSignature" runat="server" Text="Save signature" OnClientClick="return signatureSave();" />
            <asp:Button ID="BtnClearSignature" runat="server" Text="Clear signature" OnClientClick="return signatureClear();" />
            <br />
            Saved Image
            <br />
            <asp:Image ID="saveSignature" runat="server" ClientIDMode="Static" />
        </asp:Panel>
    
    
                Dim strSource As String = saveSignature.ImageUrl
                Dim strFilePath As String = Server.MapPath("~/Photos/_NewPhotos/signature.png")
                Dim filePath As String = ""
                Dim bmpImg As Bitmap = Nothing
                Using fileStream As FileStream = File.OpenRead(strSource)
                    Dim memStream As New MemoryStream()
                    memStream.SetLength(fileStream.Length)
                    fileStream.Read(memStream.GetBuffer(), 0, CInt(fileStream.Length))
                    bmpImg = FilesClass.Resize_Image(fileStream, 2533, 1900)
                    bmpImg.Save(filePath, ImageFormat.Jpeg)
                    fileStream.Close()
                    fileStream.Dispose()
                End Using
    

    Friday, June 26, 2020 9:52 PM

Answers

  • User409696431 posted
    File.OpenRead(strSource)

    requires strSource to be a file path and name.  You have set strSource to saveSignature.ImageUrl. What is that?

    To do what you want to do, save the canvas image to the server on a button click, see the following post,

    Refer to https://forums.asp.net/t/2140934.aspx?save+a+canvas+image+to+asp+net+c+ and scroll down to Brando ZWZ's answer.

    First point: converting a canvas image to png is done client-side, using javascript's canvas.toDataURL.  You then need to upload it to the server if that is where you are trying to save it.  The post I mention above has the full code to do this.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Saturday, June 27, 2020 6:51 PM

All replies

  • User409696431 posted
    File.OpenRead(strSource)

    requires strSource to be a file path and name.  You have set strSource to saveSignature.ImageUrl. What is that?

    To do what you want to do, save the canvas image to the server on a button click, see the following post,

    Refer to https://forums.asp.net/t/2140934.aspx?save+a+canvas+image+to+asp+net+c+ and scroll down to Brando ZWZ's answer.

    First point: converting a canvas image to png is done client-side, using javascript's canvas.toDataURL.  You then need to upload it to the server if that is where you are trying to save it.  The post I mention above has the full code to do this.

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Saturday, June 27, 2020 6:51 PM
  • User1510859543 posted

    I changed my code to be similar to what the link you gave me had (Brando ZWZ).  Now it just hides the panel but no image is saved.  Below is my FinalBill.aspx page markup where the canvas control resides. It allows me to create a signature inside the canvas but when I click the BtnSaveSignature button it does not save anything.

        <script type="text/javascript">
            // Send the canvas image to the server.
    
            $(function () {
                $("#BtnSaveSignature").click(function () {
                    var image = document.getElementById("SigCnv").toDataURL("image/png");
                    image = image.replace('data:image/png;base64,', '');
                    $.ajax({
                        type: 'POST',
                        url: 'SaveSignature.aspx/SaveImage',
                        data: '{ "imageData" : "' + image + '" }',
                        contentType: 'application/json; charset=utf-8',
                        dataType: 'json',
                        success: function (msg) {
                            alert('Image saved successfully !')
                        },
                        error: function (msg) {
                            alert('ajax failed')
                        }
                    });
                });
            });
        </script>
        <asp:Button ID="BtnShowSignature" runat="server" OnClientClick="return toggleSignature();" Text="1. Enter Signature" ClientIDMode="Static" />
    
        <asp:Panel ID="PanelSignature" runat="server" CssClass="hide" ClientIDMode="Static">
            <div id="canvas">
              <canvas class="" id="SigCnv"
                style="; margin: 0; padding: 0; border: 1px solid #c4caac;">
              </canvas>
            </div>
            <script type="text/javascript">
                signatureCapture();
            </script>
            <asp:Button ID="BtnSaveSignature" runat="server" Text="Save signature" UseSubmitBehavior="False" />
            <asp:Button ID="BtnClearSignature" runat="server" Text="Clear signature" OnClientClick="return signatureClear();" />
            <br />
            Saved Image
            <br />
            <asp:Image ID="saveSignature" runat="server" ClientIDMode="Static" />
        </asp:Panel>

    The code below is from the SaveSignature.aspx.vb page that is called in ajax.  Am I missing something?  I used the F12 to view console but nothing shows any error.  I also expected an alert but got nothing.

    Imports System.IO
    Imports System.Web.Services
    
    Partial Class Repairs_SaveSignature
        Inherits System.Web.UI.Page
    
        Private Sub Repairs_SaveSignature_Load(sender As Object, e As EventArgs) Handles Me.Load
    
        End Sub
        <WebMethod>
        Public Shared Sub SaveImage(ByVal imageData As String)
            Dim fileNameWitPath As String = "F:\Apps\shareddocs\Photos\AAScanTest\Signature.png"
    
            Using fs As FileStream = New FileStream(fileNameWitPath, FileMode.Create)
    
                Using bw As BinaryWriter = New BinaryWriter(fs)
                    Dim data As Byte() = Convert.FromBase64String(imageData)
                    bw.Write(data)
                    bw.Close()
                End Using
            End Using
        End Sub
    End Class

    Monday, June 29, 2020 6:07 PM
  • User1510859543 posted

    Had problem with naming on one of the buttons.  All works great now!

    Monday, June 29, 2020 7:12 PM