重置圖像被選中並在畫布元素中設置

Question

如何在被操作後上傳相同的文件名稱的情況下如何更改加載到canvas元素中的圖像？換句話說，我需要能夠清除畫布，以便可以加載新圖像，或者在再次選擇相同文件時找到重置它的方法。

我有一個加載圖像文件中的以下，但不能確定的邏輯來重置已經選擇的照片，讓原本被重新裝入：

var fileInput = document.getElementById("file"), 
    renderButton = $("#renderButton"), 
    submit = $(".submit"), 
    imgly = new ImglyKit({ 
     container: "#container", 
     ratio: 1/1 
    }); 
// As soon as the user selects a file... 
fileInput.addEventListener("change", function (event) { 

    //CHECK FILE SIZE OF INPUT 
    if (window.File && window.FileReader && window.FileList && window.Blob) { 
     //get the file size and file type from file input field 
     var fsize = $('#file')[0].files[0].size; 
     var ftype = $('#file')[0].files[0].type; 
     var fname = $('#file')[0].files[0].name; 
     var isValidSize = true; 
     var filesize = (fsize/(1024 * 1024 * 10)).toFixed(2); 

     if (fsize > 80000000) //do something if file size more than 1 mb (1048576) 
     { 
      $(".file-warning").html("<div class='alert alert-danger'><p>The image: <b>" + fname + "</b> is <b>" + filesize + " MB</b> and too big. Please reduce your image size to <b>1MB</b> or less.</p></div>"); 
      $("#file").css("border-color", "red"); 
      //alert("Type :"+ ftype +" | "+ fsize +" bites\n(File: "+fname+") Too big!"); 
      isValidSize = false; // this variable should be created somewhere at the top. It will keep the state of file-picker. 
      return; //this will stop any further actions; 
     } 
     //IF FILE SIZE WAS TOO BIG AND WARNING THROWN, BUT NEW CORRECT FILE SIZE LOADED, CLEAR WARNING 
     else { 
      if (fsize < 80000000) { 
       $("#file").css("border-color", "#ccc"); 
       $(".file-warning").empty(); 
      } 
     } 
    } else { 
     alert("Please upgrade your browser, because your current browser lacks some new features we need!"); 
    } 
    //END FILE SIZE CHECK 

    var file; 

    var fileToBlob = event.target.files[0]; 
    var blob = new Blob([fileToBlob], { 
     "type": fileToBlob.type 
    }); 
    // do stuff with blob 
    console.log(blob); 
    // Find the selected file 
    if (event.target.files) { 
     file = event.target.files[0]; 
    } else { 
     file = event.target.value; 
    } 

    // Use FileReader to turn the selected 
    // file into a data url. ImglyKit needs 
    // a data url or an image 
    var reader = new FileReader(); 
    reader.onload = (function (file) { 
     return function (e) { 
      data = e.target.result; 

      // Run ImglyKit with the selected file 
      try { 
       imgly.run(data); 
      } catch (e) { 
       if (e.name == "NoSupportError") { 
        alert("Your browser does not support canvas."); 
       } else if (e.name == "InvalidError") { 
        alert("The given file is not an image"); 
       } 
      } 
     }; 
    })(file); 
    reader.readAsDataURL(file); 

Answer 1

畫布-API有一個方法爲此：

context.clearRect(0, 0, canvas.width, canvas.height); 

這個作品很好，很簡單 - 但只有當你的畫布沒有變形，當然如果你使用整個畫布爲你的照片。