如何從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 
}