在asp.net中回发后，HTML5canvas得到了刷新

我在我的asp.net应用程序中使用HTML5 canvas标签和Jquery插件进行免费手写。

http://www.websanova.com/plugins/paint/html5#websanova

我面临一个问题。 单击“我的服务器端”按钮以保存图像时，我会进行回发操作，并刷新页面的canvas。 回发后它给我空canvas，我得到了通过代码保存的空白图像。

这是我的代码片段

                   
 
 
  $("#wPaint").wPaint(); function loadImage() { var imagedata = $("#lblImage").text(); var extension = $("#lblextension").text(); $("#wPaint").wPaint("image", "data:image/" + extension + ";base64," + imagedata + ""); } function saveImage() { var imageData = $("#wPaint").wPaint("image"); $("#lblImage").text(imageData); } function Clear() { $("#wPaint").wPaint(); }  
 
 
 
 
 
   
   

::::::::::: CS ::::::::::::::::

 using System; using System.Collections.Generic; using System.Linq; using System.Web; using System.Web.UI; using System.IO; using System.Drawing; using System.Drawing.Imaging; public partial class wPaint : System.Web.UI.Page { protected void Page_Load(object sender, EventArgs e) { } protected void btnSave_Click(object sender, EventArgs e) { this.ClientScript.RegisterStartupScript(GetType(), "Javascript", "saveImage();", true); } protected void btnClear_Click(object sender, EventArgs e) { this.ClientScript.RegisterStartupScript(GetType(), "Javascript", "Clear();", true); // Convert Base64 String to byte[] byte[] imageBytes = Convert.FromBase64String(lblImage.Text); MemoryStream ms = new MemoryStream(imageBytes, 0, imageBytes.Length); // Convert byte[] to Image ms.Write(imageBytes, 0, imageBytes.Length); Image image = Image.FromStream(ms, true); image.Save(Server.MapPath(".\\Saved\\Arslan.png")); // return image; } } 

请建议我解决这个问题。 所以我的canvas不是空白。 它在客户端html按钮上工作正常，并完美保存图像

Answer 1

自然往返（回发）将擦除绘图。 为了发送和保存dataUri您必须编写WebMethod或WCF service并请求它jQuery.ajax() 。

Answer 2

解决这个问题的最简单方法是回复一个ajaxpost，并留在页面上。

第二个困难的解决方案是使用上一篇文章中的图像重新绘制canvas。

Answer 3

您可以尝试将此保存按钮放在UpdatePanel

Answer 4

你可以将你的表格作为运行服务器放在iframe中并在那里上传内容。 成功上传后，使用$（’＃Id’，window.parent.document）从iframe访问父html并设置图像。 回发将在iframe中发生，您的canvas不会受到影响。