asp.net アプリケーションで自由に手書きできるように、HTML5 キャンバス タグと Jquery プラグインを使用しています。
http://www.websanova.com/plugins/paint/html5#websanova
私は1つの問題に直面しています。画像を保存するためにサーバー側のボタンをクリックすると、ポストバックが行われ、ページのキャンバスが更新されます。ポストバック後、空のキャンバスが表示され、コードで保存された空白の画像が表示されます。
ここに私のコードスニペットがあります
<%@ 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ボタンで正常に動作し、画像を完全に保存します