Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    May 2013
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    How can i save my modified image to server using javascript?

    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>

  • #2
    Senior Coder
    Join Date
    Dec 2010
    Posts
    2,355
    Thanks
    11
    Thanked 558 Times in 551 Posts
    If I were you I wouldn't use JSON as a format to transfer data to the server ... and you don't seem to receive any response from the server, so you can also omit the dataType

    Try this
    Code:
                    $.ajax({
                        type: 'POST',
                        url: 'Default.aspx/UploadImage',
                        data: { imageData : image},
                        success: function (msg) {
                            alert('Image sent!');
                        }
                    });
    On server side you should then see a postback content of type "POST" as "imageData".


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •