在画布上保存绘制的图像在服务器在asp.net

Question

我能够保存图像文件在服务器，但图像保存为空白图像在画布上绘制的图像不保存，但如果我画矩形，然后图像是节省精plz帮助whts在我的代码的问题...

脚本代码：

$(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

你是不是等待图像的onload完成你尝试之前提取画布c作为数据网址的意图。

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"); 

要解决这个问题，你需要把extrating代码onload事件中：

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

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

（现在我看到你之前上传实际上斩断数据URL的头..我的不好..） 假设数据网址的实际数据（字符串）到达服务器，你似乎忘记了数据网址的标题。

对base64进行解码包括data-url的头文件不会很好。

该字符串应该是这样的（详见this link）：

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

在这种情况下：

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

所以，你需要做的是解析头和砍了下来最多并包括...;base64,，然后解码剩余的字符串。

值得一提：如果您没有指定图像格式为toDataUrlit will always be PNG。

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