issue with image object in fabric.js - javascript

I am complete newbie in fabric.js. I need to load several images from URL in canvas and add them as image object so I can set their z index.
I tried using Image.fromURL but it did not return object so I can't set their z index. New fabric.Image take images from page so I am not getting results from it.
This is what I have done so far
var canvas = new fabric.Canvas('myCanvas');
var front_wall = fabric.Image.fromURL('img/bedroom1-front/front_wall.png',
function(img) {
img.scale(0.65);
canvas.add(img);
}
);
I add five more images same way.
Can fabric.Image.fromURL return the image object (by using any attribute) ?
So I can change their z-index after loading.
Sorry I don't have jsfiddle to show.

Welcome to Stack Overflow,
Please check this fiddle
I added some comments in that fiddle. Code is below:
var srcImg = "http://fabricjs.com/lib/pug.jpg";
var canvas = new fabric.Canvas('c');
var icon = null;
var image = fabric.Image.fromURL(srcImg, function(oImg) {
oImg.set({width: oImg.width / 3,
height: oImg.height / 3,
left: 100,
top: 100,
originX: 'center',
originY: 'center',
selectable: false,
transparentCorners: false});
//magic strats here to make active Image and you can control image object here
canvas.setActiveObject(oImg);
icon = canvas.getActiveObject();
icon.hasBorders = false;
icon.hasControls = false;
canvas.add(oImg);
});
//if you want to control outside somewhere you can do this:
setTimeout(function(){
icon.set({'top': 200, 'left': 200});
canvas.renderAll();
}, 1500);

Related

Load image fromUrl without callback in fabric.js

I am trying to to store image in variable to add it in canvas after some event.
code like this is working
new fabric.Image.fromURL('http://www.w3schools.com/css/img_fjords.jpg', function (img)
{
console.log(img);
});
on the console i get thing like this:
klass {filters: Array[0], resizeFilters: Array[0], _element: img.canvas-img, _originalElement: img.canvas-img, width: 560…}
This is good.
but when i am trying to store this image is variable like this.
var img = new fabric.Image.fromURL('http://www.w3schools.com/css/img_fjords.jpg');
when i console.log(img) i get this
f…c.I…e.fromURL {}
Please explain how to save, and what i am doing wrong.
You can use below code to add image into canvas.
var imgObj = new Image();
imgObj.src = "http://www.w3schools.com/css/img_fjords.jpg";
imgObj.onload = function ()
{
var image = new fabric.Image(imgObj);
image.set({
angle: 0,
padding: 0,
originX: "center",
originY: "center"
});
}
You can set other properties too while adding image.

How to add an image to javascript

I cannot seem to find how to add an image to Javascript. I'm currently creating an animation and all I want to do is at the start of the animation I was going to add 4 numbers that count down from 4 in time to music.
I was going to make each number fly off the side of each corner of the page to indicate the countdown, but I can't seem to insert any of my images.
I've tried using code I've found online, but nothing seems to work.
Can someone help give me the exact code I'd need to put an image into my Javascript?
My Code looks something like this.
window.onload= function (){
var paper = new Raphael( 0, 0, 800, 600);
var backGround = paper.rect(0,0,800,600);
backGround.attr({ fill: "black"});
/* Comment - Add your code here*/
var ball = paper.circle(40,270,10);
var paddleleft = paper.rect(10, 230, 15, 100);
var paddleright = paper.rect(775, 230, 15, 100);
var line = paper.rect(400, 0, 5, 600);
ball.attr({ fill: "white"});
paddleleft.attr({ fill: "white"});
paddleright.attr({ fill: "white"});
line.attr({ fill: "white"});
function bounce_drop1() {
ball.animate({cy: 50 , cx: 750}, 500, 'ease-in', bounce_up1);
}
function bounce_up1() {
ball.animate({cy: 50, cx: 750}, 500, 'ease-out', bounce_drop2);
}
bounce_drop1();
function bounce_drop2() {
ball.animate({cy: 570 , cx: 400}, 500, 'ease-in', bounce_up2);
}
function bounce_up2() {
ball.animate({cy: 50, cx: 50}, 500, 'ease-out', bounce_drop1);
}
};
I'm not sure where exactly the put the image, but following the posts below I've attempted this.
var imgSrc = "http://www.pnglogo.com/wp-content/uploads/2015/10/4-Number-Clipart-PNG-02202.png";
var img = new Image();
img.src = imgSrc;
document.getElementById('mygallery').appendChild(img);
But it's not doing anything, am I meant to state the image as a variable?
Sorry I'm new to using Javascript and I apparently need "imported bitmap images" into my animation.
So I´m guessing you have some sort of HTML file which loads up your javascript. To get an image into that you will need to:
create a new HTML node of the type <img />
This node will need src attribute to define where the image is coming from (maybe from your local file system or hosted anywhere in the web).
After you created the HTML node you need to append it to an already existing DOM-Node to actually "show up".
When this is all done you should have your image nodes and can animate/manipulate them anyway you want e.g. with CSS or JavaScript
Code might look something like this:
var img = document.createElement('img);
img.src = 'http://somelinktoanimage';
var parentNode = document.getElementById('parentNodeId');
parentNode.appendChild(img);
This is a VERY basic example and with your information given I´m not really sure if it applies to your use case.
Also I recommend reading up on some basic stuff:
Web technology for developers MDN
it is very simple to create and add an image on the DOM.
create image object and add it to the DOM:
var imgSrc = "http://fabricjs.com//assets/pug_small.jpg";
var img = new Image();
img.src = imgSrc;
document.getElementById('mygallery').appendChild(img);
live jsfiddle: http://jsfiddle.net/tornado1979/p3h67n1u/
hope helps ,good luck.

border is appending to image when I'm trying to save edited image on canvas

I am using fabric.js to develop an image editor through which user can scribble, text, sign and perform scaling and rotate operations. To save the edited image on canvas, I'm using the following function. But when saving that image, a black border is appending to image everytime. saveAjaxCall is a function which sends an AJAX call to save the image on server. May I know where I'm doing mistake.
canvas.discardActiveGroup().renderAll();
var objs = canvas.getObjects().map(function(o) {
return o.set('active', false);
});
var group = new fabric.Group(objs, {
originX: 'center',
originY: 'center'
});
saveAjaxCall(group.toDataURL());
group._restoreObjectsState();
Try this:
canvas.discardActiveGroup().renderAll();
var objs = canvas.getObjects().map(function(o) {
return o.set('active', false);
});
var group = new fabric.Group(objs, {
originX: 'center',
originY: 'center'
});
canvas.setWidth(1500);
canvas.setHeight(1200);
canvas.renderAll();
saveAjaxCall(canvas.toDataURL("png")); //default is jpg
group._restoreObjectsState();
canvas.setWidth(900);
canvas.setHeight(600);
canvas.renderAll();

The background image doesnt appear everytime using Fabric.js

Hi I am using the background image in my example. It appears once if I am reloading the page but doesn't appear if I am running the program again.
I have tried setting the image using setBackgroundImage and then render it. It appears first after refreshing the page but doesn't work afterwards.
The fiddle is here — http://jsfiddle.net/wv9MU/6/
// create a wrapper around native canvas element (with id="c")
var canvas = new fabric.Canvas('canvas');
canvas.setBackgroundImage('http://fabricjs.com/assets/jail_cell_bars.png',function() {
canvas.renderAll();
});
canvas.setHeight(400);
canvas.setWidth(1300);
canvas.renderAll();
// create a rectangle object
document.getElementById('1').addEventListener('click', function (e) {
// create a rectangle1 object
var rect = new fabric.Rect({
left: 100,
top: 100,
fill: 'aqua',
width: 200,
height: 200
});
// "add" rectangle1 onto canvas
canvas.add(rect);
rect.lockRotation=true;
canvas.renderAll();
});
canvas.setBackgroundImage('C:\Users\131321\Desktop\abc.jpg', canvas.renderAll.bind(canvas));
document.getElementById('2').addEventListener('click', function (e) {
// create a rectangle2 object
var rect = new fabric.Rect({
left: 150,
top: 150,
fill: 'green',
width: 50,
height: 50
});
// "add" rectangle2 onto canvas
canvas.add(rect);
rect.lockRotation=true;
canvas.renderAll();
});
It looks like it's because you're loading a local file, and only when you hit run:
Not allowed to load local resource: file:///C:/UsersY321Desktopabc.jpg (index):1
Error loading file:///C:/UsersY321Desktopabc.jpg
If I change line 36 to
canvas.setBackgroundImage('http://www.placehold.it/250x250', canvas.renderAll.bind(canvas));
It works every time. http://jsfiddle.net/wv9MU/7/
Try adding UsersY321Desktopabc.jpg to your website folders and link it from there.

How to save x and y position to a jSon file after drag and drop?

In my code bellow Im displaying the x and y coordinates when Im dragging "var rec" in a alert box.
Now I wanna save the new coordinates x and y to a jSon file when stoped dragging "var rec".
I started testing with this line of code:
dragend.data("dragend").originalPosition
window.onload = function() {
var stage = new Kinetic.Stage({
container : "container",
width : 1400,
height : 1448
});
var layer = new Kinetic.Layer();
stage.add(layer);
var rect = new Kinetic.Rect({
x: 50,
y: 50,
width: 50,
height: 50,
fill : 'black'
});
var group = new Kinetic.Group({
draggable: true
});
group.add(rect);
layer.add(group);
group.on('dragend',function(){
alert(group.getPosition().x+"/"+group.getPosition().y);
});
layer.draw();
}
you can use jQuery plugin jQuery.twFile that allows you to read and write to a local file.
Stringify you data and save it to file.
var data = JSON.stringify(yourObject);
It depends for how long you want to save it. You can use the localStorage.
Please, take a look here:
localStorage Definition and Usage

Categories