Have been going through a process of being able to add in an image what I paint on a canvas.
I am working on the asp.net form and I rely on JavaScript to be able to paint the movements of the cursor on the canva.
<table id="Table8" class="table table-striped table-bordered table-hover" style="width: 100%" runat="server">
<tr>
<td>
<label>Espacio habilitado para firma del cliente.</label></td>
</tr>
<tr>
<td>
<canvas id="Canvas1" runat="server" style="border: outset;"></canvas>
<br />
<asp:button id="Button1" runat="server" text="Limpiar Firma" onclick="limpiar_Click" />
Fecha de Firma:
<asp:label id="Label1" runat="server"></asp:label>
<script src="/Scripts/scriptEntrega.js" type="text/javascript"></script>
<script>
function verimage() {
const canva = document.querySelector("pizarra");
const dataURI = cav.toDataURL('image/jpg');
Image2.src = dataURI;
}
</script>
</td>
<td>
<asp:image id="Image3" runat="server" />
</td>
</tr>
</table>
So far everything works perfect, I can do the perfect painting process, but now I need to store the image, for which I am trying to convert the canvas into an image and later the image to convert it into an array.
In the same form I have a button, which when pressed calls from the C # codebehind a JavaScript function, with which I try to pass the canvas to the image, but nothing appears to me and on the contrary it deletes everything I paint.
<td style="text-align: center">
<asp:Button ID="ButtonSubmit" class="btn btn-primary" runat="server" Text="Guardar" OnClick="ButtonSubmit_Click" />
</td>
event
protected void ButtonSubmit_Click(object sender, EventArgs e)
{
string script = "window.onload = function() { verimage(); };";
ClientScript.RegisterStartupScript(this.GetType(), "verimage", script, true);
}
I do not know why the above happens, but if you could enlighten me, I would appreciate it.