Transforming Thomas J Bradley's signature pad JSON into a PNG file using C# programming language

I have been experimenting with the Signature Pad plugin developed by Thomas J Bradley and successfully converted JSON signature to PNG using PHP. Now I am looking to achieve the same result using C#.

There is a supplemental class called SignatureToImageDotNet available for this purpose, however, I have encountered difficulties in getting it to work. I must mention that I am relatively new to ASP.NET / C#. At this point, I have set up a website in Webmatrix, implemented the signature capture form, and managed to receive the JSON output on a page, but I am struggling to convert it into a PNG image. While I have created an 'App_Code' folder and placed the 'SignatureToImage.cs' file inside it, I am uncertain about how to call it.

I believe that someone with experience in ASP.NET / C# would find this task simple, and I am hopeful that either someone has previously accomplished this or could provide guidance on how to do it effectively, given that the documentation available is quite concise.

Answer №1

Great job on creating the App_Code folder, that's a step many people overlook. When it comes to calling classes in ASP.NET Web Pages, it's similar to PHP. You simply create a code block at the top of your cshtml page, which will run when the page loads:

http://www.asp.net/web-pages/tutorials/introducing-aspnet-web-pages-2/getting-started

Based on what else is happening in your request (more info or code would help), you should be able to start using the SignatureToImage class within a razor block at the top of your page:

default.cshtml

@{
     if (IsPostback) {
         var sigToImg = new SignatureToImage();
         var signatureImage = sigToImg.SigJsonToImage(signatureJson);
         // do something with the image!
     }
 }

<html>
....

I understand this answer may leave room for more questions, so please don't hesitate to ask about how Web Pages and C# work if you need more specific guidance.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Printing the object name in CreateJS can be achieved by accessing the name property

var stage = new createjs.Stage("demoCanvas"); console.log(stage.constructor.name);//prints a <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js></script> <script src="https://code.createjs.com/createjs-2015.11.26.mi ...

Determine the availability of a distant website through AJAX requests

My website runs PHP's cURL to check the online status of 5 different URLs, however, this process tends to slow down the page load time significantly, especially if one of the sites being checked is not working. Someone suggested using jQuery's a ...

Can someone guide me on how to organize a div structure into a table format with the help of JQuery

I am new to JQuery and I have created a table using divs instead of the traditional table structure. Each row has the same ids, which I thought would help me sort the table. Here's an example of my code: <div class="column_title">Column 1</ ...

Tips for changing the JSON result of a method in a WCF service

I'm currently exploring how to customize the name of the JSON object returned from a WCF service to a web client via an AJAX call, rather than using the default wrapper. Despite my efforts, I haven't been able to find any relevant articles on thi ...

Issue: Node.js Express unable to access static files when the route is nested more than one folder level deep.Resolution

Before we delve into the question, let me share with you the folder structure of my node.js express app: /home server.js index.html /app /routes public.js /public /css main.css In my server.js file, ...

Determine the selected radio button

----EDIT---- I am developing a jQuery mobile application and I need to determine which radio button is selected. This is the JavaScript code I'm using: function filter(){ if(document.getElementById('segment1').checked) { aler ...

When the textfield mui is set to shrink, an additional space appears in the label when using a font size of 12px

Struggling to customize the appearance of the textField component, particularly with the label when it is minimized: import * as React from "react"; import TextField from "@mui/material/TextField"; import { createTheme } from "@mui ...

The success method for fetching data fails to trigger, instead displaying only a 'parsererror' message, despite the browser actually receiving the data

There are two collections in my code, BlueCollection and RedCollection. BlueCollection works perfectly fine as it loads data from an array stored in a variable. However, RedCollection is encountering some problems while fetching data from a different array ...

Tips for navigating to the top of the browser window from the middle or bottom using JavaScript in Protractor

I am in need of clicking the element positioned at the bottom of the page first and then I must click on an element located at the top of the page. In other words, scroll up where it is not visible to the browser. To scroll down, I have used: browse ...

Tips for updating a column with just one button in AngularJS

On my list page, there is an Unapproved button. I am new to angular and struggling to figure out how to retrieve the post's id and update the corresponding column in the database to mark it as approved. Can someone provide guidance on how to accomplis ...

Storing JSON data in an array using JavaScript is a powerful method to

Here is an example of JSON data: [{ "address": "A-D-1", "batch": [{ "batch_number": "B-123", "cost": [{ "cost": "C1" }] }] }, { "address": "A-85-1", "batch": [{ "batch_number": "B-6562", ...

Encountering issues while attempting to utilize pdf2json in a TypeScript environment

When attempting to import pdf2json (3.0.1) into my Node project using TypeScript, I encountered the following error: "Could not find a declaration file for module 'pdf2json'." I also tried installing @types/pdf2json for TypeScript but found tha ...

Unable to locate the React Native variable named "NetworkStatus"

I have been working on implementing a code to test internet connectivity using react native NetInfo from '@react-native-community/netinfo'. Unfortunately, I keep running into an error that says "Can't find variable: connectionStatus&quo ...

The Discord.js script fails to send embedded messages as intended

Issue with sending embedded messages using Discord.js code Embed code not functioning properly: Error code received: ...

Updating lodash when it depends on jshint: A guide to NPM

After successfully passing an audit in npm, I received the following results: Now, I am attempting to update my lodash package but I'm unsure of the correct method to do so. I attempted using npm -i --save lodash, however this created another package ...

Managing elements within another element in Angular

I am currently exploring the use of Component Based Architecture (CBA) within Angular. Here is the situation I am dealing with: I have implemented three components each with unique selectors. Now, in a 4th component, I am attempting to import these compon ...

Promises and Their Valuable Variables

Recently I began learning JavaScript and I'm encountering some confusion. Here's the code snippet that is causing me trouble: api.posts .browse({ limit: 5, include: 'tags,authors' }) .then(posts => { posts.forEach(post =&g ...

Is it better to deploy a JS app to the browser, or should I consider using nw.js

Is there a tool available for developing a javascript application that can be deployed as either a browser-based or native app using nwjs or Atom Electron? It should only utilize browser-compatible features and not node's native features. Maybe th ...

Angular 4 with Typescript allows for the quick and easy deletion of multiple selected rows

I am currently working on an application where I need to create a function that will delete the selected checkboxes from an array. I have managed to log the number of checkboxes that are selected, but I am struggling to retrieve the index numbers of these ...

Simulated function for handling express functions

I'm currently working on a server.js file that includes an app.get function. To test this function using "jest", I am having trouble writing a mock function for the app.get implementation shown below. app.get('/api/getUser', (req, res) => ...