- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
我正在尝试创建一个函数,将用户剪贴板中的图像作为 new Fabric.Image()
粘贴到 Canvas 上。我发现的任何搜索结果都描述了 Canvas 上已有的克隆对象或粘贴 IText 数据。这个SO问题与我要问的内容相关,但它已经有4年历史了,并且顶部答案中的功能不起作用:
How to do Copy and paste the image from User system to Canvas using fabric.js
这是我当前正在尝试使用的代码。我正在尝试设置一个稍后可以调用的粘贴函数:
var $wrapper = $('#content'),
canvas = new fabric.Canvas('canvas', {
width: 400,
height: 550
}),
pasteImage = function (e) {
var items=e.originalEvent.clipboardData.items;
e.preventDefault();
e.stopPropagation();
// Fabric.js image function
function canvasImage(url) {
var img = new fabric.Image(url);
img.scale(0.75).center().setCoords();
canvas.add(img).renderAll();
}
//Loop through files
for(var i=0;i<items.length;i++){
var file = items.items[i],
type = file.type;
if (type.indexOf("image")!=-1) {
var imageData = file.getAsFile();
var imageURL=window.webkitURL.createObjectURL(imageData);
canvasImage(imageURL);
}
}
};
$wrapper.on('paste', pasteImage);
Here's a fiddle看到它在行动(或不行动,我猜)。这最终将成为 Photoshop 插件的一部分,所以幸运的是我只需要担心它在 Chrome 中的工作情况。
最佳答案
我无法触发您的粘贴事件处理程序,因为我不确定 div 是否可以 native 获取过去的事件,除非您将其设为可内容编辑的 div,在您的用例中我怀疑您想要这样做。
我最近刚刚在自己的应用程序中实现了这个,但我没有使用 Fabric,只是使用原生 Canvas 和 js。
您将不得不重新编写代码,但请尝试更改
$wrapper.on('paste', pasteImage);
至
$(window).on('paste', pasteImage);
无论如何,我修改了您当前的代码,这就是我要做的工作,尽管它可能不会完全触发您的设置,但它将图像粘贴到:
(function() {
var $wrapper = $('#content'),
canvas = new fabric.Canvas('canvas', {
width: 400,
height: 550
}),
txtStyles = {
top: 100,
left: 200,
padding: 6,
fill: '#d6d6d6',
fontFamily: 'sans-serif',
fontSize: '24',
originY: 'center',
originX: 'center',
borderColor: '#d6d6d6',
cornerColor: '#d6d6d6',
cornerSize: 5,
cornerStyle: 'circle',
transparentCorners: false,
lockUniScaling: true
},
imgAttrs = {
left: 200,
top: 200,
originY: 'center',
originX: 'center',
borderColor: '#d6d6d6',
cornerColor: '#d6d6d6',
cornerSize: 5,
cornerStyle: 'circle',
transparentCorners: false,
lockUniScaling: true
},
introTxt = new fabric.Text('Paste images here', txtStyles),
pasteImage = function (e) {
var items=e.originalEvent.clipboardData.items;
e.preventDefault();
e.stopPropagation();
//Loop through files
for(var i=0;i<items.length;i++){
if (items[i].type.indexOf('image')== -1) continue;
var file = items[i],
type = items[i].type;
var imageData = file.getAsFile();
var URLobj = window.URL || window.webkitURL;
var img = new Image();
img.src = URLobj.createObjectURL(imageData);
fabric.Image.fromURL(img.src, function(img){
canvas.add(img);
});
}
},
//Canvas starter text
introCanvas = function() {
canvas.add(introTxt);
};
introCanvas();
$(window).on('paste', pasteImage);
})();
fiddler :https://jsfiddle.net/c0kw5dbu/3/
关于javascript - 将剪贴板中的图像粘贴到fabric.js Canvas 上?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48108696/
我正在遵循一个教程,老师通过以下方式将 html 粘贴到我们的 scrappy shell 中:%paste (下面的 html) html_doc = " " Title of hte page
例如 1.1.1.1 a.com 2.1.1.1 b.com 1.3.1.1 c.com 1.1.5.1 d.com 1.2.1.1 e.com 现在我想从另一个文本中替换这个 ip,不一样
是否有机会在 Angular 中实现粘贴按钮。 FE:用户复制网站的链接,当他或她点击按钮时,在我的页面上复制的链接应该出现在文本框中。 谢谢! 最佳答案 您只能以编程方式从网页复制。您不能以编程方式
我正在尝试提高 Vim 中粘贴功能的可用性,因为太多不同的删除操作(实际上我认为它们都是这样)也会拉到粘贴缓冲区。 这意味着我不再能够删除一些我想粘贴到某处的文本,清理一些东西,以及。然后 做我的粘贴
我正在构建一个简单的 Electron 应用程序,以在屏幕上的其他所有内容上显示一些文本。 有一个键盘快捷键可以打开带有文本的弹出窗口。 我想添加一个小功能。 最好的情况是:在计算机上的任意位置选择一
我有一个双击事件,我希望它保存特定范围的副本。 Private Sub Worksheet_BeforeDoubleClick(ByVal Target As Range, Cancel As Boo
我已经为这个烦人的问题苦苦挣扎了一段时间,但没有找到一个优雅的解决方案。 假设我有这样一个类层次结构: class StatWithBounds[A](val min: A, val max: A,
现在我有一个 Word 宏,可以通过将图像复制并粘贴到该位置来将图像移动到特定文本前面。这种方法效果很好,但成本很高。如果我的 Word 文档中有 1,000 张图像,则运行宏可能需要 30 分钟。
让我以我是自学成才的事实作为我的问题的开头,所以请提供尽可能详细的信息,如果我需要您以不同的方式或多次解释,请耐心等待。 我使用 Microsoft Visual Basic 7.0 为我的团队创建了
我已经为这个烦人的问题苦苦挣扎了一段时间,但没有找到一个优雅的解决方案。 假设我有这样一个类层次结构: class StatWithBounds[A](val min: A, val max: A,
我正在使用 Meteor 开发一个聊天应用程序,我不希望用户能够出于明显的垃圾邮件原因将内容复制/粘贴到表单中。这可能吗?这是我用来运行聊天应用程序的代码: Javascript: // render
我已经为此搜索了很多,但找不到任何建议...我提供了我自己的经典操作栏实现,所以我在所有 Activity 中声明粘贴/等..有谁知道如何做到这一点? 此外,我将提供我自己的复制/粘贴功能,并且仅在需
Windows 中 SWT Text 的默认上下文菜单有几个我们不想要的选项。由于操作系统提供的默认上下文菜单无法修改,因此我创建了一个自定义上下文菜单,其中只有基本的文本操作,例如文本框的删除、剪切
我最后的问题不是很清楚,我再试一次。 在我的 Tumblr 博客 (http://anti-standard.tumblr.com) 上,您可以看到一张图片(图片上写着“ANTI STANDARD”)
我必须编写一个脚本文件来剪切以下列并将其粘贴到新 .arff 文件中同一行的末尾。我想文件类型无关紧要。 当前文件: 63,male,typ_angina,145,233,t,left_vent_hy
是否可以发送过去的命令,以便将文本粘贴到当前聚焦的编辑文本中。场景: 后台服务监听通知(完成) 收到通知后,需要将文本复制到剪贴板(完成) 将文本粘贴到任何当前聚焦的字段,如果不可能则放弃粘贴命令。
我想用 PIL 粘贴一堆图片。出于某种原因,当我运行 blank.paste(img,(i*128,j*128)) 行时,出现以下错误:ValueError: cannot determine reg
如何在我的网页中禁用复制粘贴功能。准确地说,我不希望我的用户从我的网站上复制任何信息并将其用于个人目的。上一个关于同一主题的问题没有给出足够的解释。 onselect 和 ondrag 不起作用。请帮
废话不多说,直接上代码,小伙伴们仔细看下注释吧。 复制代码代码如下: /*简单的 复制 剪切 粘贴 功能 操作:
我应该在 vimrc 中添加哪一行以便在终端之间或不同文件/选项卡之间轻松复制/粘贴? 我现在有: " Better copy & paste set pastetoggle= set clipboa
我是一名优秀的程序员,十分优秀!