重置图像被选中并在画布元素中设置

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); 

这个作品很好，很简单 - 但只有当你的画布没有变形，当然如果你使用整个画布为你的照片。