画布(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
向服务器上传图片:
方法一:
$.ajax({
url: CONTEXTPATH + "/upload",
type: "post",
datatype: "json",
data: {name: $('.namestr').val(), filedata: (canvas.toDataURL('image/jpeg')).substring(23)},
success: function (data) {
alert(data.msg);
},
error:function(err){
alert("服务器错误");
}
})
此处以json方式发送canvas.toDataURL('image/jpeg')内容
方法二:使用formdata
注意使用ajax时要设置processData: false和contentType: false
var formdata = new FormData();
formdata.append("name", name);
formdata.append("filedata", filedata);
$.ajax({
url: CONTEXTPATH + "/upload",
type: "post",
data:formdata,
processData: false,
//必须false才会避开jQuery对 formdata 的默认处理。XMLHttpRequest会对formdata 进行正确的处理
//必须false才会自动加上正确的Content-Type
contentType: false,
success: function (data) {
alert(data.msg);
},
error:function(err){
alert("服务器错误");
}
});
formdata使用参考:https://www.cnblogs.com/tugenhua0707/p/7599691.html
PS:formdata不支持IE8、9,若使用低版本IE需要找替换方法