Javascript 同时显示两个相同的图像

我使用Fabric js进行图像操作，将图像拖动、调整大小并合并到画布上的一个图像上，但它显示了一个错误，即当我上传图像时，它一次显示两个相同的图像，而我只需要一个

请帮我解决这个问题

我的代码是：

 var canvas = new fabric.Canvas('imageCanvas', {
    backgroundColor: 'rgb(240,240,240)'
});

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.2,
                scaleY: 0.2
            })
            canvas.add(imgInstance);
        }
        img.src = event.target.result;
    }
    reader.readAsDataURL(e.target.files[0]);
}

---

我猜你看到的一个图像是图像元素，另一个是画布元素，你能检查一下吗？谢谢你的回答。但是我检查了它，但是没有问题。你能提供渲染的html和或正常的html吗？这是我的渲染html。这两个图像都包含在画布中？