将“canvas”图像数据上传到服务器
我需要将canvas图像数据上传到服务器（数据库），即我需要创build一个表单和一个input=文件，并发布图像数据没有任何用户交互。
您不需要文件input，只需使用ctx.getImageData()获取数据并使用Ajax将其发送到服务器即可。
请参阅CanvasRenderingContext2D.getImageData()的MDN文档 。
但是，即使使用ExCanvas ，您也无法在IE中获取图像数据。
FWIW，这是我得到它的工作。
我的服务器是在谷歌应用程序引擎。 我使用jQuery.post发送canvas.toDataURL（）的输出作为post请求的一部分。 数据URL是base64编码的图像数据。 所以在服务器上我解码并将其转换为图像
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) {});
这可能不是最好的办法，但它的工作原理。
这是我如何解决这个问题。 使用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'] . 'http://img.dovov.comsome_name.png'; file_put_contents($file, $data);
这里是我去年写的一个在线签名应用程序的演示Canvas签名演示 。 这具有仅将vector数据发布到服务器的优点。 有了所有的path信息，你也可以应用平滑algorithm或按需要进行缩放，然后再坚持。
<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>
我将path数据存储到隐藏字段中并将其发布到服务器。
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(); }
您可以以data：url的forms获取图像数据，但只能在Firefox和Opera中使用。
