canvas通過ajax上傳到服務器

一開始呢，是準備通過json格式上傳圖片到服務器，但是報了一個沒有邊界的錯誤（"exception":"the request was rejected because no multipart boundary was found"），查了一下，發現通過form表單上傳文件的話，請求頭會自帶這個boundary，看來問題就出在這裏了。

但是我們是用ajax上傳啊，不是用form表單，於是乎，創建一個formdata，把canvas的數據放進去，再上傳到服務器。

參考自：https://www.cnblogs.com/zhenfei-jiang/p/8206146.html

function fileUploadSign() {
            var form = $("<form id=\"addForm\">\n" +
                "    <input type=\"text\" name=\"fileType\" value=\"1\"/>\n" +
                "</form>");
            var param = new FormData(form[0]);
            var src = canvas.toDataURL("image/png");//這裏轉成的是base64的地址，直接用到img標籤的src是可以顯示圖片的

            var blob = dataURItoBlob(src);

            param.append('source_from', 'webpage_upload');//在formdata加入需要的參數
            param.append('file', blob, "--image" + new Date().getTime() + "client_signature.png");

            $.ajax({
                url: url,
                type: "POST",
                data: param,
                processData: false,
                dataType: "json",
                cache: false,
                contentType: false,
                success: function (response) {
                    
                },
                error: function (xhr, status, error) {

                }
            })
        }

是不是發現上面缺少一個方法，對的，這裏還要將canvas的數據轉換成Blob格式；

//圖片轉成Buffer
function dataURItoBlob(dataURI) {
    var byteString = atob(dataURI.split(',')[1]);
    var mimeString = dataURI.split(',')[0].split(':')[1].split(';')[0];
    var ab = new ArrayBuffer(byteString.length);
    var ia = new Uint8Array(ab);
    for (var i = 0; i < byteString.length; i++) {
        ia[i] = byteString.charCodeAt(i);
    }
    return new Blob([ab], {type: mimeString});
}

這樣子就可以成功上傳到服務器咯