c# - 如何从 Canvas 中的隐藏代码打开图像并让用户在此图像上绘图

Question

我是 HTML5 的初学者。

我想做的是:

在 canvas 中上传一张图片，然后允许用户在这张图片上绘图，这样我就可以将这张图片保存在我的数据库中。

我学会了如何通过这个画画 lesson

---

但是我不知道如何在Canvas中打开图片，然后让用户在这张图片上绘图。

Answer 1

如果我的理解是正确的: 你想从数据库中取出一张图片，显示给用户在上面绘制，然后上传回服务器再次存储在数据库中!

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() 函数中添加这些行；在 Canvas 上显示图片

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

您还可以添加宽度和高度来拉伸(stretch)图像或填充 Canvas :

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

3 - 使用 Canvas 的 toDataURL 函数再次将最终绘图上传到服务器，并将图像保存到数据库。

将 Canvas 图像数据发送到服务器:

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 ...
        }
    }