14

asp.net を使用して、複数のキャンバスを 1 つの画像に保存したいと考えています。2つのキャンバスで試してみましたが、保存されていません。

キャンバス：

    <div style="position:relative; width:456px; padding:0px; margin:0px;">
    <canvas id="boardcanvas" width="456" height="480" style="position: absolute; left: 0;   top: -220px; z-index: 0;"></canvas>
    <canvas id="layer2" width="456" height="480" style="position: absolute;left: 0;   top:-220px; z-index: 1;"></canvas>    
   </div>


 <input type="button" id="btnSave" style="width:150px ; text-align:center;height:30px" name="btnSave" value="Save as Image!" />

Jクエリ:

<script type="text/javascript">
     // Send the canvas image to the server.
     $(function () {
         $("#btnSave").click(function () {

             can1 = document.getElementById("broadcanvas");
             ctx1 = can1.getContext("2d");
             var coll = document.getElementById("layer2");
             ctx1.drawImage(coll, 0, 0);
             var image = can1.toDataURL("image/png");   

             alert(image);
             image = image.replace('data:image/png;base64,', '');
             $.ajax({
                 type: 'POST',
                 url: 'index.aspx/UploadImage',
                 data: '{ "imageData" : "' + image + '" }',
                 contentType: 'application/json; charset=utf-8',
                 dataType: 'json',
                 success: function (msg) {
                     alert('Image saved successfully !');
                 }
             });
         });
     });
</script>

インデックス.aspx.cs:

using System.IO;
using System.Web.Script.Services;
using System.Web.Services;

[ScriptService]
public partial class index : System.Web.UI.Page
{
    static string path = @"E:\Green\images\\";
    protected void Page_Load(object sender, EventArgs e)
    {


    }
    [WebMethod()]
    public static void UploadImage(string imageData)
    {
       string fileNameWitPath = path + DateTime.Now.ToString().Replace("/", "-").Replace(" ", "- ").Replace(":", "") + ".png";
       using (FileStream fs = new FileStream(fileNameWitPath, FileMode.Create))
        {
           using (BinaryWriter bw = new BinaryWriter(fs))
             {
                byte[] data = Convert.FromBase64String(imageData);
                bw.Write(data);
                bw.Close();
             }
         }
     }
}
4

6 に答える 6

2

このコードを適切に機能させるには、以下のことを行う必要があります

  1. JavaScript コードで使用されているキャンバス ID のスペルを修正します。
  2. ボタンの位置を変更します。現在、ボタンはキャンバスの下にあります。そのため、ボタンをクリックすることはできません。
  3. E ドライブにディレクトリ Green と Images を作成します。そこにあるはずです E:\Green\Images

作業コードは.

Javascript

<script type="text/javascript">
        // Send the canvas image to the server.
        $(function () {
            $("#btnSave").click(function () {
                can1 = document.getElementById("boardcanvas");
                ctx1 = can1.getContext("2d");
                var coll = document.getElementById("layer2");
                ctx1.drawImage(coll, 0, 0);
                var image = can1.toDataURL("image/png");

                alert(image);
                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 saved successfully !');
                    }
                });
            });
        });
    </script>

HTML コード

<div style="position: relative; width: 456px; padding: 0px; margin: 0px;">
        <canvas id="boardcanvas" width="456" height="480" style="position: absolute; left: 0;
            top: -220px; z-index: 0;">
        </canvas>
        <canvas id="layer2" width="456" height="480" style="position: absolute; left: 0;
            top: -220px; z-index: 1;">
        </canvas>
    </div>
    <input type="button" id="btnSave" style="position: absolute; left: 460px; width: 150px;
        text-align: center; height: 30px; z-index: 2;" name="btnSave" value="Save as Image!" />

Asp.Net 側のコードは問題ありません。上記のコードで試してみてください。確かにうまくいきます (ディレクトリを作成することを忘れないでください)。

于 2013-08-08T12:57:14.357 に答える
1

ここでの問題は、 in のキャンバスを使用していることvar collですdrawImage()。代わりにそのコンテキストを使用する必要があります。修正は次のとおりです。

can1 = document.getElementById("broadcanvas");
ctx1 = can1.getContext("2d");
var coll = document.getElementById("layer2");
var ctx2 = coll.getContext("2d");
ctx1.drawImage(ctx2, 0, 0);
var image = can1.toDataURL("image/png");
于 2013-08-06T03:47:14.400 に答える
1

1 つの画像 (「broadcanvas」) のみをデータ URL に変換しているようです。これを試して：

var image = ctx1.toDataURL("image/png");

類似していない変数の命名は、これをより迅速に見つけるのに役立ちました。

于 2012-09-23T00:24:23.233 に答える
0

問題は、asp.Net と本質的にすべてのサーバー側ライブラリが通常 OS 上の画像処理ライブラリを利用できる場合 (Linux では GD、GD2、ImageMagick など)、なぜこの種のデータ変更をブラウザで実行する必要があるのか​​ということになるかもしれません。 ）。

2 つの異なるファイルをサーバーにアップロードする必要がないようにするためですか? このアプローチでは、必ずしも帯域幅ではなく、HTTP トランザクションでのみ節約されるためです。

ここで実行する必要があるクライアントに本質的に何かがあるようには思えないので、ただの考えです。それは、あなたの例がスリム化されているからかもしれません。

于 2013-08-08T15:57:50.503 に答える