www.webdeveloper.com
Results 1 to 3 of 3

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

  1. #1
    Join Date
    May 2013
    Posts
    1

    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. #2
    Join Date
    Jul 2013
    Posts
    2
    hi ,Im currently working with image save in .NET ,any idea obout the following codes?
    Code:
    using RasterEdge.Imaging.Basic.Core;
    using RasterEdge.Imaging.Basic.Codec;
    using RasterEdge.Imaging.Basic;
    
    namespace RE__Test
    {
        public partial class Form1 : Form
        {
            public Form1()
            {
                InitializeComponent();
            }
    
            private void button1_Click(object sender, EventArgs e)
            {
                string fileName = "c:/Sample.png";
    
                REImage reImage = REFile.OpenImageFile(fileName);
    
                REFile.SaveImageFile(reImage, "c:/reimage.png", new PNGEncoder());
            }
        }
    }

  3. #3
    Join Date
    Apr 2013
    Posts
    26
    Quote Originally Posted by apple78 View Post
    hi ,Im currently working with image save in .NET ,any idea obout the following codes?
    Code:
    using RasterEdge.Imaging.Basic.Core;
    using RasterEdge.Imaging.Basic.Codec;
    using RasterEdge.Imaging.Basic;
    
    namespace RE__Test
    {
        public partial class Form1 : Form
        {
            public Form1()
            {
                InitializeComponent();
            }
    
            private void button1_Click(object sender, EventArgs e)
            {
                string fileName = "c:/Sample.png";
    
                REImage reImage = REFile.OpenImageFile(fileName);
    
                REFile.SaveImageFile(reImage, "c:/reimage.png", new PNGEncoder());
            }
        }
    }
    thanks for sharing, that's awesome but somewhat overpriced for me who will just use it only once, do you have some cheaper or even free versions, any suggestion will be appreciated!

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

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
  •  
HTML5 Development Center



Recent Articles