I'm new to JavaScript and am working with this code using Fabric.js to create multiple images with the click of a button. I've found the following code from another post which allows for shapes, but I can't seem to figure out how to successfully make those images instead.
<!DOCTYPE html>
<html>
<head>
<script src=".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>
I'm new to JavaScript and am working with this code using Fabric.js to create multiple images with the click of a button. I've found the following code from another post which allows for shapes, but I can't seem to figure out how to successfully make those images instead.
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery./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>
- There is a tutorial on their website for working with images: fabricjs./fabric-intro-part-1/#images – ZeroBased_IX Commented Jul 25, 2015 at 14:57
2 Answers
Reset to default 2you can easily add any image that you have already uploaded on a url like this:
this is the js snippet:
var canvas = new fabric.Canvas('c');
canvas.backgroundColor = 'yellow';
canvas.renderAll();
var myImg = 'http://www.logowik./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);
});
}
here you can find a live example on jsfiddle: http://jsfiddle/tornado1979/1awwv3eh/1/ press the button and import images on random positions.
hope helps, good luck.
This is how you can use HTML5 file API to read image from your local puter and render in the fabric.js canvas:
<html xmlns="http://www.w3/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>