title: Is this possible to do some annotation (like redaction) work on the image using asp.net web application?
body: <p>I have one Image editing work on the asp.net web page.Actually, the work is i have to select the area of the image and then draw some graphical object like black rectangle box on the selected portion of the image to hide the selected part of the image(Just Similar to Redaction Work).Finally have to save the editing work back to the original image.</p>
  
  <p>i have loaded the image on my web page and also allowed the user to draw some rectangle box over the image using javascript function.</p>
  
  <p>I have also written code for saving that image back to the server...but it does not work....</p>
  
  <p>I think the control never crossed this line ( may be some error on this line)</p>
  
  <pre><code>var image = document.getElementById("Image2").toDataURL("image/png");
  </code></pre>
  
  <p>for checking purpose, i put one alert statement after the above line...but it is not printed... and nothing happened?...</p>
  
  <p>Java Script code for draw rectangle box over the image :</p>
  
  <pre><code>&lt;head&gt;
   &lt;style type="text/css"&gt;
          #rubberBand 
          {
              position: absolute;
              visibility: hidden;
              width:0px;
              height:0px;
              border: 2px;border-color:Red;
              background-color:black;
           }
      &lt;/style&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;div id="rubberBand"&gt;&lt;/div&gt;
  &lt;asp:Image ID="Image2" runat="server" Width="650px" Height="700px"/&gt;
  
  &lt;script type="text/javascript"&gt;
  
          var IMG;
  
          function startRubber(evt) {
              if (document.all) {
  
                  var r = document.all.rubberBand;
                  r.style.width = 0;
                  r.style.height = 0;
                  r.style.pixelLeft = event.x;
                  r.style.pixelTop = event.y;
                  r.style.visibility = 'visible';
                  IMG.ondragstart = cancelDragDrop; // otherwise IE will try to drag the image
              }
              else if (document.getElementById) {
                  // firefox
                  evt.preventDefault();
                  var r = document.getElementById('rubberBand');
                  r.style.width = 0;
                  r.style.height = 0;
                  r.style.left = evt.clientX + 'px';
                  r.style.top = evt.clientY + 'px';
                  r.style.visibility = 'visible';
                  r.onmouseup = stopRubber;
              }
              IMG.onmousemove = moveRubber;
          }
          function moveRubber(evt) {
              if (document.all) { // IE
                  var r = document.all.rubberBand;
                  r.style.width = event.x - r.style.pixelLeft;
                  r.style.height = event.y - r.style.pixelTop;
              }
              else if (document.getElementById) { // firefox
                  var r = document.getElementById('rubberBand');
                  r.style.width = evt.clientX - parseInt(r.style.left);
                  r.style.height = evt.clientY - parseInt(r.style.top);
              }
              return false; // otherwise IE won't fire mouseup
          }
          function stopRubber(evt) {
              IMG.onmousemove = null;
          }
  
          function cancelDragDrop() {
              window.event.returnValue = false;
          }
          IMG = document.getElementById('Image2');
          IMG.onmousedown = startRubber;
          IMG.onmouseup = stopRubber;
  
     &lt;/script&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>This is my java script code for save Image:</p>
  
  <pre><code>&lt;head&gt;
  &lt;script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.1.min.js"&gt;&lt;/script&gt;
     &lt;script type="text/javascript"&gt;
          // Send the canvas image to the server.
          $(function () {
              $("#btnSend").click(function () {
                  var image = document.getElementById("Image2").toDataURL("image/png");
                  image = image.replace('data:image/png;base64,', '');
  
                  $.ajax({
                      type: 'POST',
                      url: 'Default.aspx/UploadImage',
                      data: '{ "imageData" : "' + image + '" }',
                      contentType: 'application/json; charset=utf-8',
                      dataType: 'json',
                      success: function (msg) {
                          alert('Image sent!');
                      }
                  });
              });
          });
      &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;asp:Image ID="Image2" runat="server" Width="650px" Height="700px"/&gt;
  &lt;input id="btnSend" type="button" value="Send To Server" /&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>Back end code for save image:</p>
  
  <pre><code>[WebMethod()]
          public static void UploadImage(string imageData)
          {
  
              FileStream fs = new FileStream("D:\\vs-2010projects\\js_save\\js_save\\myimages\\image.png", FileMode.Create);
              BinaryWriter bw = new BinaryWriter(fs);
  
              byte[] data = Convert.FromBase64String(imageData);
  
              bw.Write(data);
              bw.Close();
          }
  </code></pre>