1

私はHTML5の初心者です。

私がしたいのは：

に画像をアップロードしてcanvasから、ユーザーがこの画像に描画できるようにして、この画像をデータベースに保存できるようにします。

このレッスンを通して描く方法を学びます

しかし、キャンバスで画像を開く方法がわかりません。次に、ユーザーにこの画像を描画させます。

4

2 に答える 2

3

私の理解が正しければ：データベースから画像を取得し、それをユーザーに表示して描画し、サーバーにアップロードしてデータベースに再度保存します。

1-データベースから画像を返すIHttpHandler（.ashx）を作成します

public class ImageHandler : IHttpHandler 
{ 
  public bool IsReusable { get { return true; } } 
  public void ProcessRequest(HttpContext ctx) 
  { 
    var myImage = function_to_read_the_image();
    ctx.Response.ContentType = "image/png"; 
    ctx.Response.OutputStream.Write(myImage); 
  } 
}

これをgetImage.ashxとして保存します

2- ctx = document.getElementById（'myCanvas'）。getContext（ "2d"）;の後に引用したチュートリアルのInitThis（）関数にこれらの行を追加します。キャンバスに画像を表示するには

var image = new Image();
image.src = 'http://www.site.com/getImage.ashx';
$(image).load(function () {
    ctx.drawImage(image, 0, 0);
});

また、幅と高さを追加して、画像を伸ばしたり、キャンバスを塗りつぶしたりすることもできます。

ctx.drawImage(image, 0, 0, 500, 200);

3-キャンバスのtoDataURL関数を使用して、最終的な図面をサーバーに再度アップロードし、画像をデータベースに保存します。

キャンバスイメージデータをサーバーに送信する：

var Pic = document.getElementById("myCanvas").toDataURL("image/png");
Pic = Pic.replace(/^data:image\/(png|jpg);base64,/, "")
$.ajax({
    type: 'POST',
    url: 'Save_Picture.aspx/UploadPic',
    data: '{ "imageData" : "' + Pic + '" }',
    contentType: 'application/json; charset=utf-8',
    dataType: 'json',
    success: function (msg) {
        alert("done, Image Uploaded.");
    }
});

画像サーバーサイドの読み取りと保存：

   using System;
   using System.Web;
   using System.IO;
   using System.Web.Script.Services;
   using System.Web.Services;
   [ScriptService]
    public partial class Save_Picture : System.Web.UI.Page
    {
        [WebMethod()]
        public static void UploadPic (string imageData)
        {
            byte[] data = Convert.FromBase64String(imageData);
            // save it in a file or database ...
        }
    }
于 2012-12-20T12:32:35.990 に答える
2

  1. 画像をキャンバスにロードします。

    var image = new Image();
image.addEventListener("load", function() {
    ctx.drawImage(image, x, y);
});
image.src = 'http://server/image.jpg';
  2. 質問でリンクした機能を使用して、ユーザーにこの画像を描画させます。
于 2012-12-20T12:18:13.117 に答える