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

我需要将canvas图像数据上传到服务器(数据库),即我需要创build一个表单和一个input=文件,并发布图像数据没有任何用户交互。

5 Solutions collect form web for “将“canvas”图像数据上传到服务器”

您不需要文件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中使用。

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

  • 如何在Click - Material Design中创build纹波效果
  • 如何隐藏图片损坏图标只使用CSS / HTML(不含js)
  • 如何写一个:hover在内联CSS?
  • 我如何滚动div在ReactJS中可见?
  • 使用PhantomJS和node.js保存并呈现网页
  • Servlet返回“HTTP状态404请求的资源(/ servlet)不可用”
  • 为什么不是我的textarea的占位符显示?
  • 什么是影子根
  • 使用display的好处:inline-block vs float:留在CSS中
  • 我可以标记一个字段无效的JavaScript?
  • 如何使用PHP生成更浅/更深的颜色?