canvas画图转为图片上传，使用formdata上传图片

画布(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需要找替换方法