How to pass a merged canvas data(2layers)as base64 string from the client through AJAX to the server

Last Reply 18 minutes ago By dharmendr

Posted 7 days ago

I have ton of images stored on a folder on the server , and the path of these images stored in the database. Now the users of the application will remotely access the application ,which enables them to fetch the images from the server (one at a time, on IncrementCounter button click)and display it on a canvas.

The canvas has a stylus(js plugins) , to make annotations like pen marks on the open image. This will create another layer on top of original image. 

Now I am trying to send the modified image i.e the original image merged with the 2nd layer as a base64 string (i.e imageData)through the ajax post , back to the server.

On the sever , I am not saving the data in a database. But instead I want to decode the base64 data into image and store it directly in another folder(modified images folder).

What is happening as of now is that the image data that is being passed and  created in the folder is just 1 layer of the desired image, i.e the drawn layer. But I want the image to have the original image as well as the layer drawn on it. 

$("#ContentPlaceHolder1_btnNext").click(function () {
            debugger
            var canvas = paper.project.activeLayer.view.element;
            var img = $(canvas).parent().find('img')[0];

         
            
                var mergeCanvas = $('<canvas>')
                .attr({
                    width: $(img).width(),
                    height: $(img).height()
                });

            var mergedContext = mergeCanvas[0].getContext('2d');
            mergedContext.clearRect(0, 0, $(img).width(), $(img).height());
            mergedContext.drawImage(img, 0, 0);

            mergedContext.drawImage(canvas, 0, 0);


            var image = document.getElementById("mergeCanvas[0]").toDataURL("image/png");
             
            image = image.replace('data:image/png;base64,', '');

            
            $.ajax({
                type: 'POST',
                url: 'home.aspx/MoveImages',
                data: '{ "imageData" : "' + image + '" }',
               
                contentType: 'application/json; charset=utf-8',
                dataType: 'json',
                success: function (msg) {
                    debugger
                    //alert('Image saved successfully !');
                }
             });
        });

 

[System.Web.Services.WebMethod(EnableSession = true)]
        public static void MoveImages(string imageData)
        {
            
             
 
                string fileName = xyz;
 
 
                string pathstring = @"D:\..............";
 
                    string destFile = System.IO.Path.Combine(pathstring1, ..);
string destFile1 = System.IO.Path.Combine(destFile, fileName);
 
                
 
                 
                if (File.Exists(destFile1))
                {
                    File.Delete(destFile1);
                }
                else
                {
 
                    
                    using (FileStream fs = new FileStream(destFile1, FileMode.Create))
                    {
                        using (BinaryWriter bw = new BinaryWriter(fs))
                        {
                            byte[] data = Convert.FromBase64String(imageData);
 
                            bw.Write(data, 0, data.Length);
                            bw.Close();
 
 
                        }
                    }
                }
             
}

 

You are viewing reply posted by: dharmendr 3 days ago.
Posted 3 days ago

Please share your complete code and html with js. So that i can check it.