Home/ Questions/Q 8422045
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-10T03:19:33+00:00

I am using HTML5 canvas tag and Jquery plugin for free handwriting in my

  • 0

I am using HTML5 canvas tag and Jquery plugin for free handwriting in my asp.net application.

http://www.websanova.com/plugins/paint/html5#websanova

I am facing one problem. When My server side button is clicked for saving the image then it do the postback I guess and refreshes the canvas of my page. And after postback it gives me empty canvas and I got blank image that is saved via code.

Here is my code snippet

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="wPaint.aspx.cs" Inherits="wPaint" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>.::wPaint in .NET::.</title>
    <!-- jQuery -->
    <script type="text/javascript" src="wPaint/jquery.1.7.1.min.js"></script>
    <script type="text/javascript" src="wPaint/jquery.ui.core.min.js"></script>
    <script type="text/javascript" src="wPaint/jquery.ui.widget.min.js"></script>
    <script type="text/javascript" src="wPaint/jquery.ui.mouse.min.js"></script>
    <script type="text/javascript" src="wPaint/jquery.ui.draggable.min.js"></script>
    <!-- wColorPicker -->
    <link rel="Stylesheet" type="text/css" href="wPaint/wColorPicker.1.2.min.css" />
    <script type="text/javascript" src="wPaint/wColorPicker.1.2.min.js"></script>
    <!-- wPaint -->
    <link rel="Stylesheet" type="text/css" href="Styles/wPaint.css" />
    <script type="text/javascript" src="wPaint/wPaint.js"></script>
</head>
<body>
    <form id="form1" runat="server">
            <div id="wPaint" style="position: relative; width: 500px; height: 300px; background: #CACACA;
                border: solid black 1px; overflow: hidden;">
            </div>

    <script type="text/javascript">
        $("#wPaint").wPaint();

        function loadImage() {
            var imagedata = $("#lblImage").text();
            var extension = $("#lblextension").text();
            $("#wPaint").wPaint("image", "data:image/" + extension + ";base64," + imagedata + "");
        }

        function saveImage() {
            var imageData = $("#wPaint").wPaint("image");
            $("#lblImage").text(imageData);
        }

        function Clear() { $("#wPaint").wPaint(); }

    </script>
    <div>
        <div style="float: left; width: 100px; margin: 10px;">
            <asp:Button ID="btnSave" runat="server" Text="Save Image" OnClick="btnSave_Click" /></div>
        <div style="float: left; width: 100px; margin: 10px;">
            <asp:Button ID="btnClear" runat="server" Text="Clear" OnClick="btnClear_Click" /></div>
    </div>
            <asp:Label ID="lblImage" runat="server" Style="display: block" />
            <asp:Label ID="lblextension" runat="server" Style="display: none" />
    </form>
</body>
</html>

::::::::::: CS:::::::::::::::

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.IO;
using System.Drawing;
using System.Drawing.Imaging;

public partial class wPaint : System.Web.UI.Page
{

    protected void Page_Load(object sender, EventArgs e)
    {

    }

    protected void btnSave_Click(object sender, EventArgs e)
    {
        this.ClientScript.RegisterStartupScript(GetType(), "Javascript", "saveImage();", true);

    }
    protected void btnClear_Click(object sender, EventArgs e)
    {
        this.ClientScript.RegisterStartupScript(GetType(), "Javascript", "Clear();", true);

// Convert Base64 String to byte[]
            byte[] imageBytes = Convert.FromBase64String(lblImage.Text);
            MemoryStream ms = new MemoryStream(imageBytes, 0,
              imageBytes.Length);

            // Convert byte[] to Image
            ms.Write(imageBytes, 0, imageBytes.Length);
            Image image = Image.FromStream(ms, true);
            image.Save(Server.MapPath(".\\Saved\\Arslan.png"));
           // return image;
    }
   }

Please suggest me any way out to tackle this problem. So My canvas not goes blank. It works fine on client side html button and save the image perfectly

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Naturally round-trip (postback) will erase the drawing. In order to send & save the dataUri you have to write WebMethod or WCF service and request it jQuery.ajax().

    • 0