All geek questions in one place

ASP.NET drawing application using HTML5 canvas. Save to server. JavaScript error

I put together a simple ASP.NET drawing application using an HTML5 canvas. I also wrote code that uploads a Canvas PNG image to the server. My code is as follows:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="CanvasToServer._Default" %> <!DOCTYPE html> <html> <head id="Head1" runat="server"> <title>iScribble Canvas To Server</title> <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.1.min.js"></script> <!--Load Draw application code--> <script type="text/javascript" src="JScript.js"></script> <!--CSS--> <style type="text/css"> html, body { font-family: "Helvetica Neue" , Helvetica, Arial, sans-serif; } #graph { border: 1px solid #000; } #controls { font-family: "Helvetica Neue" , Helvetica, Arial, sans-serif; font-weight: bold; font-size: smaller; padding: 3px; width: 594px; height: 25px; } select { font-family: "Helvetica Neue" , Helvetica, Arial, sans-serif; font-size: medium; } </style> <script type="text/javascript"> // Send the canvas image to the server. $(function () { $("#btnSend").click(function () { var image = graph[0].toDataURL("image/png"); image = image.replace('data:image/png;base64,', ''); $.ajax({ type: 'POST', url: 'Default.aspx/UploadImage', data: '{ "imageData" : "' + image + '" }', contentType: 'application/json; charset=utf-8', dataType: 'json', success: function (msg) { alert('Image sent!'); } }); }); }); </script> </head> <body> <form id="form1" runat="server"> <div id="controls"> Size: <select id="thickness" class="fixed"> <option value="1">1</option> <option value="2">2</option> <option value="3">3</option> <option value="4">4</option> <option value="5">5</option> <option value="10">10</option> <option value="20">20</option> </select> Color: <select id="color"> <option value="#FFFFFF">#FFFFFF</option> <option value="#AAAAAA">#AAAAAA</option> <option value="#666666">#666666</option> <option value="#000000">#000000</option> <option value="#9BA16C">#9BA16C</option> <option value="#CC8F2B">#CC8F2B</option> <option value="#63631D">#63631D</option> </select> </div> <canvas id="graph" width="200" height="150"></canvas> <input id="btnSend" type="button" value="Send To Server" /> </form> </body> </html>

Code behind:

 using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.Web.UI.WebControls; using System.Web.Services; using System.IO; using System.Web.Script.Services; namespace CanvasToServer { [ScriptService] public partial class _Default : System.Web.UI.Page { [WebMethod()] public static void UploadImage(string imageData) { FileStream fs = new FileStream("C:\\image.png", FileMode.Create); BinaryWriter bw = new BinaryWriter(fs); byte[] data = Convert.FromBase64String(imageData); bw.Write(data); bw.Close(); } } }

The draft part of the application is working fine.

The problem occurs when I click the "Send to Server" button. I get a JavaScript error:

'indefined'

in line:

 var image = graph[0].toDataURL("image/png");

Can someone help me solve this problem please.

Thanks in advance.

Walter

+4
source share
1 answer

String replacement:

var image = graph [0] .toDataURL ("image / png");

with:

var image = document.getElementById ("graph"). toDataURL ("image / png");

have worked.

Thanks to vytautas.ziurlis at http://www.zvytas.com/

+3
source

Source: https://habr.com/ru/post/1379455/

More articles:


All Articles