title: Capture selected area in Chrome and send it to my own server
body: <p>I want to capture a selected area on a web page, just like many chrome plugin do, such as <a href="https://chrome.google.com/webstore/detail/lightshot-screenshot-tool/mbniclmhobmnbdlbpiphghaielnnpgdp?hl=en" rel="nofollow">Lightshot</a>, <a href="https://chrome.google.com/webstore/detail/capture-webpage-screensho/mcbpblocgmgfnpjjppndjkmgjaogfceg?hl=en" rel="nofollow">Fireshot</a>. I have two requirements:</p>
  
  <ol>
  <li>To capture any selected area on the page</li>
  <li>Send the captured image to my server so that I can retrieve it</li>
  <li>(optional) annotation on the captured image</li>
  </ol>
  
  <p>Previously I wanted to use javascript/jQuery to implement my own. The only thing I found was <a href="http://html2canvas.hertzen.com/" rel="nofollow">html2canvas</a>, but it does support capturing selected areas.</p>
  
  <p>Then I turned for those plugins. They are quite nice since they do what I want and support annotations. However, they do not have a setting to send captured imaged to my server (they upload to their site, or google drive, or share on social media). </p>
  
  <p>One thing I can do is to upload to their site, then download it to my server. However, I have problems again. </p>
  
  <ol>
  <li>How can I detect when the user has clicked the 'upload' button so that the server can start downloading the image</li>
  <li>How do I know the url of the uploaded image?</li>
  </ol>
  
  <p>Any suggestion is welcome. Thanks!</p>