[英]remove image from canvas - fabricjs (javascript)
I'm working on web application most of the part has been covered by angular js. 我正在开发Web应用程序,大部分内容已被angular js覆盖。 I am stuck at a point.
我陷入了困境。 I used fabric.js to manipulate images on canvas and it is the best way of doing this.
我使用fabric.js来操作画布上的图像,这是最好的方法。 Everything is working fine but I can not add a close button on uploaded image like shown in image.
一切正常,但我无法在上传的图像上添加关闭按钮,如图所示。
This angular image comes upon a canvas tag. 这个角度图像出现在画布标签上。 Fabric.js gives me ability to rotate and add images but how could I close this particular image.
Fabric.js使我能够旋转和添加图像,但我怎么能关闭这个特定的图像。 So far I've done with the code is :
到目前为止,我完成的代码是:
var canvas = window._canvas = new fabric.Canvas('c');
var imgElement = document.getElementById('my-image');
var imgInstance = new fabric.Image(imgElement);
canvas.add(imgInstance);
My canvas element: 我的画布元素:
<canvas height="282" width="181" id="c" class="lower-canvas"></canvas>
My uploaded image element. 我上传的图片元素。
<img style="display: none;" src="http://*******/angular.png" class="topimg canvas-img" id="my-image">
Below is what I am getting from fabric.js 以下是我从fabric.js获得的内容
My question is, how could I close or remove this uploaded image on canvas ? 我的问题是,如何在画布上关闭或删除此上传的图像? Is there any another way to doing this instead of fabric.js ?
有没有其他方法来做这个而不是fabric.js? If it is, please share.. I do not want to clear canvas element from common button.
如果是,请分享..我不想从普通按钮清除画布元素。 I need to remove image one by one.
我需要逐个删除图像。
Try this 试试这个
$('#remove').click(function(){
var object = canvas.getActiveObject();
if (!object){
alert('Please select the element to remove');
return '';
}
canvas.remove(object);
});
You can delete the selected object from the canvas when the user pressed DELETE with this code: 当用户使用以下代码按下DELETE时,您可以从画布中删除所选对象:
window.onkeydown = onKeyDownHandler;
function onKeyDownHandler(e) {
switch (e.keyCode) {
case 46: // delete
var activeObject = canvas.getActiveObject();
if (!activeObject) canvas.remove(activeObject);
}
e.preventDefault();
};
You can manipulate the controls from FabricJS, but it takes some effort. 您可以操作FabricJS中的控件,但需要花费一些精力。 Checkout this question: Adding Custom Delete (Back,toFront) Button to Controls and this Fiddle: http://jsfiddle.net/86bTc/8/
查看此问题: 向控件和此小提琴添加自定义删除(后退,前移)按钮 : http : //jsfiddle.net/86bTc/8/
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.