Javascript KineticJs画布中用户的图像上载程序

我正在尝试为用户添加一个图像上传器，这样他们就可以将计算机中的图像上传到画布上，并像其他图像一样移动图像/调整图像大小。我没有使用php的在线存储，所以不使用php也可以做到这一点。他们使用的这些图像不需要存储在任何地方，只需在画布中使用一次，然后他们就可以将画布保存到计算机上（因此不需要在线存储图像）。无论如何，我真的需要帮助，我是javascript新手，这是我到目前为止的页面

    <style>
  canvas:active{
  cursor:pointer;
  }
.bg1{
  background-image:url('http://s23.postimg.org/bxtmsd2tn/boutiquebase.jpg');
  }
  .bg2{
  background-image:url('http://s4.postimg.org/bnevxi1y5/wall8.png');
  }

   .bg3{
  background-image:url('http://s13.postimg.org/6cgbaoblh/wall9.png');
  }
</style>

    <div id="container" class="bg1"></div>


  <img src="http://s23.postimg.org/bxtmsd2tn/boutiquebase.jpg" width="50px" id="wall1">
            <img src="http://s4.postimg.org/bnevxi1y5/wall8.png" width="50px" id="wall2">
  <img src="http://s13.postimg.org/6cgbaoblh/wall9.png" width="50px" id="wall3">


<table><tr>
  <td>
    <center> <img src="http://s29.postimg.org/yn6t21ah3/sidetable.png" id="shower" width="100px" style="cursor:pointer;">
   <br>
      <span id="hider1" class="sendingBut" style="cursor:pointer;">Remove </span>

      </center></td>
    </tr>
  </table>

    <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v5.0.2.min.js"></script>

    <script>
         $('#wall2').click(function() {
    $('#container').removeClass('bg3').removeClass('bg1').addClass('bg2');
});    

            $('#wall1').click(function() {
    $('#container').removeClass('bg3').removeClass('bg2').addClass('bg1');
});   

            $('#wall3').click(function() {
    $('#container').removeClass('bg1').removeClass('bg2').addClass('bg3');
});   


              </script>
<script>


  function update(activeAnchor) {
        var group = activeAnchor.getParent();

        var topLeft = group.find('.topLeft')[0];
        var topRight = group.find('.topRight')[0];
        var bottomRight = group.find('.bottomRight')[0];
        var bottomLeft = group.find('.bottomLeft')[0];
        var image = group.find('.image')[0];

        var anchorX = activeAnchor.x();
        var anchorY = activeAnchor.y();

        // update anchor positions
        switch (activeAnchor.name()) {
          case 'topLeft':
            topRight.y(anchorY);
            bottomLeft.x(anchorX);
            break;
          case 'topRight':
            topLeft.y(anchorY);
            bottomRight.x(anchorX);
            break;
          case 'bottomRight':
            bottomLeft.y(anchorY);
            topRight.x(anchorX); 
            break;
          case 'bottomLeft':
            bottomRight.y(anchorY);
            topLeft.x(anchorX); 
            break;
        }

        image.setPosition(topLeft.getPosition());

        var width = topRight.x() - topLeft.x();
        var height = bottomLeft.y() - topLeft.y();
        if(width && height) {
          image.setSize({width:width, height: height});
        }
      }
      function addAnchor(group, x, y, name) {
        var stage = group.getStage();
        var layer = group.getLayer();

        var anchor = new Kinetic.Circle({
          x: x,
          y: y,
          stroke: '#666',
          fill: '#ddd',
          strokeWidth: 2,
          radius: 8,
          name: name,
          draggable: true,
          dragOnTop: false,
  opacity: .01
        });

    anchor.on('mouseout', function () {
        this.opacity(.01);
        layer.draw()
    });
    anchor.on('mouseenter', function () {
        this.opacity(1.00);
        layer.draw()
    });

        anchor.on('dragmove', function() {
          update(this);
          layer.draw();
        });
        anchor.on('mousedown touchstart', function() {
          group.setDraggable(false);
          this.moveToTop();
        });
        anchor.on('dragend', function() {
          group.setDraggable(true);
          layer.draw();
        });
        // add hover styling
        anchor.on('mouseover', function() {
          var layer = this.getLayer();
          document.body.style.cursor = 'pointer';
          this.setStrokeWidth(4);
          layer.draw();
        });
        anchor.on('mouseout', function() {
          var layer = this.getLayer();
          document.body.style.cursor = 'default';
          this.strokeWidth(2);
          layer.draw();
        });

        group.add(anchor);
      }
      function loadImages(sources, callback) {
        var images = {};
        var loadedImages = 0;
        var numImages = 0;
        for(var src in sources) {
          numImages++;
        }



        for(var src in sources) {
          images[src] = new Image();
          images[src].onload = function() {
            if(++loadedImages >= numImages) {
              callback(images);
            }
          };
          images[src].src = sources[src];
        }
      }
      function initStage(images) {
        var stage = new Kinetic.Stage({
          container: 'container',
          width: 1000,
          height: 764
        });

    var layer = new Kinetic.Layer();


        var furniGroup = new Kinetic.Group({
          x: 270,
          y: 100,
          draggable: true
        });
        var yodaGroup = new Kinetic.Group({
          x: 100,
          y: 110,
          draggable: true
        });



        /*
         * go ahead and add the groups
         * to the layer and the layer to the
         * stage so that the groups have knowledge
         * of its layer and stage
         */

        layer.add(furniGroup);
        layer.add(yodaGroup);
        stage.add(layer);








   document.getElementById('shower').addEventListener('click', function() {
         furniImg.show();
layer.draw();
           }, false);


   document.getElementById('hider1').addEventListener('click', function() {
         furniImg.hide();
layer.draw();
           }, false);




        var furniImg = new Kinetic.Image({
          x: 0,
          y: 0,
  width: 338,
          height: 285,
          image: images.furni,
                    name: 'image'
        });

        furniGroup.add(furniImg);
   addAnchor(furniGroup, 0, 0, 'topLeft');
        addAnchor(furniGroup, 338, 0, 'topRight');
        addAnchor(furniGroup, 338, 285, 'bottomRight');
        addAnchor(furniGroup, 0, 285, 'bottomLeft');

        furniGroup.on('dragstart', function() {
          this.moveToTop();
        });

        var yodaImg = new Kinetic.Image({
          x: 0,
          y: 0,
          image: images.yoda,
          width: 93,
          height: 104,
          name: 'image'
        });

        yodaGroup.add(yodaImg);
        addAnchor(yodaGroup, 0, 0, 'topLeft');
        addAnchor(yodaGroup, 93, 0, 'topRight');
        addAnchor(yodaGroup, 93, 104, 'bottomRight');
        addAnchor(yodaGroup, 0, 104, 'bottomLeft');

        yodaGroup.on('dragstart', function() {
          this.moveToTop();
        });

        stage.draw();
      }



      var sources = {
        furni: 'http://s29.postimg.org/yn6t21ah3/sidetable.png',
        yoda: 'http://www.html5canvastutorials.com/demos/assets/yoda.jpg'
      };
      loadImages(sources, initStage);





    </script> 

画布：活动{
光标：指针；
}
.bg1{
背景图像：url（'http://s23.postimg.org/bxtmsd2tn/boutiquebase.jpg');
}
.bg2{
背景图像：url（'http://s4.postimg.org/bnevxi1y5/wall8.png');
}
.bg3{
背景图像：url（'http://s13.postimg.org/6cgbaoblh/wall9.png');
}


去除
$（'#wall2'）。单击（函数（）{
$（“#容器”）.removeClass（'bg3'）.removeClass（'bg1'）.addClass（'bg2'）；
});    
$（'#wall1'）。单击（函数（）{
$（“#容器”）.removeClass（'bg3'）.removeClass（'bg2'）.addClass（'bg1'）；
});   
$（'#wall3'）。单击（函数（）{
$（“#容器”）.removeClass（'bg1'）.removeClass（'bg2'）.addClass（'bg3'）；
});   
函数更新（activeAnchor）{
var group=activeAnchor.getParent（）；
var topLeft=group.find（'.topLeft'）[0]；
var topRight=group.find（'.topRight'）[0]；
var bottomRight=group.find（'.bottomRight'）[0]；
var bottomLeft=group.find（'.bottomLeft'）[0]；
var image=group.find（'.image'）[0]；
var anchorX=activeAnchor.x（）；
var anchorY=activeAnchor.y（）；
//更新锚点位置
开关（activeAnchor.name（））{
案例“左上角”：
右上角.y（锚定）；
左下角.x（anchorX）；
打破
案例“右上角”：
左上角。y（锚定）；
右下角.x（anchorX）；
打破
案例“右下角”：
左下角.y（锚定）；
右上角.x（主播x）；
打破
案例“左下角”：
右下角.y（锚定）；
左上角.x（anchorX）；
打破
}
image.setPosition（topLeft.getPosition（））；
var width=topRight.x（）-topLeft.x（）；
var height=bottomLeft.y（）-topLeft.y（）；
if（宽度和高度）{
setSize（{width:width，height:height}）；
}
}
函数addAnchor（组、x、y、名称）{
var stage=group.getStage（）；
var layer=group.getLayer（）；
var anchor=新的动力学圆({
x:x，
y:y，
笔划：'#666'，
填写：“#ddd”，
冲程宽度：2，
半径：8，
姓名:姓名,，
真的，
龙顶：错，
不透明度：.01
});
anchor.on（'mouseout'，function（）{
这是不透明度（.01）；
layer.draw（）
});
anchor.on（'mouseenter'，function（）{
这是不透明度（1.00）；
layer.draw（）
});
anchor.on（'dragmove'，function（）{
更新（本）；
layer.draw（）；
});
on（'mousedown touchstart'，function（）{
组。可设置拖动（false）；
这是moveToTop（）；
});
on（'dragend'，function（）{
group.SetDragable（真）；
layer.draw（）；
});
//添加悬停样式
on（'mouseover'，function（）{
var layer=this.getLayer（）；
document.body.style.cursor='pointer'；
这是设置行程宽度（4）；
layer.draw（）；
});
anchor.on（'mouseout'，function（）{
var layer=this.getLayer（）；
document.body.style.cursor='default'；
这是冲程宽度（2）；
layer.draw（）；
});
组。添加（锚定）；
}
函数loadImages（源、回调）{
var图像={}；
var loadedImages=0；
var numImages=0；
用于（源中的var src）{
numImages++；
}
用于（源中的var src）{
图像[src]=新图像（）；
图像[src].onload=function（）{
如果（++LoadeImage>=numImages）{
回调（图像）；
}
};
图像[src].src=源[src]；
}
}
函数初始化阶段（图像）{
var阶段=新的动力学阶段({
容器：'容器'，
宽度：1000，
身高：764
});
var layer=新的动能层（）；
var furniGroup=新的动力学组({
x:270，
y:100，
德拉格布尔：是的
});
var yodaGroup=新的动力学组({
x:100，
y:110，
德拉格布尔：是的
});
/*
*继续添加组
*到图层和到图层的图层
*阶段，使小组有知识
*它的层次和阶段
*/
图层。添加（furniGroup）；
图层添加（yodaGroup）；
阶段。添加（层）；
document.getElementById（'shower'）。addEventListener（'click'，function（）{
furnimg.show（）；
layer.draw（）；
}，假）；
document.getElementById（'hider1'）。addEventListener（'click'，function（）{
furnimg.hide（）；
layer.draw（）；
}，假）；
var furnimg=新的动力学图像({
x:0,，
y:0，
宽度：338，
身高：285，
图片：images.furni，
名称：“图像”
});
furniGroup.add（furnimg）；
addAnchor（furniGroup，0,0，'左上'）；
addAnchor（furniGroup，338，0，'右上'）；
addAnchor（furniGroup，338285，“右下角”）；
addAnchor（furniGroup，0285，'bottomLeft'）；
furniGroup.on（'dragstart'，function（））{
这是moveToTop（）；
});
var yodaImg=n
<html>
<head>
  <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
  <style>
    canvas {border: 1px solid #aaa;}
  </style>
  <script>
  $(function(){
        var canvas = document.getElementById("canvas");
        var ctx = canvas.getContext("2d");

        // drag image to canvas
        canvas.addEventListener("dragover", function(e){ e.preventDefault(); }, false);
        canvas.addEventListener("drop", function(e){
          var files = e.dataTransfer.files;
          if (files.length>0) {
              var file=files[0];
              if (typeof FileReader !== "undefined" && file.type.indexOf("image") != -1) {
                var reader=new FileReader();
                reader.onload=function (e) {
                    var dragImage=new Image();
                    dragImage.onload=function(){
                        newDraggedImage(dragImage);
                    };
                    dragImage.src=e.target.result;
                };
                reader.readAsDataURL(file);
              }
          }
          e.preventDefault();
        }, false);

        function newDraggedImage(img){
            ctx.drawImage(img,0,0);
        }

  }); // end $(function(){});
  </script>

</head>
<body>
    <p>Drag an image onto the canvas.</p>
    <canvas id="canvas" width="300" height="300"></canvas>
</body>
</html>