C# 如何从画布中的代码隐藏打开图像，并让用户在此图像上绘制

我是HTML5的初学者

我想做的是：

在

画布中上载图像

，然后允许用户在此图像上绘制，以便我可以将此图像保存在数据库中

我学会了如何通过这个画

---

但我不知道如何在画布中打开图像，然后让用户在该图像上绘制

将图像加载到画布中：

var image = new Image();
image.addEventListener("load", function() {
    ctx.drawImage(image, x, y);
});
image.src = 'http://server/image.jpg';

让用户使用问题中链接的函数在此图像上绘制

将图像加载到画布中：

var image = new Image();
image.addEventListener("load", function() {
    ctx.drawImage(image, x, y);
});
image.src = 'http://server/image.jpg';

让用户使用问题中链接的函数在此图像上绘制

---

如果我的理解是正确的： 您希望从数据库中检索图像，将其显示给用户以在其上绘制，然后将其上载回服务器以再次存储在数据库中

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-在您引用的教程的InitThis（）函数中，在ctx=document.getElementById（'myCanvas'）.getContext（“2d”）之后添加这些行在画布上显示图片

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-使用canvas的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 ...
        }
    }

---

如果我的理解是正确的： 您希望从数据库中检索图像，将其显示给用户以在其上绘制，然后将其上载回服务器以再次存储在数据库中

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-在您引用的教程的InitThis（）函数中，在ctx=document.getElementById（'myCanvas'）.getContext（“2d”）之后添加这些行在画布上显示图片

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-使用canvas的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 ...
        }
    }

---

---

我认为将图像存储在数据库中是个坏主意。迁移时间太长，您将无法使用phpmyadmin进行迁移。最好在服务器上保存文件的路径。我认为在数据库中存储图像是个坏主意。迁移时间太长，您将无法使用phpmyadmin进行迁移。更好地保存服务器上的文件路径。你能帮我使用.net代码吗，因为图像存储在我的数据库中。然后，你可能需要将

image.src

链接到服务器上的某个页面。在这个页面上，不要返回html，只返回数据库中的图像。你能解释一下

把image.src链接到你服务器上的一个页面吗。在这个页面上，不要返回html，只返回数据库中的图像。

更多信息请参见，我假设您有一个服务器，图像存储在数据库中？它们是如何准确存储的？最好使用IHttpHandler（.ashx），因为aspx文件将经历页面生命周期。检查此项以从数据库返回图像：您能否使用.net代码帮助我，因为图像存储在我的数据库中。您可能需要将

image.src

链接到服务器上的某个页面，然后。在这个页面上，不要返回html，只返回数据库中的图像。你能解释一下

把image.src链接到你服务器上的一个页面吗。在这个页面上，不要返回html，只返回数据库中的图像。

更多信息请参见，我假设您有一个服务器，图像存储在数据库中？它们是如何准确存储的？最好使用IHttpHandler（.ashx），因为aspx文件将经历页面生命周期。检查这个从数据库返回的图像：谢谢你基本上和我说的完全一样。只有一件事：

image.src='i.jpg'

不起作用。为什么不起作用？我刚刚测试了它，它起作用了，但是图像必须与html文件位于同一目录下。“但是图像必须与html文件位于同一目录下”它像魔术一样工作，最后一件事请澄清最后一点，canvas的toDataURL函数谢谢你基本上和我说的完全一样。只有一件事：

image.src='i.jpg'不起作用。为什么它不起作用？我刚刚测试了它，它起作用了，但图像必须与html文件位于同一目录中。“图像必须与html文件位于同一目录中”它像魔术一样工作，最后一件事你能澄清最后一点吗