如何从Fabric.js画布中使用按钮删除图像

Question

我对canvas和Fabric.js非常陌生。我遵循一些教程，现在可以将图像添加到画布。但不知道如何删除它。通过点击一个按钮

HTML

<div id="container"> 
    <input type="file" id="imageLoader" name="imageLoader" /> 
    <input type="button" id="imageRemove" name="imageRemove" /> 
    <canvas id="canvas" width="400" height="400" style="width:400px;height:400px" ></canvas> 

JS

var canvas = new fabric.Canvas('canvas', { 
    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: 1, 
      scaleY: 1 
     }) 
     canvas.add(imgInstance); 
    } 
    img.src = event.target.result; 
} 
reader.readAsDataURL(e.target.files[0]); 
} 

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

function handleRemove(e) { 
    canvas.remove(canvas.getActiveObject()); 
} 

编辑：

这里是Jsfiddle

Answer 1

您可以使用clear()用于清除画布对象并使用renderAll()重绘给定的画布。

试试这个代码：

DEMO

HTML：

<div id="container"> 
    <input type="file" id="imageLoader" name="imageLoader" /> 
    Remove:<input type="button" value="remove" id="imageRemove" name="imageRemove" onClick="handleRemove()"/> 
    <canvas id="canvas" width="400" height="400" style="width:400px;height:400px" ></canvas> 

JS代码：

var canvas = new fabric.Canvas('canvas', { 
    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: 1, 
      scaleY: 1 
     }) 
     canvas.add(imgInstance); 
    } 
    img.src = event.target.result; 
} 
reader.readAsDataURL(e.target.files[0]); 
} 

//var imageRemove = document.getElementById('imageRemove'); 
//imageLoader.addEventListener('change', handleRemove, true); 

function handleRemove() { 
canvas.clear().renderAll(); // Here is your clear canvas function 
}