Entfernen thumbnails create von Eingabe js

Question

Das ist mein Problem: Ich habe JavaScript-Code geschrieben, um ein Thumbnail zu erstellen, wenn ein Benutzer ein Bild hochlädt. Ich möchte jetzt eine Funktion hinzufügen, die es einem Benutzer ermöglicht, auf ein "X" zu klicken, das dann das Bild löscht.

dies ist mein Code:

var imageLoader = document.getElementById('fUpload2'); 
 
    imageLoader.addEventListener('change', handleImage, false); 
 
var canvas = document.getElementById('imageCanvas2'); 
 
var ctx = canvas.getContext('2d'); 
 

 

 
function handleImage(e){ 
 
\t 
 
    var reader = new FileReader(); 
 
    reader.onload = function(event){ 
 
     var img = new Image(); 
 
     img.onload = function(){ 
 
      canvas.width = img.width; 
 
      canvas.height = img.height; 
 
      ctx.drawImage(img,0,0); 
 
\t \t \t document.getElementById("imageCanvas2").style.height = canvas.height; 
 
\t \t \t document.getElementById("imageCanvas2").style.maxWidth = "200px"; 
 
\t \t \t document.getElementById("imageCanvas2").style.maxHeight = "200px"; 
 
\t \t \t document.getElementById("imageCanvas2").style.border = "1px solid #000"; 
 
\t \t \t 
 
\t \t } 
 
     img.src = event.target.result; 
 
\t \t var alte= canvas.height; 
 
    } 
 
    reader.readAsDataURL(e.target.files[0]);  
 
}

.image-upload-gal > input { 
 
    display: none; 
 
}

<div class="well"> 
 
\t \t \t \t \t <form class="form-horizontal" role="form" method="post" action="/ServiceUpload.php" enctype="multipart/form-data"> 
 
\t \t \t \t \t  
 
\t \t \t \t \t  <div class="form-group" style="padding:14px;"> 
 
\t \t \t \t \t \t        <div class="image-upload-gal" > 
 
    <label for="fUpload2"> 
 
     Add foto 
 
    </label> 
 
    <input type="file" name="fUpload" id="fUpload2" /> 
 
    <br> 
 
    
 
    <canvas id="imageCanvas2" ></canvas> 
 
    
 
\t \t \t \t  
 
</div> 
 
\t \t \t \t \t  </div> 
 
\t \t \t \t \t  <button class="btn btn-primary pull-right" type="submit" value="f_upload" name="up" style="margin-top: -20px;">Submit Photo</button> 
 
\t \t \t \t \t  
 
\t \t \t \t \t </form> 
 
\t \t \t \t  </div>

und das ist ein weiterer Code (ich brauche 2-Code ist lange Geschichte: D)

function handleFileSelect(evt) { 
 
    var files = evt.target.files; // FileList object 
 

 
    // Loop through the FileList and render image files as thumbnails. 
 
    for (var i = 0, f; f = files[i]; i++) { 
 

 
     // Only process image files. 
 
     if (!f.type.match('image.*')) { 
 
     continue; 
 
     } 
 

 
     var reader = new FileReader(); 
 

 
     // Closure to capture the file information. 
 
     reader.onload = (function(theFile) { 
 
     return function(e) { 
 
      // Render thumbnail. 
 
      var span = document.createElement('span'); 
 
      span.innerHTML = ['<img class="thumb" src="', e.target.result, 
 
          '" title="', escape(theFile.name), '"/>'].join(''); 
 
      document.getElementById('list').insertBefore(span, null); 
 
     }; 
 
     })(f); 
 

 
     // Read in the image file as a data URL. 
 
     reader.readAsDataURL(f); 
 
    } 
 
    } 
 

 
    document.getElementById('upload').addEventListener('change', handleFileSelect, false);

.thumb { 
 
    height: 180px; 
 
    border: 1px solid #000; 
 
    margin: 10px 5px 0 0; 
 
    } 
 

 
input{ 
 
    
 
    display:none; 
 
    }

 
 
        
 
    <div class="image-upload" > 
 
<label for="upload"> 
 
     Add foto 
 
    </label> 
 
<input type="file" id="upload" name="fUpload" /> 
 
<input type="hidden" name="up" value="f_upload" /> 
 
<output id="list"></output> 
 
</div> 
 
         
 
\t \t \t \t  
 
\t \t \t \t  <button class="btn btn-primary pull-right" type="submit" value="newpost" name="NewPost" style="margin-top: -10px;">Submit</button> 
 
\t \t \t \t  </form>

Answer 1

nur ein Onclick-Ereignis auf einer Spanne fügen Sie ein „x“

<span id="deleteImage">X</span> 

hinzufügen die auf Click-Handler enthält dann die Leinwand löschen, wie Sie das Bild nicht irgendwo anders in diesem Code

document.getElementById("deleteImage").onclick = function(){ 
    canvas.clearRect(0, 0, canvas.width, canvas.height); 
} 

Edited gespeichert haben . Wenn Sie die Leinwand direkt darunter löschen möchten, wie.

canvas = document.getElementById("imageCanvas2"); 
var ctx = canvas.getContext("2d"); 
ctx.clearRect(0, 0, canvas.width, canvas.height);