我使用
HTML5 Canvas将一个简单的ASP.NET绘图应用程序集合在一起.我还编写了一些代码,将Canvas的PNG图像上传到服务器.我的代码如下:
iScribble Canvas To Serverhtml,body
{
font-family: "Helvetica Neue",Helvetica,Arial,sans-serif;
}
#graph
{
border: 1px solid #000;
}
#controls
{
font-family: "Helvetica Neue",sans-serif;
font-weight: bold;
font-size: smaller;
padding: 3px;
width: 594px;
height: 25px;
}
select
{
font-family: "Helvetica Neue",sans-serif;
font-size: medium;
}
// 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!');
}
});
});
});
Size:
1
2
3
4
5
10
20
Color:
#FFFFFF
#AAAAAA
#666666
#000000
#9BA16C
#CC8F2B
#63631D
背后的代码是:
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();
}
}
}
应用程序的绘图部分工作正常.
当我点击“发送到服务器”按钮时出现问题我收到了JavaScript错误:
‘图未定义’
在线上:
var image = graph[0].toDataURL("image/png");
任何人都可以帮我解决这个问题.
提前致谢.
沃尔特