使用Fabric.js添加图像
Adding images with Fabric.js
我是JavaScript的新手,我正在使用Fabric.js创建多个图像,点击一个按钮。我从另一篇文章中找到了下面的代码,它允许形状,但我似乎不知道如何成功地制作这些图像。
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<script src="fabric.min.js"></script>
<script type="text/javascript">
jQuery(function($){
var canvas = new fabric.Canvas('c');
$("#addCircle").click(function(){
canvas.add(new fabric.Circle({
radius: 20, fill: 'green', left: 100, top: 100
}));
});
});
</script>
</head>
<body>
<div id="wrapper">
<div id="editor">
<input type="button" id="addCircle" value="Add Circle"></div>
<canvas id="c" width="300" height="300"></canvas>
</div>
</body>
</html>
你可以很容易地添加任何你已经上传的图片,像这样的url:
这是js代码片段:
var canvas = new fabric.Canvas('c');
canvas.backgroundColor = 'yellow';
canvas.renderAll();
var myImg = 'http://www.logowik.com/uploads/images/511_android.jpg';
$('#addImage').on('click',addImg);
function addImg(){
fabric.Image.fromURL(myImg, function(oImg) {
var l = Math.random() * (500 - 0) + 0;
var t = Math.random() * (500 - 0) + 0;
oImg.scale(0.2);
oImg.set({'left':l});
oImg.set({'top':t});
canvas.add(oImg);
});
}
在这里,您可以在jsfiddle上找到一个实例:http://jsfiddle.net/tornado1979/1awwv3eh/1/按下按钮,可在任意位置导入图像。
祝你好运。
这就是如何使用HTML5文件API从本地计算机读取图像并在fabric.js画布中渲染:
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script src="Scripts/jquery-2.1.4.js"></script>
<script src="Scripts/fabric.min.js"></script>
<script type="text/javascript">
var myAppModule = (function () {
var outObj = {};
var file, fileReader, img;
var cCanvas, cImg;
var init = function (newFile, newFileReader) {
file = newFile;
fileReader = newFileReader;
};
var onloadImage = function () {
cCanvas = new fabric.Canvas('myCanvas');
cCanvas.setWidth(img.width);
cCanvas.setHeight(img.height);
cImg = new fabric.Image(img, {
left: 0,
top: 0,
angle: 0
});
cCanvas.add(cImg);
};
var onloadFile = function (e) {
img = new Image();
img.onload = onloadImage;
img.src = fileReader.result;
};
outObj.init = init;
outObj.OnloadFile = onloadFile;
return outObj;
})();
function handleFileSelect(evt) {
var files = evt.target.files;
var output = [];
for (var i = 0, f; f = files[i]; i++) {
if (!f.type.match('image.*')) {
continue;
}
var reader = new FileReader();
myAppModule.init(f, reader);
reader.onload = myAppModule.OnloadFile;
reader.readAsDataURL(f);
}
}
$(document).ready(function () {
document.getElementById('selectFile').addEventListener('change', handleFileSelect, false);
});
</script>
</head>
<body>
<canvas id="myCanvas">
</canvas>
<form id="form1">
<input type="file" id="selectFile" name="selectFile"/>
</form>
</body>
</html>
相关文章:
- 将gif图像添加到chart.js V2.0中
- 如何通过选择器元素将图像添加到javascript下拉警报消息中
- 使用chosen.js,如何将图像添加到下拉项中
- jQuery动态地将图像添加到表中
- 使用javascript为网页中的所有图像添加属性
- 使用javascript根据图像的布局方向为图像添加不同的类名
- 如何将淡出图像添加到我的Django页面
- AngularJS:为ng-repeat中的图像添加切换功能
- 将图像添加到 json 搜索栏
- 使用jquery为基于alt文本的一些图像添加一个类
- 正在向库图像添加链接
- 是否可以在生成器中为图像添加权重
- 如何将图像添加到每个画布
- 如何将叠加图像添加到SIMILE Exhibit地图视图中
- FabricJS将图像添加到组会导致奇怪的控制行为
- 当所有表单字段都完成时,jquery将图像添加到列表项中一次
- 如何在CKEditor中为图像添加ID
- 有没有任何方法可以使用joomla为图像添加描述!模态挤压盒
- 将图像添加到svg
- 将第二个背景图像添加到元素中