作者热门文章
- 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/
我是一名优秀的程序员,十分优秀!