1

我是 HTML5 的初学者。

我想做的是：

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

我学会了如何通过这一课画画

但我不知道如何在 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 - 在您引用的教程的 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 - 使用画布的 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 回答