not able to Deserialize json signature lines

ven753

hi I am using json signature and trying deserialize but i am not able to deserialize. below is my json string {"lines":[[[156.44,96.44],[156.44,95.33],[155.33,94.22],[154.22,93.11],[154.22,90.89],[153.11,89.78],[150.89,87.56],[150.89,84.22],[148.67,83.11],[147.56,80.89],[146.44,78.67],[144.22,76.44],[142,74.22],[139.78,70.89],[136.44,67.56],[134.22,65.33],[130.89,63.11],[128.67,60.89],[126.44,59.78],[124.22,57.56],[123.11,57.56],[122,56.44],[118.67,56.44],[116.44,56.44],[114.22,56.44],[112,56.44],[108.67,56.44],[105.33,56.44],[99.78,56.44],[96.44,57.56],[93.11,59.78],[89.78,60.89],[87.56,62],[86.44,64.22],[84.22,66.44],[83.11,67.56],[80.89,69.78],[79.78,70.89],[78.67,74.22],[77.56,75.33],[77.56,77.56],[77.56,79.78],[77.56,82],[77.56,84.22],[77.56,86.44],[77.56,88.67],[78.67,90.89],[78.67,93.11],[80.89,95.33],[82,97.56],[85.33,98.67],[87.56,99.78],[89.78,102],[93.11,102],[96.44,104.22],[100.89,105.33],[107.56,107.56],[114.22,108.67],[120.89,109.78],[125.33,110.89],[130.89,110.89],[134.22,112],[137.56,113.11],[139.78,114.22],[142,115.33],[143.11,115.33],[144.22,116.44],[145.33,116.44],[147.56,117.56],[147.56,118.67],[148.67,119.78],[149.78,122],[150.89,122],[150.89,124.22],[150.89,126.44],[150.89,127.56],[150.89,129.78],[150.89,132],[150.89,134.22],[149.78,135.33],[148.67,137.56],[147.56,139.78],[145.33,142],[144.22,144.22],[143.11,145.33],[139.78,146.44],[137.56,147.56],[135.33,147.56],[133.11,147.56],[129.78,147.56],[126.44,148.67],[124.22,148.67],[120.89,148.67],[118.67,148.67],[114.22,148.67],[109.78,148.67],[105.33,148.67],[102,148.67],[99.78,148.67],[97.56,148.67],[94.22,148.67],[92,148.67],[88.67,148.67],[86.44,148.67],[84.22,148.67],[83.11,148.67],[82,148.67],[79.78,148.67],[79.78,147.56],[77.56,147.56],[76.44,146.44],[75.33,146.44],[75.33,146.44],[75.33,146.44],[75.33,145.33],[74.22,145.33],[74.22,143.11],[73.11,140.89],[70.89,138.67],[70.89,137.56],[69.78,135.33],[69.78,135.33],[69.78,135.33],[69.78,133.11],[69.78,133.11],[69.78,133.11],[69.78,133.11],[69.78,132]]]} i used code like below to deserialize public Bitmap SigJsonToImage(string json) { var signatureImage = GetBlankCanvas(); if (!string.IsNullOrEmpty(json)) { using (var signatureGraphic = Graphics.FromImage(signatureImage)) { signatureGraphic.SmoothingMode = SmoothingMode.AntiAlias; var pen = new Pen(PenColor, PenWidth); var serializer = new JavaScriptSerializer(); var lines = serializer.Deserialize

Richard Deeming

The JSON you're trying to deserialize doesn't match the structure of the class you're trying to deserialize it to. You can deserialize it to the following class:

private class Signature
{
public List>> lines { get; set; }
}

var signature = serializer.Deserialize(json);

This will give you a single object with a single property called lines. This property is a list containing a single element. That element is a list containing a sequence of lists, each of which contains a pair of numbers.

{
lines: [
[
[156.44, 96.44],
[156.44, 95.33],
[155.33, 94.22],
[154.22, 93.11],
[154.22, 90.89],
[153.11, 89.78],
...
]
]
}

How you map that data to your expected list of SignatureLine objects is unclear, since you haven't provided an example of how you expect to get four integers from two floating point numbers.

"These people looked deep within my soul and assigned me a number based on the order in which I joined." - Homer

ven753

Thank you very much for replying. How you said like that i got one object with a single property called lines. Now i need to implement by taking into forloop but i am not able to. below is the code. foreach (var line in signature) { signatureGraphic.DrawLine(pen, line.lx, line.ly, line.mx, line.my); } to get into for loop we have to add below code or not please specify private class SignatureLine { public int lx { get; set; } public int ly { get; set; } public int mx { get; set; } public int my { get; set; } } after this it will return return signatureImage; again it will come to default page as shown in below code as a bitmap var signatureImage = sigToImg.SigJsonToImage(json); then this signatureImage is system.drawing.bitmap and i need to save as image as follows Bitmap bmp = new Bitmap(signatureImage); bmp.Save(Server.MapPath("images\\s1.jpg"), ImageFormat.Jpeg); bmp.Dispose(); but i am not able to get into for loop. How to achieve this. Please reply me. Thanks in advance

Richard Deeming

Nope, that still doesn't make any sense to me. Your list contains pairs of floating point numbers; how do you intend to get four integer values from that? For example, the first value in your list is: [156.44, 96.44] Given those two numbers, what values are you expecting in the lx, ly, mx and my properties of the SignatureLine class?

"These people looked deep within my soul and assigned me a number based on the order in which I joined." - Homer

ven753

I dont know i got code while searching, i think we are at end stage and can we change so that it has to work by changing signatureGraphic.DrawLine parameter signatureGraphic.SmoothingMode = SmoothingMode.AntiAlias; foreach (var lines in signature) { signatureGraphic.DrawLine(pen, lines.lx, line.ly, line.mx, line.my); } so that signatureGraphic can draw line. Please reply. thanks in advance

Richard Deeming

You still haven't explained how you are expecting to get four integers out of each pair of floating-point numbers. Without that information, it is impossible to convert your source data to a series of calls to the DrawLine method. If you don't know what the data means, then you can't do anything with it!

"These people looked deep within my soul and assigned me a number based on the order in which I joined." - Homer

ven753

actually that is (lx, ly) is the start point of the line, and (mx, my) is the end point of the line. i think that it is clear. but i dont know how to achieve this. Reply me thanks in advance

Richard Deeming

OK, that makes more sense. There's still the slight issue that the JSON is using floating-point numbers but the DrawLine method expects integers, but you can probably ignore that for now. You'll still need to deserialize to the class I posted previously, but you can use an iterator method to construct the sequence of SignatureLine objects from the data:

private sealed class SignatureLine
{
public int lx { get; set; }
public int ly { get; set; }
public int mx { get; set; }
public int my { get; set; }
}

private class Signature
{
public List<List<List<double>>> lines { get; set; }

public IEnumerable<SignatureLine> SignatureLines
{
    get
    {
        foreach (List<List<double>> stroke in lines)
        {
            if (stroke.Count == 1) continue;
            
            List<double> lastPoint = stroke\[0\];
            Debug.Assert(lastPoint.Count == 2);
            
            foreach (List<double> point in stroke.Skip(1))
            {
                Debug.Assert(point.Count == 2);
                
                // For now, just round the floating point values to the nearest integer:
                yield return new SignatureLine
                {
                    lx = (int)Math.Round(lastPoint\[0\]),
                    ly = (int)Math.Round(lastPoint\[1\]),
                    mx = (int)Math.Round(point\[0\]),
                    my = (int)Math.Round(point\[1\])
                };
                
                lastPoint = point;
            }
        }
    }
}

}

...

var serializer = new JavaScriptSerializer();
var signature = serializer.Deserialize<Signature>(json);
foreach (SignatureLine line in signature.SignatureLines)
{
signatureGraphic.DrawLine(pen, line.lx, line.ly, line.mx, line.my);
}

"These people looked deep within my soul and assigned me a number based on the order in which I joined." - Homer

ven753

Now it is looping inside and also values are getting public Bitmap SigJsonToImage(string json) { var signatureImage = GetBlankCanvas(); if (!string.IsNullOrEmpty(json)) { using (var signatureGraphic = Graphics.FromImage(signatureImage)) { signatureGraphic.SmoothingMode = SmoothingMode.AntiAlias; var pen = new Pen(PenColor, PenWidth); var serializer = new JavaScriptSerializer(); var signature = serializer.Deserialize(json); foreach (SignatureLine line in signature.SignatureLines) { signatureGraphic.DrawLine(pen, line.lx, line.ly, line.mx, line.my); } } } return signatureImage; } private Bitmap GetBlankCanvas() { var blankImage = new Bitmap(CanvasWidth, CanvasHeight); blankImage.MakeTransparent(); using (var signatureGraphic = Graphics.FromImage(blankImage)) { signatureGraphic.Clear(BackgroundColor); } return blankImage; } private sealed class SignatureLine { public int lx { get; set; } public int ly { get; set; } public int mx { get; set; } public int my { get; set; } } private class Signature { public List>> lines { get; set; } public IEnumerable SignatureLines { get { foreach (List> stroke in lines) { if (stroke.Count == 1) continue; List lastPoint = stroke[0]; Debug.Assert(lastPoint.Count == 2); foreach (List point in stroke.Skip(1)) { Debug.Assert(point.Count == 2); // For now, just round the floating point values to the nearest integer: yield return new SignatureLine { lx = (int)Math.Round(lastPoint[0]), ly = (int)Math.Round(lastPoint[1]), mx = (int)Math.Round(point[0]), my = (int)Math.Round(point[1]) }; lastPoint = point; } } } }

Richard Deeming

Since the signatureImage is already a Bitmap, I'm not sure why you're creating a new Bitmap to save it; you should be able to use:

signatureImage.Save(Server.MapPath("~/images/s1.jpg"), ImageFormat.Jpeg);

Other than that, there's no obvious problem with the code that's saving the image. You'll need to step through your code to check that you're getting the values out of the JSON, that the pen you're using has a suitable colour and width, and that the lines you're drawing are within the bounds of the picture. The last point is particularly important; if all the lines you're drawing are outside the bounds of the picture, then you won't be able to see them. I've just run your code to a 200 x 200 pixel canvas, using a 1 pixel black pen on a white background, and I get an image with a hand-drawn "S" on it.

"These people looked deep within my soul and assigned me a number based on the order in which I joined." - Homer

ven753

thank you very much, like you have said, i changed picel to width 400 and height 200 and pen size 4 and now am able to get the image. I really liked your response. can i have ur email id if u dont mind so that next time if i get any other work doubt i can send a amail. thanks once again.

Richard Deeming

Glad to hear you got it sorted. If you have any future questions, please post them to the forums. That way, more people can see and potentially answer the questions.

"These people looked deep within my soul and assigned me a number based on the order in which I joined." - Homer

ven753

Ok. Thank you very much once again.

ven753

Hi now i am trying to pass that image url from default page to html page as follows public string path = "images/s1.jpg"; and in html ![](Default.aspx?Code=<%= path%>) while loading only image has to display but i am not getting, blank image i am getting. even if i add source directly in html like below if i see in design view image will show and if i send that html file mail as shown below System.Net.Mail.MailMessage mail = new System.Net.Mail.MailMessage(); mail.From = new MailAddress("emailid"); mail.To.Add("emailid"); mail.IsBodyHtml = true; mail.Subject = "Policy Acceptance"; string FilePath = Server.MapPath("~/sendmail.htm"); FileStream f1 = new FileStream(FilePath, FileMode.Open); StreamReader sr = new StreamReader(f1); string str = sr.ReadToEnd(); str = str.Replace("[[[user]]]", "name"); f1.Close(); mail.Body = str; SmtpClient smtp = new SmtpClient("server ip", portnumber); smtp.Send(mail); after sending mail, mail will recieve but image will like blank. I need to pass the image url from default page to html page, whlile html file loading only it has to show image and after sending that html mail image has to display in that mail. how to achieve this. reply me, thanks in advance.

ven753

hi now i aded LinkedResource myimage = new LinkedResource(serpath); // Create HTML view AlternateView htmlMail = AlternateView.CreateAlternateViewFromString(str, null, "text/html"); // Set ContentId property. Value of ContentId property must be the same as // the src attribute of image tag in email body. myimage.ContentId = "companylogo"; htmlMail.LinkedResources.Add(myimage); mail.AlternateViews.Add(htmlMail); so it sorted out and image is embedding to HTML and is working from default page only by accessing html page. but one problem is again if i redraw or overwrite the image after mail sending i am trying to delete that file by using folowing code if (System.IO.File.Exists(serpath)) { System.IO.File.Delete(serpath); } but it is giving The process cannot access the file serpath because it is being used by another process. How to resolve this. Reply me , thanks in advance. if i create new image with different name means it creating and saving but once again if try for same image name am getting following error An exception of type 'System.Runtime.InteropServices.ExternalException' occurred in System.Drawing.dll but was not handled in user code Additional information: A generic error occurred in GDI+. i need to overwrite same image also. how to resolve this Reply me , thanks in advance.

Richard Deeming

Make sure you're calling Dispose on the MailMessage instance after you've sent it. The simplest approach is to wrap it in a using block:

using (MailMessage mail = new MailMessage())
{
...
SmtpClient smtp = new SmtpClient();
smtp.Send(mail);
}

"These people looked deep within my soul and assigned me a number based on the order in which I joined." - Homer