making an image box in Razor page

Question

making an image box in Razor page

Anjali Agarwal 1,531

I want to make an image box on my razor page so that users can type or sign their name in that box. I want something like adobe acrobat offers. below is the screen shot:

User's image

How can I achieve this.

Anonymous

2023-03-23T09:44:33.48+00:00

Hi,@Anjali Agarwal,would you accept drawing the signature with html canvas and uploading the signature as a image ?
Anjali Agarwal 1,531 Reputation points

2023-03-23T15:26:44.8833333+00:00

Hi @Anonymous ,

Yes, I can do that, but I also need the typing part too. Both typing and drawing. something like this:

and this:
Ali Benchaaban 85 Reputation points

2023-03-23T15:43:26.6733333+00:00
Hello,
Yes, it is possible to create a signature pad using Canvas and ASP.NET Core Razor Pages. If that is the case let me know so i can post for you a piece of code
Anjali Agarwal 1,531 Reputation points

2023-03-24T01:05:22.1266667+00:00

Hi @Ali Benchaaban , yes

can you please share the code. I can use the canvas using Jquery : https://cdnjs.cloudflare.com/ajax/libs/signature_pad/1.3.4/signature_pad.min.js

I dont know how can user type in a text box like the type option in pdf:

Your help will be greatly appreciated.

Anonymous

Hi,@Anjali Agarwal A minimal example may help:

<div id="my_painter">
    <canvas id="canvas" tabindex="0"></canvas>
</div>
<script>
    var tempContext = null;
    window.onload = function () {
        var canvas = document.getElementById("canvas");
        console.log(canvas.parentNode.clientWidth);
        canvas.width = canvas.parentNode.clientWidth;
        canvas.height = canvas.parentNode.clientHeight;        
        tempContext = canvas.getContext("2d");
        tempContext.fillStyle = "blue";
        tempContext.font = "20px Georgia";
        canvas.addEventListener('keydown', doKeyDown, true);
        canvas.focus();        
        window.addEventListener('keydown', doKeyDown, true);
       
    }
    function doKeyDown(e) {
        var keyID = e.keyCode ? e.keyCode : e.which;
        if (keyID === 87) {
            tempContext.fillText("W", 100, 60);
            e.preventDefault();
        }
    }
</script>

When you press "W" with your keyboard,it would draw a "W"

3.24

There're many related js libraries already, you could refer them directly

Anjali Agarwal 1,531 Reputation points

2023-03-25T05:30:45.37+00:00

Hi @Anonymous ,

The code only lets me type "W". I want to type all the letters from A to z. Does that mean that I need to specify separately in fillText.

2 answers

Your answer

Anonymous

2023-03-23T09:44:33.48+00:00

Hi,@Anjali Agarwal,would you accept drawing the signature with html canvas and uploading the signature as a image ?
Anjali Agarwal 1,531 Reputation points

2023-03-23T15:26:44.8833333+00:00

Hi @Anonymous ,

Yes, I can do that, but I also need the typing part too. Both typing and drawing. something like this:

and this:
Ali Benchaaban 85 Reputation points

2023-03-23T15:43:26.6733333+00:00

Hello,
Yes, it is possible to create a signature pad using Canvas and ASP.NET Core Razor Pages. If that is the case let me know so i can post for you a piece of code
Anjali Agarwal 1,531 Reputation points

2023-03-24T01:05:22.1266667+00:00

Hi @Ali Benchaaban , yes

can you please share the code. I can use the canvas using Jquery : https://cdnjs.cloudflare.com/ajax/libs/signature_pad/1.3.4/signature_pad.min.js

I dont know how can user type in a text box like the type option in pdf:

Your help will be greatly appreciated.
Anonymous

2023-03-24T07:06:45.8566667+00:00

Hi,@Anjali Agarwal A minimal example may help:

<div id="my_painter"> <canvas id="canvas" tabindex="0"></canvas> </div> <script> var tempContext = null; window.onload = function () { var canvas = document.getElementById("canvas"); console.log(canvas.parentNode.clientWidth); canvas.width = canvas.parentNode.clientWidth; canvas.height = canvas.parentNode.clientHeight; tempContext = canvas.getContext("2d"); tempContext.fillStyle = "blue"; tempContext.font = "20px Georgia"; canvas.addEventListener('keydown', doKeyDown, true); canvas.focus(); window.addEventListener('keydown', doKeyDown, true); } function doKeyDown(e) { var keyID = e.keyCode ? e.keyCode : e.which; if (keyID === 87) { tempContext.fillText("W", 100, 60); e.preventDefault(); } } </script>

When you press "W" with your keyboard,it would draw a "W"

There're many related js libraries already, you could refer them directly
Anjali Agarwal 1,531 Reputation points

2023-03-25T05:30:45.37+00:00

Hi @Anonymous ,

The code only lets me type "W". I want to type all the letters from A to z. Does that mean that I need to specify separately in fillText.

Answer 1

Ali Benchaaban 85

Hello @Anjali Agarwal,
In this link you wil find a demo from signaturePad github repo : https://thread-pond.github.io/signature-pad/examples/accept-signature.html
i think this what are you looking for.

the implementation in this link : https://github.com/thread-pond/signature-pad/blob/main/examples/accept-signature.html

if you will find any problems implemeting the code with razor pages let me know.

BENCHAABAN Ali

Anjali Agarwal 1,531 Reputation points

2023-03-25T04:39:36.3733333+00:00

Hi @Ali BENCHAABAN ,

I tried to implement the solution to razor pages and it does not seem to work. It works great in simple html file, but as soon as I put this in razor pages, it stops working. I have attached the regular HTML solution given the git repository and the razor page. I dont see any difference, but html works fine and razor page does not. Can you please look into this and tell me what am I doing wrong. I even checked the rendered html and both look same. the file name for regular HTML solution is test(2).txt, if you change the extension to html. It will start working. The razor page solution is Index(2).txt, you can change the extension to .cshtml. Your help in this will be highly appreciated. test (2).txt Index (2).txt. I also have the layout page in razor. please see attached three files:

layout.txt

test(2).txt

Index(2).txt

_Layout.txt
Anjali Agarwal 1,531 Reputation points

2023-03-25T06:58:43.1933333+00:00

Hi @Ali BENCHAABAN ,

The above code works fine in HTML page, but when I put the code on razor page then it did not work. I even checked the rendered HTML and both looks same. I have attached the html file, razor file and Layout file. can you please see what I can change that it will start working.

Index (2).txt - this is the Razor file

test (2).txt - this is HTML file

_Layout.txt - this is the layout file

any help will be greatly appreciated.
Ali Benchaaban 85 Reputation points

2023-03-25T12:52:09.84+00:00

Hello,
Your application is .net core web or blazor ?
i'll find some time this weekend to create a git repo for you with the solution
Anjali Agarwal 1,531 Reputation points

2023-03-25T15:12:35.4833333+00:00

Hi @Ali Benchaaban ,

That's ok. I will try to figure out.

Answer 2

Bruce (SqlWork.com) 77,766 Volunteer Moderator

there are many javascript signature libraries. google "javascript signature library"

Share via

making an image box in Razor page

2 answers

Your answer