HTML5画布在asp.net回发后得到refersh [英] HTML5 canvas got refersh after postback in asp.net
问题描述
我使用HTML5 canvas标签和jQuery插件在我的asp.net应用程序免费的笔迹。
I am using HTML5 canvas tag and Jquery plugin for free handwriting in my asp.net application.
http://www.websanova.com/plugins/paint/html5#websanova
我现在面临一个问题。当点击保存图像我的服务器端的按钮，然后就做我想回发并刷新我的网页在画布上。并回传后，它给了我空白的画布，我得到了一个通过code保存的空白图像。
I am facing one problem. When My server side button is clicked for saving the image then it do the postback I guess and refreshes the canvas of my page. And after postback it gives me empty canvas and I got blank image that is saved via code.
下面是我的code段
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="wPaint.aspx.cs" Inherits="wPaint" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>.::wPaint in .NET::.</title>
<!-- jQuery -->
<script type="text/javascript" src="wPaint/jquery.1.7.1.min.js"></script>
<script type="text/javascript" src="wPaint/jquery.ui.core.min.js"></script>
<script type="text/javascript" src="wPaint/jquery.ui.widget.min.js"></script>
<script type="text/javascript" src="wPaint/jquery.ui.mouse.min.js"></script>
<script type="text/javascript" src="wPaint/jquery.ui.draggable.min.js"></script>
<!-- wColorPicker -->
<link rel="Stylesheet" type="text/css" href="wPaint/wColorPicker.1.2.min.css" />
<script type="text/javascript" src="wPaint/wColorPicker.1.2.min.js"></script>
<!-- wPaint -->
<link rel="Stylesheet" type="text/css" href="Styles/wPaint.css" />
<script type="text/javascript" src="wPaint/wPaint.js"></script>
</head>
<body>
<form id="form1" runat="server">
<div id="wPaint" style="position: relative; width: 500px; height: 300px; background: #CACACA;
border: solid black 1px; overflow: hidden;">
</div>
<script type="text/javascript">
$("#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(); }
</script>
<div>
<div style="float: left; width: 100px; margin: 10px;">
<asp:Button ID="btnSave" runat="server" Text="Save Image" OnClick="btnSave_Click" /></div>
<div style="float: left; width: 100px; margin: 10px;">
<asp:Button ID="btnClear" runat="server" Text="Clear" OnClick="btnClear_Click" /></div>
</div>
<asp:Label ID="lblImage" runat="server" Style="display: block" />
<asp:Label ID="lblextension" runat="server" Style="display: none" />
</form>
</body>
</html>
::::::::::: CS :::::::::::::::
::::::::::: 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;
}
}
请给我建议的任何方式来解决这个问题。所以，我的画布不是一片空白。它适用于客户端HTML按钮罚款和保存图像完美
Please suggest me any way out to tackle this problem. So My canvas not goes blank. It works fine on client side html button and save the image perfectly
推荐答案
当然往返（回传）将删除绘图。为了发送和放大器;保存 dataUri 你写的WebMethod 或 WCF服务并要求它 jQuery.ajax（）。
Naturally round-trip (postback) will erase the drawing. In order to send & save the dataUri you have to write WebMethod or WCF service and request it jQuery.ajax().
这篇关于HTML5画布在asp.net回发后得到refersh的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
