将'canvas'图像数据上传到服务器

Question

我需要将画布图像数据即时上传到服务器（数据库），即我需要创建一个表单并使用input = file并将图像数据没有任何用户交互。

Answer 1

你并不需要一个文件输入，只是ctx.getImageData()获取数据，并将其发布到与阿贾克斯的服务器。

查看MDN Documentation for CanvasRenderingContext2D.getImageData()。

但是，即使使用ExCanvas，您也无法在IE中获取图像数据。

Answer 2

您可以以data：url的形式获取图像数据，但只能在Firefox和Opera中使用。

http://cow.neondragon.net/index.php/681-Canvas-Todataurl

Answer 3

FWIW，这是我如何得到它的工作。

我的服务器是在谷歌应用程序引擎。我使用jQuery.post发送canvas.toDataURL（）的输出作为post请求的一部分。数据URL是base64编码的图像数据。因此，对服务器I将其解码并转换成图像

import re 
import base64 
class TnUploadHandler(webapp.RequestHandler): 
    dataUrlPattern = re.compile('data:image/(png|jpeg);base64,(.*)$') 
    def post(self): 
     uid = self.request.get('uid') 
     img = self.request.get('img') 

     imgb64 = self.dataUrlPattern.match(img).group(2) 
     if imgb64 is not None and len(imgb64) > 0: 
      thumbnail = Thumbnail(
        uid = uid, img = db.Blob(base64.b64decode(imgb64))) 
      thumbnail.put() 

从客户端发送我的数据是这样的：

$.post('/upload', 
     { 
      uid : uid, 
      img : canvas.toDataURL('image/jpeg') 
     }, 
     function(data) {}); 

这可能不是做的最好的方式，但它的工作原理。

Answer 4

这是我去年写的一个在线签名应用程序的演示Canvas Signature Demo。这具有只将矢量数据发布到服务器的优点。使用所有的路径信息，您也可以应用平滑算法或在持续之前根据需要对其进行缩放。

<canvas id="signature" width="300" height="100"></canvas> 
<form method="post" id="signature_form" action="signing.aspx"> 
<input type="hidden" name="paths" id="paths"/> 
    <p><label>Cover #</label> <input type="text" id="covernumber" name="covernumber"/> 
    <input type="submit" id="save" value="Save"/> 
</form> 

我将路径数据存储到隐藏字段并将其发布到服务器。

signature.js核心逻辑如下：

mouseDown: function(event) { 
    var point = this.getRelativePoint(event); 
    this.paths.push([ point ]); 
    this.ctx.fillRect(point.x,point.y,1,1); 
    this.penDown = true; 
    this.updateField(); 
}, 
mouseUp: function(event) { 
    this.penDown = false; 
    this.ctx.closePath(); 
    if (Prototype.Browser.IE && event.srcElement.tagName != "INPUT") { 
     var ver = getInternetExplorerVersion(); 
     if (ver >= 8 && ver < 9 && document.selection) { 
      document.selection.empty(); 
     } 
    } 
}, 
mouseMove: function(event) { 
    if (this.penDown) { 
     var lastPath = this.paths[ this.paths.length - 1 ]; 
     var lastPoint = lastPath[ lastPath.length - 1 ]; 
     var point = this.getRelativePoint(event); 
     lastPath.push(point); 
     this.ctx.strokeStyle = "#000000"; 
     this.ctx.beginPath(); 
     this.ctx.moveTo(lastPoint.x,lastPoint.y); 
     this.ctx.lineTo(point.x, point.y); 
     this.ctx.stroke(); 
     this.ctx.closePath(); 
     this.updateField(); 
    } 
}, 
updateField: function() { 
    if (this.field) { 
     this.field.value = this.paths.toJSON(); 
    } 
} 

这是我的相关的服务器侧Net代码（C＃）。

if (Request("paths")) { 
    var objBitmap : Bitmap = new Bitmap(300, 100); 
    var objGraphics : Graphics = Graphics.FromImage(objBitmap); 
    objGraphics.Clear(Color.Transparent); 
    objGraphics.SmoothingMode = System.Drawing.Drawing2D.SmoothingMode.AntiAlias; 

    var paths:Array = eval(Request("paths")) || []; 
    var p : int; 
    var q : int; 
    var path : Array; 

    for (p = 0; p< paths.length; p++) { 
     var path = paths[p]; 
     if (path.length == 1) { 
      objGraphics.DrawRectangle(new Pen(Color.Black), path[0].x, path[0].y, 1, 1); 
     } else { 
      for (q = 1; q<path.length; q++) { 
       var prev = path[q-1]; 
       var curr = path[q]; 
       objGraphics.DrawLine(new Pen(Color.Black), parseInt(prev.x),parseInt(prev.y),parseInt(curr.x),parseInt(curr.y)); 
      } 
     } 
    } 
    objBitmap.Save("C:\\temp\\" + Request("covernumber") + ".png", ImageFormat.Png); 
    objBitmap.Dispose(); 
    objGraphics.Dispose(); 
} 

Answer 5

这是我如何解决这个问题。使用JavaScript将图像作为base64数组发布，然后解码并使用PHP将其保存为图像。

客户端（JavaScript）：

$.post('/ajax/uploadthumbnail', 
    { 
     id : id, 
     img : canvas.toDataURL("image/png") 
    }, function(data) { 
     console.log(data); 
    }); 

服务器端（PHP）：

$img = $_POST['img']; 
$img = str_replace('data:image/png;base64,', '', $img); 
$img = str_replace(' ', '+', $img); 
$data = base64_decode($img); 
$file = $_SERVER['DOCUMENT_ROOT'] . '/images/some_name.png'; 
file_put_contents($file, $data);