Hi,

I am using ASP.Net web application.here.

1. i have to show one image to user and
2. allow them to draw one black rectangle box over the image to hide some part on the image.
3. Finally i have to update this modified image back to the server using java script functionality.


Now, i have done my first and second steps...

This is the javascript code for draw a black rectangle box over the image...

Code:
<head>
 <style type="text/css">
        #rubberBand 
        {
            position: absolute;
            visibility: hidden;
            width:0px;
            height:0px;
            border: 2px;border-color:Red;
            background-color:black;
         }
    </style>
</head>

<body>
<div id="rubberBand"></div>
<asp:Image ID="Image2" runat="server" Width="650px" Height="700px"/>

<script type="text/javascript">

        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;

   </script>
</body>
It is working fine for drawing black rectangle box over the image.Now i what i want to do is, just save this updated image(means old previous image with new drawn black rectangle box) to server by using java script.

for this, my JavaScript code is Like below...but it doesn't work for me...
Code:
<head>
<script type="text/javascript" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.6.1.min.js"></script>
   <script type="text/javascript">
        // 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!');
                    }
                });
            });
        });
    </script>
</head>
<body>
<asp:Image ID="Image2" runat="server" Width="650px" Height="700px"/>
<input id="btnSend" type="button" value="Send To Server" />
</body>