Question

使用fabric.js和文件上传按钮，我正在尝试将第二个图像文件上传到我的画布。第一张图片是静态的，不受上传按钮的影响。第二张图片将不断被我的文件上传所取代。它第一次工作 - 第二个图像出现但当我第二次点击上传按钮时，使用另一个图像文件，它不会覆盖它的前任。我做错了什么？

//file upload event
document.getElementById('imgLoader').onchange = function handleImage(e) {
    var file = e.target.files[0];
    var reader = new FileReader();
    reader.onload = function(file) {
        addImage(file.target.result);
    }
    reader.readAsDataURL(file);
}

function addImage(imgLink) {
    fabric.Image.fromURL(imgLink, function(img) {

        //second image already existing?
        if (canvas.item(1)) {
            canvas.item(1).src = imgLink; //does not work, image remains the same
            canvas.renderAll(); 
        } else {
            canvas.add(img); //works fine
        }
    });
}

我已经尝试了几个小时，感觉我只缺少一小部分。有什么建议吗？

Answer 1

试试这个：

function addImage(imgLink) {
    fabric.Image.fromURL(imgLink, function(img) {

        if (canvas.item(1)) {
           canvas.remove(canvas.item(1));            
           canvas.add(img); 
        } else {
            canvas.add(img);
        }
    });
}

Fabric.js：通过文件上传覆盖图像

1 个答案: