我是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
您可以clear()
用于清除画布对象,并renderAll()
用于重新绘制给定的画布。
尝试以下代码:
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
}
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句