Is this possible to do some annotation (like redaction) work on the image using asp.net web application?

StackOverflow https://stackoverflow.com/questions/16767859

Question

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.

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.

I have also written code for saving that image back to the server...but it does not work....

I think the control never crossed this line ( may be some error on this line)

var image = document.getElementById("Image2").toDataURL("image/png");

for checking purpose, i put one alert statement after the above line...but it is not printed... and nothing happened?...

Java Script code for draw rectangle box over the image :

<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>

This is my java script code for save Image:

<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>

Back end code for save image:

[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();
        }
Was it helpful?

Solution

You seem to have searched for a ready-made solution, which I don't find strange you didn't find.

You need to break up your problem in small steps that can be solved by you or have been solved by others. In short:

  1. Render an image to a webpage
  2. Allow the user to 'redact' the image by dragging a box of some sort around the image using JavaScript
  3. Upload the box coordinates to your site, where you draw the box on the image and save it as a new image

Alternatively, you can execute step 3 clientside, using a JavaScript canvas, where the browser sends the redacted image back to the server.

You will now have to point out with what of the above points you're having trouble.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top