Image Uploader for user in KineticJs Canvas

Question

I'm trying to add an image uploader for users so that they can upload images from their computer onto the canvas and move it/resize like these other images. I don't have an online storage to use php, so is it possible to do this without one. These images they use won't need stored anywhere, will just be used in the canvas that one time and then they'll be able to save the canvas to their computer(so storing the image online shouldn't be needed). Anyways I could really use help with this I'm new to javascript, here is the page I have so far...

    <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> 

Answer 1

You could use the FileReader.

This has the advantage of being cross-domain security compliant so that you can use .toDataURL to save the canvas.

<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>