CODEWITHSUNDEEP
jquerykonvajs
Sunil Dora
Sunil Dora

Reputation: 1472

How to add base64 image in konvajs.image source

I'm trying to add the base64 image into the konvaJS image, but not able to add it. If someone can help me to do this it would be great.

Please check my code,

var stage = new Konva.Stage({
    container: 'imgId',
    width: width,
    height: height
});
konvasStage = stage;

// add canvas element
var layer = new Konva.Layer();
stage.add(layer);

var darthVaderGroup = new Konva.Group({
    x: 0,
    y: 0,
    draggable: false
});
layer.add(darthVaderGroup);

// darth vader
let darthVaderImg = new Konva.Image({
    width: 200,
    height: 200
});

var imageObj1 = new Image();
imageObj1.onload = function() {
    darthVaderImg.image(imageObj1);
    layer.draw();
};
imageObj1.src = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAQAAAAECAYAAACp8Z5+AAAAI0lEQVQYV2NkQAb7//9nhPP3///P4MjICBGAckBMRmQOSAAAgboLwv3ivvAAAAAASUVORK5CYII=';

Thanks in advance.

Upvotes: 2

Views: 3929

Answers (1)

lavrton
lavrton

Reputation: 20288

You just need to add darthVaderImg into the scene:

let darthVaderImg = new Konva.Image({
    width: 200,
    height: 200
});
darthVaderGroup.add(darthVaderImg);

https://jsbin.com/rifazetowo/edit?html,js,output

Upvotes: 5

Related Questions