title: How to edit a pdf in the browser and save it to the server
body: <p>
  Here are the requirements, the users needs to be able to view uploaded PDFs in the browser. They need to be able to add notes to the PDF and save the updated PDF to the server without having to save it to their machine and open it outside the browser.
  </p>
  <p>
  Any ideas on how to achieve this are welcomed.
  </p>
  <p><i>by the way I am working with an asp.net website (in C#).</i></p>
  <hr />
  <p>
  I have no control over what the pdf looks like. It is uploaded client-side then other users need to view and an notes on top of the pdf.<br>
  </p>
  <p>
  The solution that I was thinking is to render the PDF to a jpeg and use javascript to plot coordinates of where the note should go.
  </p>
  <p>
  here is a quick example of the html and javascript that create the json of note (using jQuery.)
  </p>
  <pre><code>    &lt;html xmlns=&quot;http://www.w3.org/1999/xhtml&quot; &gt;
  &lt;head runat=&quot;server&quot;&gt;
      &lt;title&gt;&lt;/title&gt;
      &lt;style type=&quot;text/css&quot;&gt;
          *
          {
              margin:0;
              padding:0;
          }
          #PDF
          {
              position:absolute;
              top:0;
              bottom:0;
              width:600px;
              height:800px;
              background:url(assets/images/gray.png) repeat;
              float:left;
          }
          #results
          {
              float:right;
          }
          .comment
          {
              position:absolute;
              border:none;
              background-color:Transparent;
              height:300px;
              width:100px;
              overflow:auto;
              float:left;
              top:0;
              right:0;
              font-family: Arial;
              font-size:12px;
              
          }
          div.comment
          {
              padding-top:-20px;
          }
          .comment a.button
          {
              display:block;
              padding-top:-20px;
          }
      &lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;  
      &lt;div&gt;
          &lt;div id=&quot;PDF&quot;&gt;&lt;/div&gt;
          
          &lt;div id=&quot;results&quot;&gt;
              
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  
  &lt;script type=&quot;text/javascript&quot; src=&quot;script/jquery.js&quot;&gt;&lt;/script&gt;
  &lt;script type=&quot;text/javascript&quot;&gt;
      var points = [];
      $(&quot;#PDF&quot;).click(function(e) {
          if ($(&quot;textarea.comment&quot;).length == 0) {
              var that = this;
              var txt = $(&quot;&lt;textarea class='comment'&gt;&lt;/textarea&gt;&quot;).css({ top: e.pageY, left: e.pageX }).blur(function() { $(this).remove(); }).keypress(function(e2) {
                  if (e2.keyCode == 13 &amp;&amp; !e.shiftKey) {
                      var that2 = this;
                      $(&quot;#PDF&quot;).append($(&quot;&lt;div class='comment'&gt;&quot;).html(that2.value.replace(/\r/gi, &quot;&lt;br&gt;&quot;)).css({ top: e.pageY, left: e.pageX }));
                      $(this).remove();
                      points.push({ &quot;x&quot;: e.pageX, &quot;y&quot;: e.pageY, &quot;text&quot;: that2.value })
                      $(&quot;#results&quot;).append('{ &quot;x&quot;: ' + e.pageX + ', &quot;y&quot;: ' + e.pageY + ', &quot;text&quot;: &quot;' + that2.value + '&quot; }&lt;br/&gt;');
                  }
              });
              $(this).append(txt);
              txt.each(function() { this.focus(); })
          }
      }); 
  &lt;/script&gt;
  </code></pre>
  <p><b>
  So now I need to figure out how to:<br>
  <ol>
  <li>Render a pdf to jpeg.</li>
  <li>Recreate the PDF putting the annotations on top on it.</li> 
  </ol>
  </b></p>