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需要找替換方法