javascript - 如何动态添加另一个图像？使用画布

Question

我可以使用 caman 函数（动态）添加图像。

 function resz(){

        Caman("#photoCanvas", function  () {
            try {

                this.render(function () {
                    var image = this.toBase64();
                    var sources = {
                        darthVader: image
                    };

                    // loadImages(sources, initStage);
                    initStage(image);
                    //loadImages(sources, initStage)
                });
            } catch (e) { alert(e) }
        });

        var startAngle = 0;
        var minImgSize = 10;

下面的功能正在图像上添加锚点......

        function update(activeAnchor) {
           ....            }

        function addAnchor(group, x, y, name, dragBound) {
           ...
        }
  function radians(degrees) {
           ..
        }

        function degrees(radians) {
           ..
        }

        function angle(cx, cy, px, py) {
          ...
        }

        function distance(p1x, p1y, p2x, p2y) {
           ...
        }

        function getRotatingAnchorBounds(pos, group) {
          ...
        }

这是我可以在重复的画布中加载带有锚点的图像的功能。

function initStage(image) {
 var stage = new Kinetic.Stage({
                container: 'loginDiv',
                width: 800,
                height: 500,
            });

            var layer = new Kinetic.Layer();

            var bg = new Kinetic.Rect({
                width: stage.getWidth(),
                height: stage.getHeight(),
                x: 0,
                y: 0
            });

            layer.add(bg);

            layer.on('mousedown', function (e) {
                var node = e.targetNode;
                select(node);
            });

            var darthVaderGroup = new Kinetic.Group({
                x: 5,
                y: 5,
                draggable: true,
                fill: 'black'
            });

            layer.add(darthVaderGroup);
            stage.add(layer);
 var canvas = document.createElement("canvas");
            var ctx = canvas.getContext("2d");

            var img = new Image();
            // img.onload = start;
            img.crossOrigin = "anonymous";
            img.src = image;
            // alert(img.src);


            // draw the star image to the offscreen canvas
            canvas.width = img.width;
            canvas.height = img.height;
            ctx.drawImage(img, 0, 0);

            var darthVaderImg = new Kinetic.Image({
                x: 0,
                y: 0,
                //image: document.getElementById("photoCanvas").getContext("2d").toImageURL(),
                //image: image.darthVader,
                image: canvas,
                // draggable: true,
                width: 780,
                height: 480,
                name: 'image',
                stroke: '#F8F0F0',
                strokeWidth: 7, 
                fill: '#F8F0F0' 

            });

            darthVaderGroup.add(darthVaderImg);
            addAnchor(darthVaderGroup, 0, 0, 'topLeft', 'none');
            addAnchor(darthVaderGroup, darthVaderImg.getWidth(), 0, 'topRight', 'none');
            addAnchor(darthVaderGroup, darthVaderImg.getWidth(), darthVaderImg.getHeight(), 'bottomRight', 'none');
            addAnchor(darthVaderGroup, 0, darthVaderImg.getHeight(), 'bottomLeft', 'none');
            addAnchor(darthVaderGroup, darthVaderImg.getWidth() / 2, darthVaderImg.getHeight() / 2, 'rotateAnchor', 'rotate');

            darthVaderGroup.on('dragstart', function () {
                this.moveToTop();
            });
            // layer.add(darthVaderImg);
            // layer.draw();
            stage.draw();
}

我可以使用画布动态添加图像并通过调用 initStage(image) 加载图像。

我想通过调用相同的函数来添加另一个图像。可能吗？

任何帮助，将不胜感激..