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

Last Reply one month ago By Andrea

Posted one month 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);
        }
    }
}

 

Posted one month ago
Hi @KatieNgoc,
Please try the following

Index was outside the bounds of array

It might help you.

Cheers Andrea.