如何在多个html5 canvas中处理图像上传？

Question

我的页面上有两个画布，单击它们即可更改。我想在两个画布中上传图像并进行渲染。但我只能对一个画布执行此操作，而另一画布不起作用。

在切换画布时，我该如何使用画布并分别上传图像？

这是我的代码：

var canvas = new fabric.Canvas('tcanvas');

var imageLoader = document.getElementById('imageLoader');
imageLoader.addEventListener('change', handleImage, false);

function handleImage(e) {
  var reader = new FileReader();
  reader.onload = function (event) {
    var img = new Image();
    img.onload = function () {
      var imgInstance = new fabric.Image(img, {
        scaleX: 0.1,
        scaleY: 0.1
      })
      canvas.add(imgInstance);
    }
    img.src = event.target.result;
  }
  reader.readAsDataURL(e.target.files[0]);
}

function myFunction() {
  var x = document.getElementById("shirtDiv");
  var y = document.getElementById("shirtBack");

  x.style.display = "block";
  y.style.display = "none";
}

function myFunction1() {
  var x = document.getElementById("shirtBack");
  var y = document.getElementById("shirtDiv");

  x.style.display = "block";
  y.style.display = "none";
}

.btn-upload input[type=file] {
    position: absolute;
    opacity: 0;
    z-index: 0;
    max-width: 100%;
    height: 100%;
    display: block;
}
.btn-upload .btn{
    padding: 8px 20px;
    background: #337ab7;
    border: 1px solid #2e6da4;
    color: #fff;
    border: 0;
}
.btn-upload:hover .btn{
    padding: 8px 20px;
    background: #2e6da4;
    color: #fff;
    border: 0;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.4.3/fabric.js"></script>

<label id="btn-upload" class="btn-upload">
  <input type="file" id="imageLoader" name="imageLoader">
  <button class="btn">Upload Image</button>
</label>
<div id="shirtDiv" class="page" style="width: 530px; height: 630px; position: relative; background-color: rgb(255, 255, 255);">
		<img id="tshirtFacing" src="https://i.stack.imgur.com/MUX4L.png">
		<div id="drawingArea" style="position: absolute ;top: 170px; left: 143px;z-index: 10;width: 255px;height: 400px;">					
      <canvas id="tcanvas" width="235" height="350" class="hover" style="-webkit-user-select: none; border:1px solid #000000;">                </canvas>
      <h5 style="position: absolute ; left: 43px;">Printable Area: 14" x 16"</h5>
    </div>
</div>

<div id="shirtBack" class="page" style="width: 530px; height: 630px; position: relative; background-color: rgb(255, 255, 255); display:none;">
  <img src="https://i.stack.imgur.com/qubb4.png">
  <div id="drawingArea" style="position: absolute;top: 117px;left: 144px;z-index: 10;width: 200px;height: 400px;">					
      <canvas id="backCanvas" width="235" height="350" class="hover" style="-webkit-user-select: none; border:1px solid #000000;"></canvas>
      <h5 style="position: absolute ; left: 43px;">Printable Area: 14" x 16"</h5>
  </div>
</div>	

<div style="left: 213px;" class="btn-group switch">
    <button onclick="myFunction()" type="button">Front</button>
    <button onclick="myFunction1()" type="button">Back</button>
</div>