0

I have been looking for a way to call the javascript function from my default.aspx.cs file...after reading some questions here, i discovered this approach(Call JavaScript function from C#) However I need to use the returned value from javascript function in my .net code.

I need to grab users input on canvas and save it to an image and append that image to a pdf file.

Here is the js function:

    getSignatureImage: function () {
    var tmpCanvas = document.createElement('canvas')
      , tmpContext = null
      , data = null

       tmpCanvas.style.position = 'absolute'
       tmpCanvas.style.top = '-999em'
       tmpCanvas.width = element.width
       tmpCanvas.height = element.height
       document.body.appendChild(tmpCanvas)

       if (!tmpCanvas.getContext && FlashCanvas)
           FlashCanvas.initElement(tmpCanvas)

           tmpContext = tmpCanvas.getContext('2d')


           tmpContext.fillStyle = settings.bgColour
           tmpContext.fillRect(0, 0, element.width, element.height)
           tmpContext.lineWidth = settings.penWidth
           tmpContext.strokeStyle = settings.penColour

           drawSignature(output, tmpContext)
           data = tmpCanvas.toDataURL.apply(tmpCanvas, arguments)

           document.body.removeChild(tmpCanvas)
           tmpCanvas = null

           return data
        }

Here is the pdf generating code in my default.aspx.cs:

        document.SetMargins(20f, 20f, 85f, 20f);
        long milliseconds2 = DateTime.Now.Ticks / TimeSpan.TicksPerMillisecond;
        //Document document = new Document();
        var output = new FileStream(Server.MapPath("~/PDFs/Test-File-" + milliseconds2 + ".pdf"), FileMode.Create);
        pdfUrlLink = "Test-File-" + milliseconds2 + ".pdf";
        var writer = PdfWriter.GetInstance(document, output);

        // the image we're using for the page header      
        iTextSharp.text.Image imageHeader = iTextSharp.text.Image.GetInstance(Request.MapPath(
        "~/Images/pdfHeader.jpg"
        ));

        // instantiate the custom PdfPageEventHelper
        MyPageEventHandler ex = new MyPageEventHandler()
        {

            ImageHeader = imageHeader
        };
        // and add it to the PdfWriter
        writer.PageEvent = ex;
        document.Open();
        createContent();
        document.Close();
        submitEmail(); 
          }
    }

This is the modified code from other questions to integrate both world together:

        string SignData = null;
        Page page = HttpContext.Current.CurrentHandler as Page;
        page.ClientScript.RegisterStartupScript(typeof(Page), "Test", "<script type='text/javascript'>" + SignData +"=getSignatureImage();</script>");

It doesn't work...Any help or input will be appreciated!

Community
  • 1
  • 1
BigGirl1017
  • 61
  • 1
  • 3
  • 12

3 Answers3

2

You don't want to call the javascript function from your C# code. What you want to do is post the data from your javascript function to your web app so your C# code can handle it.

The client HTML where the canvas is would have a button that when clicked calls your javascript to get the dataUrl from the canvas and puts the it in a form field - like a hidden input or something - and then submits the form.

Your C# code would pull the value out of the Request.Form collection. The value is a Base64 encoded image so you'll need to convert it to a bitmap and then use it in your PDF output.

Here's a quick fiddle that demonstrates: http://jsfiddle.net/LSRYG/

function submitImage(){
    var url = document.getElementById('canv').toDataURL();
    //this will show you the image data but you won't actually want to do this.  It's just for the demo
    alert(url);
    //put it in the hidden imput and submit the form.
    document.getElementById('canvImg').value = url;

    document.getElementById('theform').submit();
}

I'm sure you can find out how to convert the dataURL string to an image in your C# code.

Matthew
  • 2,210
  • 1
  • 19
  • 30
  • this function is very good. The problem is that i need to use .net function instead of javascript function in this project, otherwise it won't be able to use other plugins. – BigGirl1017 Mar 14 '14 at 20:46
  • .net and javascript are completely different and independent from each other. You can still get what you want here. The way I understand your question is that a user is going to draw a picture or something on a canvas in the browser and you want to put that picture in the PDF that you give back to the user, right? The javascript function gets the image and sends it to the .net code. Your .net code will take the image and embed it in the PDF so you'll still be able to use your plugins on the .net side. – Matthew Mar 14 '14 at 20:56
  • Yes that's exactly what needs to be done here. so this function is putting image in the id canvImg which are accessible in the c# and can be used to import. that's solved the problem of passing value through. Thanks!!! – BigGirl1017 Mar 14 '14 at 21:34
0

What you found is how you can run tell the browser to run Javascript on the page load within an ASP.NET application.

What I think you're looking for is a Javascript compiler within .NET. A quick google led me to this link: Embedding JavaScript engine into .NET

Community
  • 1
  • 1
evasilevsky
  • 175
  • 5
0

can you change whatever control causes the postback to just run some javascript? Then you can just call a __dopostback with getSignatureImage() as the event argument and figure it out from there.

Basically have something with an onclick="SendEmail();" with function SendEmail{ _doPostBack([controlClientID], getSignatureImage()); } then on your pageload/ifpostback check for __EVENTTARGET(first param) == whatever client id, and if it matches, do your processing of __EVENTARGUMENT(second param) which will be your getSignatureImage() results

either that or make a webmethod or service to send the email with the getSignatureImage() results

jumpdart
  • 1,702
  • 16
  • 35