2

我可以在服务器上保存图像文件，但图像保存为空白图像画布上绘制的图像没有保存，但如果我画矩形，圆形然后图像保存很好请帮助解决我的代码中的问题......

脚本代码：

  $(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();
            }

        }
    }
4

1 回答 1

1

在尝试将画布内容提取为 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";

（现在我看到您实际上是在上传之前切掉了 data-url 的标头……我的错……） 假设 data-url 的实际数据（字符串）到达服务器，您似乎忘记了切掉 data-url 的标头。

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

该字符串将如下所示（有关详细信息，请参阅此链接）：

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

在这种情况下：

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

因此，您需要做的是解析标头并将其截断至包括...;base64,，然后解码剩余的字符串。

值得一提的是：如果您不指定图像格式，toDataUrl 它将始终为 PNG。

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

于 2013-05-10T08:06:51.520 回答