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) を呼び出して画像を読み込むことができます。

同じ関数を呼び出して別の画像を追加したい。出来ますか？

どんな助けでも大歓迎です..