function drawOnCanvas(file) {
    $.mobile.loading('show', {
        text: '圖片上傳中,請耐心等待...', //載入器中顯示的文字
        textVisible: true, //是否顯示文字
        theme: 'a',        //載入器主題樣式a-e
        textonly: false,   //是否只顯示文字
        html: "<div style=\"width:200px;\" align=\"center\"><img src=\"../assets/img/l1.gif\" /></div>"           //
 
要顯示的html內容，如圖片等
    });

    var reader = new FileReader();

    reader.onload = function (e) {
        var dataURL = e.target.result,
            canvas = document.getElementById('canvas'),
            img = new Image(),
            context = canvas.getContext('2d');
        img.onload = function () {
            
 
var size = 300;
            canvas.style.width = size + "px";
            canvas.style.height = size + "px";

            var scale = 3.125;
            canvas.width = Math.floor(size * scale);
            canvas.height = Math.floor(size * scale);

            context.scale(scale, scale);
            context.clearRect(
 
0, 0, size, size);
            context.drawImage(this, 0, 0, size, size);
//            /*  canvas.toDataURL(type, args)
//              該方法能夠將canvas轉換為影象，影象是基於Base64編碼的。如
//              果不指定兩個引數，無引數呼叫該方法，轉換的影象格式為png格式
//。
//              •type:指定要轉換的影象格式，如 image/png、image/jpeg等。
//              •args:可選引數。例如，如果type為image/jpeg，則args可以是
//              0.0和0.1之間的值，以指定影象的品質。
//例如，下面的程式碼將canvas中已繪製的內容在一個新的瀏覽器窗
//              口或選項卡中開啟：
            
            var base64 = canvas.toDataURL('image/jpeg');

            $('#s').html(base64);

            //隱藏載入器
            $.mobile.loading('hide');
        };
        img.src = dataURL;  //把影象給img物件，在img 物件onload事件中進行繪製到canvas（相關壓縮，儲存，都可以在這裡進行操作）
    };
    reader.readAsDataURL(file);
};
function change() {
    var input = document.getElementById('cameraInput')
    var file = input.files[0]; drawOnCanvas(file);
};