画布(canvas)对象有一个非常有用的方法:toDataURL()，把画布里的图案转变成base64编码格式的png。

var strDataURI = oCanvas.toDataURL();
// returns "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAYAAACt..."

也可转为jpg

var strDataURI = oCanvas.toDataURL("image/jpeg");
// returns "data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAA..."

参考：http://www.webhek.com/post/save-canvas-to-image.html

http://www.webhek.com/post/convert-canvas-image.html

向服务器上传图片：

方法一：

1. $.ajax({
2. url: CONTEXTPATH + "/upload",
3. type: "post",
4. datatype: "json",
5. data: {name: $('.namestr').val(), filedata: (canvas.toDataURL('image/jpeg')).substring(23)},
6. success: function (data) {
7. alert(data.msg);
8. },
9. error:function(err){
10. alert("服务器错误");
11. }
12. })

此处以json方式发送canvas.toDataURL('image/jpeg')内容

方法二：使用formdata

注意使用ajax时要设置processData: false和contentType: false

1. var formdata = new FormData();
2. formdata.append("name", name);
3. formdata.append("filedata", filedata);
4.  
5. $.ajax({
6. url: CONTEXTPATH + "/upload",
7. type: "post",
8. data:formdata,
9. processData: false,
10. //必须false才会避开jQuery对 formdata 的默认处理。XMLHttpRequest会对formdata 进行正确的处理
11. //必须false才会自动加上正确的Content-Type
12. contentType: false,
13. success: function (data) {
14. alert(data.msg);
15. },
16. error:function(err){
17. alert("服务器错误");
18. }
19. });

formdata使用参考：https://www.cnblogs.com/tugenhua0707/p/7599691.html

PS：formdata不支持IE8、9，若使用低版本IE需要找替换方法

（转载）由于使用Edge保存时间较长，已无法找到原地址