Save captured HTML5 Canvas signature Error: Index was outside the bounds of the array

Last Reply 20 days ago By Andrea

Posted 20 days ago

Index was outside the bounds of the array.  The implemented codes as below. 

Please help. 

Thank you.

HTML:

<div class="tools">
    <a href="#colors_sketch" data-tool="marker">Marker</a> <a href="#colors_sketch" data-tool="eraser">Eraser</a>
</div>
<br />
<canvas id="colors_sketch" width="300px" height="100pxs">
</canvas>
<br />
<br />
<asp:TextBox ID="txtImageName" Width="150px" Height="30px" Placeholder="Enter Your Image Name" runat="server" />
<asp:Button ID="btnSave" Text="Save Image" class="btnSuccess" OnClick="OnUpload" runat="server" />
<hr />
<asp:HiddenField ID="ImageVal" runat="server" />
<br />
<asp:GridView ID="gvImages" runat="server" AutoGenerateColumns="false">
    <Columns>
        <asp:ImageField DataImageUrlField="Path" HeaderText="Image" />
    </Columns>
</asp:GridView>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/mobomo/sketch.js/master/lib/sketch.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(function () {
        $('#colors_sketch').sketch();
        $(".tools a").eq(0).attr("style", "color:#000");
        $(".tools a").click(function () {
            $(".tools a").removeAttr("style");
            $(this).attr("style", "color:#000");
        });
        $("#btnSave").bind("click", function () {
            var base64 = $('#colors_sketch')[0].toDataURL();
            $('[Id*=ImageVal]').val(base64);
        });
    });
</script>

C#:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Configuration;
using System.Data.SqlClient;
using System.Data;
using System.IO;

namespace NewDigitalSignature
{
    public partial class _Default : Page
    {
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!this.IsPostBack)
            {
                string constr = ConfigurationManager.ConnectionStrings["CitiStaff"].ConnectionString;
                using (SqlConnection conn = new SqlConnection(constr))
                {
                    using (SqlDataAdapter sda = new SqlDataAdapter("SELECT * FROM tblFilespath", conn))
                    {
                        DataTable dt = new DataTable();
                        sda.Fill(dt);
                        gvImages.DataSource = dt;
                        gvImages.DataBind();
                    }
                }
            }
        }

        protected void OnUpload(object sender, EventArgs e)
        {
            string base64 = Request.Form[ImageVal.UniqueID].Split(',')[1];
            byte[] bytes = Convert.FromBase64String(base64);
            string filePath = string.Format("~/Uploads/{0}.png", txtImageName.Text);
            File.WriteAllBytes(Server.MapPath(filePath), bytes);
            string constr = ConfigurationManager.ConnectionStrings["CitiStaff"].ConnectionString;
            using (SqlConnection conn = new SqlConnection(constr))
            {
                string sql = "INSERT INTO tblFilespath VALUES(@Name, @Path)";
                using (SqlCommand cmd = new SqlCommand(sql, conn))
                {
                    cmd.Parameters.AddWithValue("@Name", txtImageName.Text);
                    cmd.Parameters.AddWithValue("@Path", filePath);
                    conn.Open();
                    cmd.ExecuteNonQuery();
                    conn.Close();
                }
            }
            Response.Redirect(Request.Url.AbsoluteUri);
        }
    }
}

 

You are viewing reply posted by: Andrea 20 days ago.
Posted 20 days ago
Hi @KatieNgoc,
Please try the following

Index was outside the bounds of array

It might help you.

Cheers Andrea.