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

Question

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!
179451-codeforsession.txt

Answer 1

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.
179506-behind.txt
179905-front.txt

Edit

 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);  
            pdfDoc.Open();  
            iTextSharp.text.Image img = iTextSharp.text.Image.GetInstance(data);  
             pdfDoc.Add(img);  
             pdfDoc.Close();             
        }      
        protected void Button1_Click1(object sender, EventArgs e)  
        {  
            Process.Start(Server.MapPath("2.pdf"));  
        }  

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.