在移動端與服務端的互動過程中，經常會遇見移動端上傳圖片到服務端的情況；將圖片轉成base64字串然後和服務端互動，可以有效的減少HTTP資料請求，減少與服務端的資料互動；
將圖片轉換成base64字串，主要使用的canvas：
①使用canvas必須在介面上建立canvas：

<canvas id="photo" style="display: none;"></canvas>  //建立 canvas 控制元件

②利用canvas 重繪，將圖片檔案轉換成base64編碼字串

var image = new Image();
image.src = s;              //s是圖片的路徑
 

image.onload = function() { //image.onload是等待圖片載入完畢，等待圖片載入完畢之後，才能對圖片進行操作
        var width = image.width;//根據圖片的寬高，將圖片進行壓縮
        var height = image.height;
        if(width > height) {
                height = Math.round(500 * width / height);
                width = 500;
        } else {
                width = Math
 
.round(500 * width / height);
                height = 500;
        }
        var canvas = document.getElementById("photo");
        var cax = canvas.getContext('2d');
        canvas.width = width;
        canvas.height = height;
        cax.drawImage(image, 0, 0, width, height);//重繪
        var dataUrl = canvas.toDataURL("image/png"
 
);//dataUrl 即為base編碼字串
}

③轉換成功之後，得到的是一個字元長串；data:image/jpg;base64,·······；然後將得到的base64字串上傳到伺服器，服務端得到之後將其解碼，即可得到上傳的圖片；