无法从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陈述。假设你在一段时间之前就明白了这一点，为别人付出代价。