使用HTML5畫布的ASP.NET繪圖應用程序。保存到服務器。 JavaScript錯誤

我使用HTML5 Canvas將一個簡單的ASP.NET繪圖應用程序放在一起。我還編寫了一些將Canvas的PNG圖像上傳到服務器的代碼。我的代碼如下：使用HTML5畫布的ASP.NET繪圖應用程序。保存到服務器。 JavaScript錯誤

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="CanvasToServer._Default" %> 

<!DOCTYPE html> 
<html> 
<head id="Head1" runat="server"> 
    <title>iScribble Canvas To Server</title> 

    <script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.1.min.js"></script> 

    <!--Load Draw application code--> 
    <script type="text/javascript" src="JScript.js"></script> 

    <!--CSS--> 
    <style type="text/css"> 
     html, body 
     { 
      font-family: "Helvetica Neue" , Helvetica, Arial, sans-serif; 
     } 
     #graph 
     { 
      border: 1px solid #000; 
     } 
     #controls 
     { 
      font-family: "Helvetica Neue" , Helvetica, Arial, sans-serif; 
      font-weight: bold; 
      font-size: smaller; 
      padding: 3px; 
      width: 594px; 
      height: 25px; 
     } 
     select 
     { 
      font-family: "Helvetica Neue" , Helvetica, Arial, sans-serif; 
      font-size: medium; 
     } 
    </style> 

    <script type="text/javascript"> 
     // 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!'); 
        } 
       }); 
      }); 
     }); 
    </script> 
</head> 
<body> 
    <form id="form1" runat="server"> 

    <div id="controls"> 
     Size: 
     <select id="thickness" class="fixed"> 
      <option value="1">1</option> 
      <option value="2">2</option> 
      <option value="3">3</option> 
      <option value="4">4</option> 
      <option value="5">5</option> 
      <option value="10">10</option> 
      <option value="20">20</option> 
     </select> 
     Color: 
     <select id="color"> 
      <option value="#FFFFFF">#FFFFFF</option> 
      <option value="#AAAAAA">#AAAAAA</option> 
      <option value="#666666">#666666</option> 
      <option value="#000000">#000000</option> 
      <option value="#9BA16C">#9BA16C</option> 
      <option value="#CC8F2B">#CC8F2B</option> 
      <option value="#63631D">#63631D</option> 
     </select> 
    </div> 

    <canvas id="graph" width="200" height="150"></canvas> 

    <input id="btnSend" type="button" value="Send To Server" /> 

    </form> 
</body> 
</html>

後面的代碼是：

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");

燦任何人都可以幫我解決這個問題。

在此先感謝。

沃爾特

來源

2011-11-03 Walter Lockhart

更換線：

變種圖像=圖表[0] .toDataURL（「圖像/ PNG」）;

用：

變種圖像=的document.getElementById（「圖」）toDataURL（「圖像/ PNG」）;

工作。

感謝vytautas.ziurlis在http://www.zvytas.com/

來源

2011-11-03 16:30:06

使用HTML5畫布的ASP.NET繪圖應用程序。保存到服務器。 JavaScript錯誤

回答

相關問題