CODEWITHSUNDEEP
javascripthtml5-canvasfabricjs
BARNI
BARNI

Reputation: 142

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.

Upvotes: 2

Views: 5752

Answers (2)

Ramses Ndame
Ramses Ndame

Reputation: 26

you can use this code to add image into canvas

var img = fabric.Image.fromURL("http://www.w3schools.com/css/img_fjords.jpg", (image) => {
 image.set({
   left: 100,
   top: 60,
 });
 image.scaleToWidth(200);
 canvas?.centerObject(image);
 canvas?.add(image);
 canvas?.setActiveObject(image);
 canvas?.renderAll();
}, { crossOrigin: 'Anonymous' });

Upvotes: 0

Kinjal Modi
Kinjal Modi

Reputation: 56

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.

Upvotes: 1

Related Questions