無法從HTML 5畫布

Question

生成的PNG圖像，我在HTML繪製的梯度圖像與貝塞爾曲線5個帆布這樣的：

var canvas = $('#canvas1')[0]; 

    if (canvas.getContext) { 
     var context = canvas.getContext('2d'); 

     var gradient = context.createLinearGradient(0, 0, 0, 100); 
     gradient.addColorStop(0, 'rgba(193,193,193,1)'); 
     gradient.addColorStop(.20, 'rgba(160,160,160,1)'); 
     gradient.addColorStop(.5, 'rgba(102,102,102,1)'); 
     gradient.addColorStop(.7, 'rgba(91,91,91,1)'); 
     gradient.addColorStop(.97, 'rgba(160,160,160,1)'); 
     gradient.addColorStop(1, 'rgba(193,193,193,1)'); 
     context.fillStyle = gradient; 
     context.fillRect(0, 0, 500, 100); 


     var gradient1 = context.createLinearGradient(0, 0, 0, 100); 
     gradient1.addColorStop(0, '#a1a1a1'); 
     gradient1.addColorStop(.5, '#717171'); 
     gradient1.addColorStop(1, '#a1a1a1'); 

     context.beginPath(); 
     context.moveTo(0, 0); 
     context.bezierCurveTo(0, 0, 20, 50, 0, 100); 
     context.lineWidth = 1; 
     //context.strokeStyle = 'black'; // line color 
     //context.stroke(); 
     context.fillStyle = gradient1; 
     context.fill(); 
     context.closePath(); 
    } 

現在我想以節省硬盤這個形象，這個我已經形成了這樣的要求：

var canvas = $('#canvas1')[0]; 

    if (canvas.getContext) { 
     var context = canvas.getContext('2d'); 
     $.ajax({ 
      url: '/Html5/Export', 
      type: 'POST', 
      data: 'img=' + escape(canvas.toDataURL("image/png")), 
      success: function (data) { 
       alert('data exported'); 
      } 
     }); 
    } 

在此服務器端，我已經寫了這個代碼（ASP.NET C＃）：

[HttpPost] 
     public ActionResult Export() 
     { 
      string img = Request.Params["img"]; 

      ConvertThis(img); 
      return Content("true"); 
     } 

     public void ConvertThis(string ImageText) 
     { 
      if (ImageText.Length > 0) 
      { 
       ImageText = ImageText.Substring(ImageText.IndexOf(",") + 1); 
       Byte[] bitmapData; 
       bitmapData = Convert.FromBase64String(ImageText); 

       System.IO.File.WriteAllBytes(@"c:\logs\random.png", bitmapData); 
      } 
     } 

但在服務器端生成的圖像與在Html5 Canvas 上繪製的圖像完全不同。

什麼我錯在這裏做..

Answer 1

逃生（canvas.toDataURL（ 「圖像/ PNG」））

我覺得應該是encodeURIComponent方法，而不是逃避。

encodeURIComponent使用HTTP協議，而escape只是編碼非ASCII字符。如果您使用HTTP協議，請勿使用轉義。

Answer 2

canvas.toDataURL("image/png") 

返回一個帶有數據uri前綴的base64編碼的字符串，所以它看起來像您正在編碼它兩次。從 'canvas.toDataURL' 返回的字符串將是這個樣子：

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA... 

如果你有興趣的只有編碼的圖像中的Base64，提取它是這樣的：

var base64Image = canvas.toDataURL("image/png"); 
... 
data: 'img=' + base64Image.substr(base64Image.indexOf(',')), 

Answer 3

http://www.worldwidewhat.net/2011/06/send-canvas-content-to-server/

閱讀評論，可能不得不放棄數據：圖像...像user375025陳述。假設你在一段時間之前就明白了這一點，爲別人付出代價。