Konvajs How to change image src dynamically

Question

I created a Konva image like this

var imageObj = new Image();
imageObj.onload = function() {
  var image = new Konva.Image({
    x: 200,
    y: 50,
    image: imageObj,
    width: 100,
    height: 100
  });
};
imageObj.src = '/path/to/image.jpg'

Now I need to know how to update the image src/url of created Konva.Image Object.

You can find the docs here: https://konvajs.github.io/api/Konva.Image.html

lavrton · Accepted Answer · 2017-03-29 12:14:28Z

10

You can just replace image property of Konva.Image. Or update src of native image:

var card = new Konva.Image({
    x: 200,
    y: 50,
    width: 100,
    height: 100
});

var imageObj = new Image();
imageObj.onload = function() {
  card.image(imageObj);
};
imageObj.src = '/path/to/image.jpg';

// later

var imageObj2 = new Image();
imageObj2.onload = function() {
  card.image(imageObj2);
};
imageObj2.src = '/path/to/image.jpg';

Or

var imageObj = new Image();
var card = new Konva.Image({
    x: 200,
    y: 50,
    width: 100,
    height: 100,
    image: imageObj
});


imageObj.onload = function() {
  card.getLayer().draw();
};
imageObj.src = '/path/to/image.jpg';

// later
imageObj2.src = '/path/to/image.jpg'; // it should trigger onload

answered Mar 29, 2017 at 12:14

lavrton

20.5k4 gold badges41 silver badges71 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

dominik andreas Over a year ago

This way of updating the image unfortunately never worked for me. I tried both approaches, but the card is just a white space after updating to the new image. I tried with version 7.0.3 and 7.2.4 of konvajs, but the only way I can update an image in the canvas is to remove the node and recreate it

Collectives™ on Stack Overflow

Konvajs How to change image src dynamically

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related