- Java 双重比较
- java - 比较器与 Apache BeanComparator
- Objective-C 完成 block 导致额外的方法调用?
- database - RESTful URI 是否应该公开数据库主键?
那里有 Fabric.JS 向导吗?
我已经进行了公平的研究,但似乎找不到太多关于如何将图像添加到 fabric.JS Canvas 的解释。
用户旅程:
a) 用户从输入文件类型按钮上传图像。b) 一旦他们从计算机中选择了图像,我就想将其放入用户 Canvas 中。
到目前为止,我必须将图像存储到表达式中,这是我的代码:
scope.setFile = function(element) {
scope.currentFile = element.files[0];
var reader = new FileReader();
/**
*
*/
reader.onload = function(event) {
// This stores the image to scope
scope.imageSource = event.target.result;
scope.$apply();
};
// when the file is read it triggers the onload event above.
reader.readAsDataURL(element.files[0]);
};
我的 HTML/Angular:
<label class="app-file-input button">
<i class="icon-enter"></i>
<input type="file"
id="trigger"
onchange="angular.element(this).scope().setFile(this)"
accept="image/*">
</label>
如果您还没有猜到,我正在使用 MEAN 堆栈。 Mongoose 、Express、Angular 和 Node。
范围 imageSource 是存储图像的地方。我有 read this SO
它谈到用我的结果将图像推送到 Image 对象,然后将它传递给 fabric.Image 对象。有没有人做过类似的事情可以帮助我?
提前致谢
**** 更新 ****指令定义 Canvas 变量:
var canvas = new fabric.Canvas(attrs.id, {
isDrawingMode: true
});
最佳答案
使用 Fabric js 从计算机上传图像。
var canvas = new fabric.Canvas('canvas');
document.getElementById('file').addEventListener("change", function (e) {
var file = e.target.files[0];
var reader = new FileReader();
reader.onload = function (f) {
var data = f.target.result;
fabric.Image.fromURL(data, function (img) {
var oImg = img.set({left: 0, top: 0, angle: 00,width:100, height:100}).scale(0.9);
canvas.add(oImg).renderAll();
var a = canvas.setActiveObject(oImg);
var dataURL = canvas.toDataURL({format: 'png', quality: 0.8});
});
};
reader.readAsDataURL(file);
});
canvas{
border: 1px solid black;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.min.js"></script>
<input type="file" id="file"><br />
<canvas id="canvas" width="450" height="450"></canvas>
关于javascript - 将图像从计算机上传到 Fabric.JS Canvas,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/34513367/
有没有办法在不进行提交/ check out 的情况下应用差异补丁或类似补丁? 我的情况:我工作时经常在计算机之间切换,我的提交历史记录有一堆“switching machines”消息。 我最初的猜
我的自定义引导加载程序中有代码从地址 0x8E00 处的 512 字节缓冲区复制内存。进入高内存,0x100000和更高。这在某些计算机上运行良好,而在其他计算机上崩溃(我假设是三重故障)。此代码在
服务器有没有办法将一些数据无线无缝地推送到客户端,可能是 Windows(电话)、iPhone、Mac 或 Android 设备,没有任何操作系统集成? 如果是这样,最好的设计模式是什么,最好的技术是
我无法理解hadoop的真正本质。 如果我有足够的资源来购买可以处理PB级数据的 super 计算机,那么为什么我需要Hadoop基础架构来管理如此大的数据? 最佳答案 hadoop的全部目的是能够在
我有一个奇怪的问题,或者我可能无法理解Grails i18n机制的工作原理。 我将以下内容插入到index.gsp文件中: LocaleContextHolder.locale:
我正在尝试为我的小弟弟编写一个简单的程序。他经常在他的电脑后面,但他应该为学校学习简单的算术 :D 我想制作以下程序: 他启动了他的电脑 他需要做一些简单的练习并完成 如果他做对了 x 次,他可以继续
有人能告诉我如何在 diff 主机(计算机)上为 MySQL 数据库做一个简单的数据库备份吗?我正在尝试将我的数据库从一台主机(服务器)移动到一台新主机(服务器) 最佳答案 如果您只是需要在服务器之间
关闭。这个问题不符合Stack Overflow guidelines .它目前不接受答案。 要求我们推荐或查找工具、库或最喜欢的场外资源的问题对于 Stack Overflow 来说是无关紧要的,因
我正在尝试让 Android 应用程序使用 USB 电缆与运行 ubuntu 12.04 lts 的 Linux 计算机进行通信。我正在尝试使用 usbdeviceconnection 类,但是当我通
我刚刚使用 docker-toolbox 1.8.2 安装了 docker在 Windows 10 上。 由于由于this issue我不得不使用这些命令重新创建 docker 镜像 docker-m
如何删除处于 GURU_MEDITATION 错误状态的 VirtualBox 计算机?在 VirtualBox 未运行时删除该目录是否足够? 编辑:发布后,我删除了“在文件管理器中显示”导航到的整个
当我们在 Azure 机器学习服务中将模型部署为 ACIWebService 时,不需要指定任何 deployment_target。 根据AzureML documentation对于 azurem
当我们在 Azure 机器学习服务中将模型部署为 ACIWebService 时,不需要指定任何 deployment_target。 根据AzureML documentation对于 azurem
我遇到的主要问题是当我选择 stay 时会发生什么上hand_one ,然后 hit上hand_two . 而不是让我hit or stay上hand_two再次,它让我回到hit or stay上h
我知道我可以使用 putty 来 ssh 进入每台 Linux 机器并更新 CentOS 服务器...但我希望有人能够为我指明正确的方向,告诉我如何通过 PowerShell 或 Windows 中的
在 MIX 计算机中,一个单词由五个字节和一个符号组成。符号在内存中是如何表示的?是另一个字节,所以每个字真的是六个字节吗? 谢谢。 最佳答案 你的问题不是很清楚。体系结构规范未指定实际实现。它仅指定
我是 Python 的初级程序员,我的电脑有一个奇怪的问题。当我的计算机上有一个 .py 文件(包含一个有效的脚本)并双击它打开时,会发生以下情况:程序打开(它是黑屏 View ),但它会在一秒钟内自
我正在尝试在 Windows 上使用 plink 创建到 Linux 机器的隧道,并让转储文件最终出现在 Windows 机器上。看起来 this answer会工作,是我的问题的基础。但是尝试一下并
我想在 Windows 7 和 10 计算机上执行重启,但我首先需要将 Jenkins 节点暂时离线。在执行重启之前,我需要完成所有正在运行的任务。然后我远程登录到服务器并重新启动计算机。然而,在我重
我正在编写一个简单的程序,从 MySQL 数据库中提取计算机名称,然后将这些名称存储到字符串数组列表中(这部分工作正常)。之后,我编写了一个类和一个方法,将字符串作为参数(这将是计算机名称)并尝试对其
我是一名优秀的程序员,十分优秀!