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'）之后引用的教程中的InitThis（）函数中添加这些行.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函数再次将最终图形上传到服务器，并将图像保存到数据库中。

将canvas imagedata发送到服务器：

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

Answer 2

将图像加载到画布中：

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

让用户使用您在问题中链接的功能来绘制此图像。

如何从画布后面的代码打开图像，让用户在此图像上绘制

2 个答案: