Wie ändere ich das Overlay-Bild von Fabric js mit onclick event?

Question

ich bin neu zu Javascript, also brauche ich etwas Hilfe. ich mache eine Website, wo Leute Bild hochladen können und Kunden ihre Rahmen auswählen können, indem sie auf "Weiter" oder "Zurück" klicken. das Problem ist, kann ich den Rahmen nicht ändern, anderen, dass alles funktioniert. Hier ist der Code

     <canvas id="canvas" width="500" height="610" style="border:0px solid gray"></canvas> 
     <input type="file" id="imgLoader"> 
     <img src="https://www.wpclipart.com/page_frames/movie/film_frame_page_T.png" id="fg_img" width="500" height="610" style="display: none;"> 

     <script> 
     var canvas = new fabric.Canvas('canvas'); 
     var up = document.getElementById("fg_img").getAttribute("src"); 
    canvas.setOverlayImage(up, canvas.renderAll.bind(canvas)); 

document.getElementById('imgLoader').onchange = function handleImage(e) { 
    var reader = new FileReader(); 
    reader.onload = function (event) { console.log('fdsf'); 
     var imgObj = new Image(); 
     imgObj.src = event.target.result; 
     imgObj.onload = function() { 

      var image = new fabric.Image(imgObj); 
      image.set({ 


      }); 
      //image.scale(getRandomNum(0.1, 0.25)).setCoords(); 
      canvas.add(image); 


     } 

    } 
    reader.readAsDataURL(e.target.files[0]); 
} 
</script> 

und das ist das Bild der

Funktion ändern

<script type="text/javascript"> 
var img_tk="m1"; 
    function imgChange1(){ 
    var newImage = document.getElementById('fg_img'); 


     if (img_tk=="m1"){ 
       newImage.src="images/7.png"; 
       img_tk="m2"; 
      } 
     else if (img_tk=="m2"){ 
       newImage.src="images/4.png"; 
       img_tk="m3"; 
      } 
     else if (img_tk=="m3"){ 
       newImage.src="images/6.png"; 
       img_tk="m4"; 
      } 
     else { 
       newImage.src="images/2.png"; 
       img_tk="m1"; 
      } 
    } 

</script> 

Dank im Voraus :)

Answer 1

Sie in eine Art ausgeführt werden könnte, Caching-Problem wie: Changing "src" of an "img" html element doesn't refresh it.

In diesem Fall könnten Sie in der Lage sein, es zu beheben, indem Sie das Datum nach dem src Hinzufügen wie so:

newImage.src = "images/7.png?t=" + new Date().getTime();