jquery - 将绘制的图像保存在asp.net服务器的canvas中

Question

我可以在服务器上保存图像文件，但图像保存为空白图像，在 Canvas 上绘制的图像未保存，但如果我绘制矩形、圆形，则图像保存得很好，请帮助解决我的代码中的问题。 ..

脚本代码:

  $(document).ready(function () {

         var myCanvas =  document.getElementById("Canvas1");
         var myContext = myCanvas.getContext("2d");
         var myImg = new Image();
         myImg.src = "images/cabinbg.jpg";
         myImg.onload = function () { myContext.drawImage(myImg, 0, 0); };


         var dataURL = document.getElementById("Canvas1").toDataURL("image/png");
         $('#<%=btnAdd.ClientID %>').live('click', function () {
             dataURL = dataURL.replace('data:image/png;base64,', ''); 

             $.ajax({
                 type: "POST",
                 url: "LayoutMaster.aspx/GetImage",
                 data: "{ 'image':'" + dataURL + "'}",
                 contentType: 'application/json; charset=utf-8',
                 dataType: 'json'
             }).done(function (respond) {
                 //alert(respond);
             });

         });

cs文件

    [System.Web.Services.WebMethod()]
    public static void GetImage(string image)
    {
        if (image != "")
        {
            try
            {
                FileStream fs;
                byte[] photo = Convert.FromBase64String(image);
                fs = new FileStream(HostingEnvironment.MapPath("~/images/abc.png"),       FileMode.OpenOrCreate, FileAccess.Write);
                BinaryWriter br = new BinaryWriter(fs);
                br.Write(photo);
                br.Flush();
                br.Close();
                fs.Close();

            }
            catch (Exception e)
            {
                e.Message.ToString();
            }

        }
    }

Answer 1

在尝试将 Canvas 内容提取为 data-url 之前，您无需等待图像加载完成。

myImg.src = "images/cabinbg.jpg";
myImg.onload = function () { myContext.drawImage(myImg, 0, 0); };

//... you go right to extracting here before onload
//    above potentially has finished leaving canvas blank
//    as nothing is drawn yet...

var dataURL = document.getElementById("Canvas1").toDataURL("image/png");

要解决此问题，您需要将提取代码放入 onload 事件中:

function extractImage() {
    /* here goes the canvas.toDataUrl etc.. */
}

myImg.onload = function () {
    myContext.drawImage(myImg, 0, 0);
    extractImage();
}
myImg.src = "images/cabinbg.jpg";

(现在我发现您实际上在上传之前切割了数据网址的 header ..我的错..)<罢工>假设 data-url 的实际数据(字符串)到达服务器，您似乎忘记了删除 data-url 的 header 。

解码包含 data-url header 的 Base64 效果不太好。

字符串看起来像这样(有关详细信息，请参见 this link ):

data:[<MIME-type>][;charset=<encoding>][;base64],<data>

在这种情况下:

data:image/png;base64,the-base64-data...

因此，您需要做的是解析 header 并将其截断，直到包含 ...;base64, ，然后解码剩余的字符串。

值得一提的是:如果你没有指定 toDataUrl it will always be PNG 的图像格式。

当然，如果您期望各种格式，则需要实现更深入的解析器来读取 mime 类型、编码等。