簡單的說一下需求：將canvas繪畫生成的圖片上傳至七牛。

用canvas生成的圖片是base64編碼，上傳base64編碼圖片到七牛雲公開的介面如下：

POST /putb64/<Fsize>/key/<EncodedKey>/mimeType/<EncodedMimeType>/crc32/<Crc32>/x:user-var/<EncodedUserVarVal>
Host: upload.qiniu.com
Authorization: UpToken <UpToken>
Content-Type: application/octet-stream

<Base64EncodedFileContent
 
>

引數說明：

注意事項：

在這裡補充一下：

    
在這裡遇到一個坑，
通過裁剪陣列的方式獲得/<Fsize>
如下程式碼：

 var arr = base64.split(",");
 var str = arr[1].split("==");
 var n = str[0].length;
 var Fsize=parseInt(n-(n/8)*2);

報錯 {error: "illegal base64 data at input byte 4"}

獲取檔案大小的時候，切記要通過檔案流的方式獲取。而不是通過圖片標籤然後轉換後獲取

//把頭部的data:image/png;base64,（注意有逗號）去掉
var arr = base64.split(','), 
mime = arr[0].match(/:(.*?);/)[1],
len = mime.length;
var subLen = parseInt(len + 13);
base64=base64.substring(subLen);
//通過base64編碼字元流計算檔案流大小函式
function fileSize(str) {
    var fileSize;
    //找到等號，把等號也去掉
    if (str.indexOf('=') > 0) {
       var indexOf = str.indexOf('=');
       str = str.substring(0, indexOf);//把末尾的’=‘號去掉
     }
    fileSize = parseInt(str.length - (str.length / 8) * 2);
    return fileSize;
}

2、xhr.setRequestHeader(“Authorization”, “UpToken 填寫你從服務端獲取的上傳token”); 這裡的UpToken與後面的字串保留一個空格。後面跟上你在服務端請求的token的字串。具體你通過什麼樣子的請求方式獲得是客戶自己要關心的事情。
    
    
－－－－－－－－－－－－－－－－－－－－－－－－－－－－
    
    
好了，附上跑通的程式碼，希望能幫到你，當然，如果你有更好的方式實現，歡迎留言，學習學習

function putb64(base64) {
    var pic = base64.replace(/^.*?,/, '');
    $.ajax({
        type: 'post',
        url: "https://test.dankal.cn/wansj/public/index.php/api/Index/upToken",
        success: function (data) {
            var token = data.uptoken;
            // 把字串轉換成json
            function strToJson(str) {
                var json = eval('(' + str + ')');
                return json;
            }
            var url = "http://up-z0.qiniu.com/putb64/-1/";
            var xhr = new XMLHttpRequest();
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4) {
                    var keyText = xhr.responseText;
                    // 返回的key是字串，需要裝換成json
                    keyText = strToJson(keyText);
                    //keyText.key 是返回的圖片檔名
                    var key = keyText.key;
                    var getToken = $('.token').val();
                    $.ajax({
                        type: 'post',
                        url: "http://test.dankal.cn/wansj/public/index.php/api/Index/getShareUrl",
                        data:{
                            token:getToken,
                            file_key:key,
                        },
                        success: function (data) {
                            var shareUrl = data.share_url;
                            console.log(shareUrl);
                        },
                        error: function () {
                            console.log("上傳base64至七牛失敗");
                        }
                    })
                }
            }
            xhr.open("POST", url, true);
            xhr.setRequestHeader("Content-Type", "application/octet-stream");
            xhr.setRequestHeader("Authorization", "UpToken " + token);
            xhr.send(pic);
        },
        error: function () {
            console.log("sendFile請求出錯");
            $('.loading').html("親，真抱歉，圖片上傳失敗");
        }
    })
}