带有图像上传的 KineticJs 画布

Question

我希望能够在他们使用画布时暂时从个人计算机将图像上传到此画布上。我还希望它像我现在设置的其他 2 张图像一样可移动和可调整大小。有人可以帮助创建一个与我目前拥有的代码一致的代码。到目前为止，这就是我所拥有的一切，所以如果你能用我的部件所拥有的正确的类/ID 来命名的话。谢谢

    <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: 422,
          height: 243,
          name: 'image'
        });

        yodaGroup.add(yodaImg);
        addAnchor(yodaGroup, 0, 0, 'topLeft');
        addAnchor(yodaGroup, 422, 0, 'topRight');
        addAnchor(yodaGroup, 422, 243, 'bottomRight');
        addAnchor(yodaGroup, 0, 243, 'bottomLeft');

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

        stage.draw();
      }



      var sources = {
        furni: 'http://s29.postimg.org/yn6t21ah3/sidetable.png',
        yoda: 'http://s28.postimg.org/58nni8dzh/blackf10.png'
      };
      loadImages(sources, initStage);





    </script>

Answer 1

此代码允许您将图像从用户桌面拖到 Kinetic 容器 div 上。

一个新的 Kinetic.Image 将从拖放的图像中创建。

示例代码和演示：http://jsfiddle.net/m1erickson/w9onv0nm/

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Prototype</title>
    <script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
    <script src="http://d3lp1msu2r81bx.cloudfront.net/kjs/js/lib/kinetic-v5.1.0.min.js"></script>
<style>
body{ background-color: ivory; }
canvas{border:1px solid red;}
body{padding:20px;}
#container{
  border:solid 1px #ccc;
  margin-top: 10px;
  width:350px;
  height:350px;
}
</style>        
<script>
$(function(){

    var stage = new Kinetic.Stage({
        container: 'container',
        width: 350,
        height: 350
    });
    var layer = new Kinetic.Layer();
    stage.add(layer);


    // drag image to the div with id='container'
    var container=document.getElementById("container");
    container.addEventListener("dragover", function(e){ e.preventDefault(); }, false);
    container.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);


    // create a new Kinetic.Image from the dropped image
    function newDraggedImage(img){
        layer.add(new Kinetic.Image({
            image:img,
            draggable:true,
        }));
        layer.draw();
    }


}); // end $(function(){});

</script>       
</head>
<body>
    <h4>Drag an image onto the container to create a Kinetic.Image</h4>
    <div id="container"></div><br>
</body>
</html>

[添加 - 为丢弃的图像创建组和锚点]

警告！这是未经测试的代码...可能需要调整！

function createGroup(groupId,img,x,y){

    var group = new Kinetic.Group({
      id:groupId,
      x:x,
      y:y,
      draggable: true
    });
    layer.add(group);

    var image = new Kinetic.Image({
      x: 0,
      y: 0,
      image:img,
      width:img.width,
      height:img.height,
      name: 'image'
    });
    group.add(image);

    addAnchor(group, 0, 0, 'topLeft');
    addAnchor(group, img.width, 0, 'topRight');
    addAnchor(group, img.width, img.height, 'bottomRight');
    addAnchor(group, 0, img.height, 'bottomLeft');

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

    return(group);
}