Load image fromUrl without callback in fabric.js

Question

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.

Answer 1

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.