Untitled

<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script src="html2canvas.js"></script>
<script src="Canvas2Image.js"></script>
<script src="e-smart-zoom-jquery.min.js"></script>
<style type="text/css">
#wrapper {
width: 980px;
height: 500px;
}
</style>
</head>
<body>
<div id="wrapper" style="background-color: white" width="980px" height="500px">
<img id="imageFullScreen" src="https://s-media-cache-ak0.pinimg.com/736x/b5/41/8d/b5418dcc2ab6efa7fe51d8bffd385343.jpg">
</div>
<br/>
<input type="button" id="btnSave" value="Save PNG"/>
<input type="file" accept="image/*" name="photo" id="imgInp" onchange="loadFile(event);"/>
<div id="img-out"></div>

<script type="text/javascript">
$(document).ready(function() {

$('#imageFullScreen').smartZoom({'containerClass':'zoomableContainer'});

function moveButtonClickHandler(e){
var pixelsToMoveOnX = 0;
var pixelsToMoveOnY = 0;

switch(e.target.id){
case "leftPositionMap":
pixelsToMoveOnX = 50;
break;
case "rightPositionMap":
pixelsToMoveOnX = -50;
break;
case "topPositionMap":
pixelsToMoveOnY = 50;
break;
case "bottomPositionMap":
pixelsToMoveOnY = -50;
break;
}
$('#imageFullScreen').smartZoom('pan', pixelsToMoveOnX, pixelsToMoveOnY);
    }

});

$(function() {
  $("#btnSave").click(function() {
    html2canvas($("#wrapper"), {
    onrendered: function(canvas) {
      var img = canvas.toDataURL("image/png");
      $('body').append('<img src="'+img+'"/>');
    }
  });
});
});


var loadFile = function(event) {
  oldimg = $('.imageFullScreen').attr('src');
  var preview = document.getElementById('imageFullScreen');
  preview.src = URL.createObjectURL(event.target.files[0]);
  newimg = preview.src;
  if(newimg.indexOf('/null') > -1) {
      preview.src = oldimg;
      $('#imageFullScreen').smartZoom({'containerClass':'zoomableContainer'});
  }
};

</script>
</body>
</html>