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

Question

我使用HTML5 Canvas將一個簡單的ASP.NET繪圖應用程序集合在一起。 我還編寫了一些代碼，將Canvas的PNG圖像上傳到服務器。 我的代碼如下：

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

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

提前致謝。

沃爾特

Answer 1

更換線：

var image = graph [0] .toDataURL（“image / png”）;

有：

var image = document.getElementById（“graph”）。toDataURL（“image / png”）;

工作。

感謝vytautas.ziurlis，網址為http://www.zvytas.com/

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

問題描述

1 個解決方案

解決方案1
3 已采納 2011-11-03 16:30:06

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

問題描述

1 個解決方案

解決方案1 3 已采納 2011-11-03 16:30:06

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

解決方案1
3 已采納 2011-11-03 16:30:06