组合fabric.js和jQuery时，将图像拖放到画布不起作用

文章/答案/技术大牛

发布

1回答

javascript、jquery、canvas、drag-and-drop、fabricjs

我正在尝试设置一个fabric.js画布，以便用户可以将图像文件从他们的系统拖放到画布上。在寻找这样做的方法时，我找到了，它工作得很好，但我也在使用jQuery，而且我喜欢在文档开头创建主要变量/函数，并在以后需要时调用它们。 console.log('Drop done'); $main.on('drop

浏览 5提问于2017-12-31得票数 0

回答已采纳

2回答

将用户计算机中的图像添加到画布

javascript、jquery、html、canvas、fabricjs

目前，无论如何将计算机用户的图像添加到画布上，我都遇到了一个问题。我正在使用输入按钮从计算机获取文件，它调用一个函数，该函数将图像添加到画布中。到目前为止，我已经尝试了不同的方法将图像添加到画布中，就像下面这种方法一样：但是这里显示的代码在我的例子中不起作用，因为它只是将图像绘制到画布中，但它不允许它像Fabricsjs中的Kitchensink.js演示那样可拖动和</

浏览 0提问于2013-03-05得票数 8

回答已采纳

2回答

Fabricjs -在一个文档中呈现多个画布

javascript、html、fabricjs

我在动态创建和设置画布背景时遇到了问题。我希望用户能够用文字和形状注释图像，这就是为什么我要这样做的原因。我想知道为什么这个代码会产生这样的输出使用其urls将画布背景设置为图像。(也就是说，每个画布都会有不同的背

浏览 2提问于2020-10-01得票数 0

回答已采纳

2回答

使用fabric.js动态自动缩放画布以便在SVG上导出

javascript、html、svg、html5-canvas、fabricjs

我正在开发一个简单的编辑器，可以在画布上添加/编辑文本和图像。我的默认编辑器大小是480x317，但我希望它在SVG上使用较大尺寸为1075x709的.toSVG()导出。问题出在我试图调整画布大小并将其导出时。不是所有对象都缩放到我的画布大小。它似乎只是调整了实际画布的大小，而不是对象的大小。在画布调整大小之后，fabric.js上是否有一个函数可以同时调整对象的大小？以下是上的示例代码

浏览 0提问于2014-02-25得票数 0

1回答

已将画布大小调整为图像问题

jquery、canvas、fabricjs

我正在使用带有fabric js的画布。我正在尝试转换图像中的画布区域，这工作正常，但当我调整画布大小，并试图转换调整大小的画布到图像，它不工作。我认为，由于它的内联宽度，当我试图修改内联宽度和高度时，fabric元素不起作用。以下是我的代码 <script src="https://code.jquery.com/jquery-1.11.3.min

浏览 26提问于2020-07-03得票数 0

回答已采纳

3回答

无法使用Konva将图像作为图像对象加载到HTML5画布中

canvas、html5-canvas、konvajs、react-konva、konvajs-reactjs

如果源是PDF，我无法在画布中加载Konva Image对象。没有抛出错误，但是画布上应该有图像的地方是空白的。有没有什么已知的解决方法？欢迎任何建议。

浏览 1提问于2019-02-05得票数 1

4回答

如何使用Fabric.js将画布保存为图像

javascript、canvas、cross-domain、fabricjs、todataurl

我有一个Fabric.js原型，人们可以将照片、文本和地图加载到画布中。当它们完成时，我希望它们能够将画布保存为图像。new Image();$('#canvasContainer').replaceWith(image); 但它说画布是tainted -我认为是因为图像(上面的方

浏览 7提问于2014-04-15得票数 7

回答已采纳

1回答

在Fabric.js中获取单击对象的当前光标位置

javascript、html5-canvas、fabricjs

我正在开发一个涉及HTML画布特性的Web应用程序。我使用Fabric.JS - 在其上呈现对象。在Fabric.Js中，我可以实现对象的事件侦听器，就像在这个链接- 中一样。现在，我将向画布中添加一个图像对象，并将鼠标事件侦听器实现到该图像对象。当单击画布上的图像对象时，我希望检索单击图像的位置(x，y)。但它总是返回零。我将图像对象添加到画布

浏览 2提问于2018-05-17得票数 1

回答已采纳

1回答

有使用fabric.js导入图像文件的方法吗？

javascript、image、canvas、import、fabricjs

我目前正在使用fabric.js库和输入文件按钮将png或svg文件导入到画布上。只有当图像位于根文件夹中时，下面的代码才能工作。我知道我没有访问文件路径的权限，所以我尝试在文件中创建一个元素。控制台中没有错误，但画布上没有显示任何错误。是否有办法使输入有效，还是有不同的图书馆可以帮助我做到这一点？我使用fabric.js是为了能够缩放和移动画布中的图像。

浏览 4提问于2017-06-25得票数 3

回答已采纳

2回答

如何在发送到服务器之前减小画布图像的大小

canvas、fabricjs

我正在使用Fabric.js。当我尝试使用canvas.toDataURL(' image /png')将画布图像发送到服务器时，大约需要40秒。我将其转换为blob，但也需要25-30秒。当我减小画布大小时，它会减小背景图像的大小，但对象(文本和图像)显示在背景图像之外(减小而不是成比例)。如何最小化上传时间？

浏览 2提问于2013-06-20得票数 2

回答已采纳

2回答

将图像从计算机上传到Fabric.JS画布

javascript、angularjs、node.js、canvas、fabricjs

外面有没有Fabric.JS向导？用户之旅： scope.setFile = function(element) {

浏览 4提问于2015-12-29得票数 3

2回答

带有坐标的HTML5拖放

javascript、jquery、css、html、drag-and-drop

我是Javascript的新手，我有一项我甚至无法解决的任务。这就是现在的样子：有谁能帮帮我呢？ var dragok = false; { } { }

浏览 2提问于2018-01-26得票数 0

回答已采纳

3回答

如何拉伸图像大小以匹配fabric.Image对象

fabricjs

我正在使用fabricjs来实现图像编辑，我尝试使用一个fabric.Image对象作为画布的背景图像来存储数据。;canvas.add(imageObject);}); 上面是我的相关代

浏览 16提问于2017-12-19得票数 0

回答已采纳

1回答

使用移动设备拖动在画布上渲染的图像会导致图像消失

javascript、html、css、canvas、fabricjs

我正在制作一个用Fabric.js在画布上绘制图像的应用程序。对于平板电脑和智能手机，如果通过拖动平移绘制的图像，图像将消失。我将粘贴一张显示当前情况的GIF图像。demo GIF 我想通过拖动平移来防止图像消失，即使是在PC以外的浏览器中也是如此。请让我知道，如果有任何其他选择，这样做。当您上传图像时，画布上和画布下方会出现一

浏览 39提问于2019-09-04得票数 1

回答已采纳

1回答

使用fabric.js时画布中滑块的居中缩放问题

javascript、canvas、fabricjs

我正在为我的画布使用fabric.js。但是当我使用下面的代码时，它的缩放是正确的，但是当我改变图像的位置，然后再次尝试时，将图像放在中心，然后按比例缩放。image.scale(sizePercent).center().setCoords(); 我试了很多次，但没有得到适当的解决方案，我需要的是，当我缩放图像时，它应该成比例地放在它所在的位置。我还尝试在画布中

浏览 1提问于2020-05-05得票数 0

1回答

SVG在裁剪后的画布上不追加文本

html、canvas、svg、fabricjs

在画布中，我使用clipTo函数裁剪圆圈、矩形的it.It作品，之后....i可以添加任何类似文本和图像的内容，我添加了下面的代码。}));}); <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js&qu

浏览 1提问于2017-10-31得票数 1

回答已采纳

2回答

散布KineticJS和jQuery事件

javascript、jquery、event-handling、dom-events、kineticjs

我希望建立一个简单的照片拼贴使用KineticJS和画布。在画布容器中，我有预定义的图像区域。我还有(在DOM中和画布容器外的)一组图像，我想要将其拖放到画布上的图像井中。我能够很好地拖动图像并将其捕捉到(硬编码的)图像上，但是当图像在画布上移动时，我无法获得x和y坐标。我尝试过使用jQuery的拖动/

浏览 0提问于2013-08-02得票数 3

0回答

Fabric.js:调整画布大小并继续工作

javascript、canvas、fabricjs

我正在处理由用户上传的Fabric.js操作图像。上传的图像可以在整个画布上移动和处理(灰色区域)。一旦完成，我只需要中间区域。当用户单击save时，当前我将绿色区域保存为图像，但我还需要将整个画布的大小调整为仅为绿色区域。我尝试更改整个画布的width和height，然后更改redrawAll()，但画布位于左下角，只有一小部分工作区可见，

浏览 5提问于2017-06-10得票数 2

1回答

Fabric.js -可以在已经存在的对象之上绘制对象吗？

javascript、canvas、fabricjs

我目前正在开发一个应用程序，该应用程序允许在fabric.js画布内的导入图像上绘制线条和形状。到目前为止，我只能在Fabric中通过将图像指定为画布背景来做到这一点。当我尝试加载图像并将其放入画布中时，通过当鼠标悬停在图像上时，我无法绘制形状或线条。只有当光标放置在图像范围之外时，我才能这样做。有

浏览 3提问于2018-01-10得票数 2

1回答

你好，我正在建设一个网站，我在织物画布上显示图像，通过在网站上的文本内容悬停。有许多文本链接连接到许多不同的图像。画布上总是只有一张图片在展示，但在“银行”中有很多。在每次悬停调用时，我都会更改Fabric.js图像对象的源参数。而且，图像本身从来都不是DOM的一部分。我的问题是，当页面加载和用户悬停在链接上时，它至少需要两个“悬停”，这意味着用户必须输入和离开文本链接区域至少两次，才能真正显示图像

浏览 8提问于2015-06-10得票数 2

回答已采纳

点击加载更多