Question

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

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

我正面临一个问题。单击我的服务器端按钮以保存图像然后我做回发我猜并刷新我的页面的画布。回发后它给我空画布，我得到了通过代码保存的空白图像。

这是我的代码段

<%@ 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 :::::::::::::::

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按钮上正常工作并完美保存图像

Answer 1

解决此问题的最简单方法是将ajax发回，然后留在页面上。

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

Answer 2

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

Answer 3

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

中

Answer 4

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

在asp.net中回发后，HTML5画布得到了刷新

4 个答案: