3

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

abhiklpm
  • 1,603
  • 2
  • 16
  • 21

1 Answers1

9

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
lavrton
  • 18,973
  • 4
  • 30
  • 63
  • 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 – dominik andreas May 05 '21 at 12:09