Question

我能够在服务器上保存图像文件但是图像保存为空白图像在画布上绘制的图像不保存但是如果我绘制矩形，则圆圈然后图像保存精细plz帮助解决我的代码中的问题。 ..

脚本代码：

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

在尝试将画布内容提取为data-url之前，您不是在等待图像onload完成。

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

（现在我发现你实际上在上传之前砍掉了数据网址的标题 ..我的不好......） <击> 假设data-url的实际数据（字符串）到达服务器，您似乎忘记了数据网址的标题。

对包含data-url标头的base64进行解码将无法正常工作。

字符串看起来像这样（详见this link）：

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

在这种情况下：

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

所以你需要做的就是解析标题并将其删除，包括...;base64,，然后解码剩余的字符串。

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

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

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

1 个答案: