将'canvas'图像数据上传到服务器
你并不需要一个文件输入，只是ctx.getImageData()获取数据，并将其发布到与阿贾克斯的服务器。
查看MDN Documentation for CanvasRenderingContext2D.getImageData()。
但是，即使使用ExCanvas，您也无法在IE中获取图像数据。
您可以以data：url的形式获取图像数据，但只能在Firefox和Opera中使用。
...和Safari（和所有其他WebKit的基于浏览器） – olliej 2009-10-20 02:26:00
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) {});
这可能不是做的最好的方式，但它的工作原理。
这是我去年写的一个在线签名应用程序的演示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();
}
这是我如何解决这个问题。使用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);
这儿还有没有人有这个实际工作？我从getImageData（）返回的数据可以被发送到服务器，但我不知道如何。我尝试在jQuery.ajax和jQuery.post中使用不同的选项，但我无法确定如何在ajax请求中指定图像数据。我的服务器无法解释我发送的数据。我也找不到任何代码示例。你有什么建议吗？ （我确认服务器正在通过与客户端的Curl执行相同的请求来正确工作。） 谢谢。 – Jayesh 2010-07-14 18:16:46
好的，让它工作。在答案中粘贴代码。 – Jayesh 2010-07-15 04:47:54
可以在IE上用fxCanvas（而不是ExCanvas）来使用它。你需要使用函数toDataURL（“image/png”，function（fxUrl）{...}）。 – 2011-12-03 09:40:40