html需要一個上傳的input，一個canvas

​
<input type="file" id="img"/><br /><br /><br />

<canvas id="canvas"></canvas>

input是用來上傳圖片的，而canvas則是用來展示上傳的圖片的，由於上傳的圖片獲取的路徑是經過保護的假路徑，所以需要經過特殊處理之後，在由canvas展示 

js程式碼：

var image;
img.onchange = function () {
    let file = document.querySelector('input[type=file]').files[0]  // 獲取選擇的檔案，這裡是圖片型別
    let reader = new FileReader()
    reader.readAsDataURL(file) //讀取檔案並將檔案以URL的形式儲存在resulr屬性中 base64格式
    reader.onload = function(e) { // 檔案讀取完成時觸發 
        let result = e.target.result // base64格式圖片地址 
        image = new Image();
        image.src = result // 設定image的地址為base64的地址 
        image.onload = function(){ 
            var canvas = document.querySelector("#canvas"); 
            var context = canvas.getContext("2d"); 
            canvas.width = image.width; // 設定canvas的畫布寬度為圖片寬度 
            canvas.height = image.height; 
            context.drawImage(image, 0, 0, image.width, image.height) // 在canvas上繪製圖片 
            //let dataUrl = canvas.toDataURL('image/jpeg', 0.92) // 0.92為壓縮比，可根據需要設定，設定過小會影響圖片質量 
            // dataUrl 為壓縮後的圖片資源，可將其上傳到伺服器 
        } 
    }
}
 

js程式碼是由上傳圖片成功開始的，所以監控input的onchange事件，如果傳輸成功執行以下程式碼，可以js繪製在頁面中                     前提是瀏覽器支援canvas，下面程式碼才有效果