.NET (Core and Framework)

4-Feb-14 18:36

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<list<signatureline>>(json);
foreach (var line in lines)
{
signatureGraphic.DrawLine(pen, line.lx, line.ly, line.mx, line.my);
}
}
}
return signatureImage;
}

here i am getting lines count 0 and it is not coming inside codesignatureGraphic.DrawLine

private class SignatureLine
{
public int lx { get; set; }
public int ly { get; set; }
public int mx { get; set; }
public int my { get; set; }
}
private Bitmap GetBlankCanvas()
{
var blankImage = new Bitmap(CanvasWidth, CanvasHeight);
blankImage.MakeTransparent();
using (var signatureGraphic = Graphics.FromImage(blankImage))
{
signatureGraphic.Clear(BackgroundColor);
}
return blankImage;
}

how to achieve this. anybody knows please reply me.
thanks in advance

modified 5-Feb-14 4:35am.

Richard Deeming5-Feb-14 2:57

5-Feb-14 2:57

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<List<List<double>>> lines { get; set; }
}

var signature = serializer.Deserialize<Signature>(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.

JavaScript

{
   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

ven7535-Feb-14 5:17

5-Feb-14 5:17

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 Deeming5-Feb-14 5:35

5-Feb-14 5:35

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

ven7535-Feb-14 6:11

5-Feb-14 6:11

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 Deeming5-Feb-14 6:50

5-Feb-14 6:50

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

ven7535-Feb-14 7:18

5-Feb-14 7:18

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

modified 5-Feb-14 13:31pm.

Richard Deeming5-Feb-14 8:01

5-Feb-14 8:01

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

ven7535-Feb-14 16:09

5-Feb-14 16:09

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<signature>(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<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;
}
}
}
}
}

now after returning return signatureImage; to default page, am i doing correctly to save as image because i am getting blank image the code used is as follows
var signatureImage = sigToImg.SigJsonToImage(json);

Bitmap bmp = new Bitmap(signatureImage);

bmp.Save(Server.MapPath("images\\s1.jpg"), ImageFormat.Jpeg);

bmp.Dispose();

i am getting blank image. how to achieve this. Reply me thanks in advance

modified 6-Feb-14 1:50am.

Richard Deeming6-Feb-14 1:37

6-Feb-14 1:37

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

modified 6-Feb-14 7:48am.

ven7536-Feb-14 6:54

6-Feb-14 6:54

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 Deeming6-Feb-14 8:56

6-Feb-14 8:56

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

ven7536-Feb-14 16:18

6-Feb-14 16:18

Ok. Thank you very much once again.

ven7536-Feb-14 21:34

6-Feb-14 21:34

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

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.

modified 7-Feb-14 5:17am.

ven7537-Feb-14 7:03

7-Feb-14 7:03

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.

modified 7-Feb-14 13:17pm.

Richard Deeming10-Feb-14 1:27