如何从 canvas 中删除图像？

Question

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

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>