onclickイベントでファブリックjのオーバーレイイメージを変更するにはどうすればよいですか？

Question

新しいので、私はいくつかの助けが必要です。 imは画像をアップロードできるWebサイトを作成し、顧客はnextまたはpreviousをクリックしてフレームを選択できます。 問題はフレームを変更することができず、それ以外はすべて動作しています。 ここにコード

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

と、これはあなたがいくつかの並べ替えに実行していることができた関数に事前に

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

感謝:)

Answer 1

を変更する画像であるですキャッシュ問題の例：Changing "src" of an "img" html element doesn't refresh it

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