Save Canvas Control Image to a PDF using JavaScript, WebMethod andiTextSharp

Qamar, Mo 106 Reputation points

I have a Canvas control (id=cnv) along with a few Input (type=text) controls in an aspx page and an input button control. When button is clicked, it calls StartSign() which calls SignResponse(event) and that calls the function SetValues(objResponse, imageWidth, imageHeight) to render signature on the “cnv” control.
The function SetValues(objResponse, imageWidth, imageHeight) sends all Session Variables (FName, LName) as a delimited string “name” to code behind in a WebMethod which saves data to a pdf file using iTextSharp.

BUT, I do not know how to pass and save the image (signature) which is created in the function SetValues().

Please help!

A set of technologies in the .NET Framework for building web applications and XML web services.
3,318 questions
0 comments No comments
{count} votes

Accepted answer
  1. Lan Huang-MSFT 26,526 Reputation points Microsoft Vendor

    Hi @Qamar, Mo ,
    From your description, I suggest that you can use jqu ery toDataURL to convert the canvas to image/png format first.
    We can then use ajax to send this image to a web method in code-behind.
    Finally, we can save the image in the web method.
    You can refer to the demo below.


     public static void UploadImage(string imageData)  
                byte[] data = Convert.FromBase64String(imageData);  
                Document pdfDoc = new Document();           
                var output = new FileStream(HttpContext.Current.Server.MapPath("2.pdf"), FileMode.Create);  
                PdfWriter writer = PdfWriter.GetInstance(pdfDoc, output);  
                iTextSharp.text.Image img = iTextSharp.text.Image.GetInstance(data);  
            protected void Button1_Click1(object sender, EventArgs e)  


    Best regards,
    Lan Huang

    If the answer is the right solution, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".
    Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.

0 additional answers

Sort by: Most helpful