キャンバスに画像をアップロード

Question

キャンバスに画像を1つアップロードしました。ここにはDEMOがあります。今、問題は、私が写真をアップロードして、別の写真をアップロードしたいとき、前の写真がまだ残っているということです。

これは私のコードです：

JS：

var canvas = document.getElementById('main'); 
var ctx = canvas.getContext('2d'); 

var fileInput = document.getElementById('fileInputTest'); 
fileInput.addEventListener('change', imageLoader, false); 

function imageLoader() { 
    var reader = new FileReader(); 
    reader.onload = function(event) { 
     img = new Image(); 
     img.onload = function() { 

      var MAX_WIDTH = 150; 
      var MAX_HEIGHT = 150; 
      var width = img.width; 
      var height = img.height; 

      if (width > height) { 
       if (width > MAX_WIDTH) { 
        height *= MAX_WIDTH/width; 
        width = MAX_WIDTH; 
       } 
      } else { 
       if (height > MAX_HEIGHT) { 
        width *= MAX_HEIGHT/height; 
        height = MAX_HEIGHT; 
       } 
      } 

      ctx.drawImage(img, 0, 0, width, height); 
     } 
     img.src = reader.result; 
    } 
    reader.readAsDataURL(fileInput.files[0]); 
} 

HTML：

<input type="file" id="fileInputTest" /> 
<canvas id="main" width="150" height="150"></canvas> 

はCSS：

#main { 
    border: 2px dotted black; 
    border-radius: 5px position: absolute; 
} 

JSFIDDLE DEMO

Answer 1

あなたがコンテキストであなたのイメージを描画する前にこれだけを追加します。

ctx.clearRect(0, 0, canvas.width, canvas.height); 
ctx.drawImage(img, 0, 0, width, height); 

イメージを描画する前に、キャンバス領域を消去してください。