如何在konvajs.image源中添加base64图像

Question

我正在尝试将 base64 图像添加到 konvaJS 图像中，但无法添加它。如果有人可以帮助我做到这一点，那就太好了。

请检查我的代码，

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=';

提前致谢。

Answer 1

你只需要添加darthVaderImg到场景中：

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

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