<html><body>
    <canvas id='test_canvas' width='640px' height='480px' style='border:1px solid #d3d3d3'>
    </canvas>
    <script language="JavaScript">
      var ctx = document.getElementById('test_canvas').getContext('2d');
      var img = new Image();
      img.onload = function() {
        ctx.drawImage(img, 0, 0);
      };
      img.crossOrigin = 'anonymous';
      img.src = "http://192.168.1.116:8080/?action=snapshot";

      function modify(){
        var imgData=ctx.getImageData(10,10,100,100);
        ctx.putImageData(imgData,10,100);
        echo("done!");
      }
    </script>
    <a href='#' onclick='modify()'>Modify</a>
</body></html>