如何从画布中删除图片？

Question

当我上传一张图片时，它将显示在画布中。在这张图片上，我可以进行修改。现在，如果我尝试上传新的图片，我想删除之前的图片，并显示新的图片。我已经尝试了下面的代码行。但它没有清除画布。相反，新的图片会出现在之前的图片之上。

document.getElementById('input-image-file').addEventListener("change", function (e) {
    for (var i = 0;i < e.target.files.length;i++) {
        var file = e.target.files[i];
        var reader = new FileReader();

        reader.onload = function (f) {
            var data = f.target.result;

            clearCanvas();

            fabric.Image.fromURL(data, function (img) {
                var oImg = img.set({left: 100, top: 50, angle: 0,}).scale(0.9);

                canvas.add(oImg);
                canvas.sendToBack(oImg);
                canvas.renderAll();
            });
        };
        reader.readAsDataURL(file);
    }
});

function clearCanvas()
{
    var c = document.querySelector("canvas");
    var ctx = c.getContext("2d");
    ctx.clearRect(20, 20, c.width, c.height);
}

// add image 
    var canvas = new fabric.Canvas('c', {
        preserveObjectStacking: true,
        width: $("#c").width(),
        height: $("#c").height()
    });
    
document.getElementById('input-image-file').addEventListener("change", function (e) {

        for (var i = 0;i < e.target.files.length;i++) {
            var file = e.target.files[i];
            var reader = new FileReader();
            
            reader.onload = function (f) {
                var data = f.target.result;
                // canvas.clearRect();

                fabric.Image.fromURL(data, function (img) {
                    var oImg = img.set({left: 100, top: 50, angle: 0,}).scale(0.9);

                    canvas.add(oImg);
                    canvas.sendToBack(oImg);
                    canvas.renderAll();
                });
            };
            reader.readAsDataURL(file);
        }
    });

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.3/fabric.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>


<div class="btn-upload-img">
  <i class="fas fa-plus"></i>
  <input type="file" accept="image/*" id="input-image-file" multiple>
</div>



<div class="image-canvas">
  <div id="image-list">

  </div>
  <div class="image-editors">
    <canvas id="c" width="800" height="600"></canvas>


  </div>
</div>

Answer 1

你需要在每次改变时清除所有已经创建的画布，然后再重新创建更多的画布。

document.getElementById('input-image-file').addEventListener("change", function(e) {
    canvas.clear()
    // your code here
});

// add image 
var canvas = new fabric.Canvas('c', {
  preserveObjectStacking: true,
  width: $("#c").width(),
  height: $("#c").height()
});

document.getElementById('input-image-file').addEventListener("change", function(e) {
  canvas.clear()
  for (var i = 0; i < e.target.files.length; i++) {
    var file = e.target.files[i];
    var reader = new FileReader();

    reader.onload = function(f) {
      var data = f.target.result;
      // canvas.clearRect();

      fabric.Image.fromURL(data, function(img) {
        var oImg = img.set({
          left: 100,
          top: 50,
          angle: 0,
        }).scale(0.9);

        canvas.add(oImg);
        canvas.sendToBack(oImg);
        canvas.renderAll();
      });
    };
    reader.readAsDataURL(file);
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/fabric.js/3.6.3/fabric.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>


<div class="btn-upload-img">
  <i class="fas fa-plus"></i>
  <input type="file" accept="image/*" id="input-image-file" multiple>
</div>



<div class="image-canvas">
  <div id="image-list">

  </div>
  <div class="image-editors">
    <canvas id="c" width="800" height="600"></canvas>


  </div>
</div>