+ 5

How to add a handwriting input box in my website?

Hello You all! I am making a website for kids to learn alphabets In that website there is a scoreboard that will display a score, A Alphabet is given to kid to draw it in the box below the Alphabet . You can see all that in my code , But the problem is that how would i ad a handwriting-input box there. And get the data that is written in the box using JavaScript, just like google handwriting keyboard but it should be on my website.so that i would get the letter written by the kid and check whether the kid has written the letter right or wrong and give the score. Here is my code:- https://code.sololearn.com/WBURMgDByREJ/?ref=app

1st Oct 2020, 9:49 AM
Arnav Kumar [Less/Not Active]
Arnav Kumar [Less/Not Active] - avatar
13 ответов
+ 2
Ore I will try !
2nd Oct 2020, 5:00 PM
Arnav Kumar [Less/Not Active]
Arnav Kumar [Less/Not Active] - avatar
+ 1
But how to find which letter the user has written
1st Oct 2020, 10:44 AM
Arnav Kumar [Less/Not Active]
Arnav Kumar [Less/Not Active] - avatar
+ 1
Arnav Kumar that's a big task ,I thought you must have figured out that already ,you need to use machine learning for that ,I have no idea about it ,Google it ,probably you will find some libraries that will ease the task
1st Oct 2020, 10:48 AM
Abhay
Abhay - avatar
+ 1
Arnav Kumar sorry never tried that stuff
1st Oct 2020, 10:50 AM
Abhay
Abhay - avatar
+ 1
Its ok Abhay
1st Oct 2020, 10:50 AM
Arnav Kumar [Less/Not Active]
Arnav Kumar [Less/Not Active] - avatar
2nd Oct 2020, 1:02 PM
Ore
Ore - avatar
+ 1
Ore can it be used to identify a kids handwriting
2nd Oct 2020, 1:38 PM
Arnav Kumar [Less/Not Active]
Arnav Kumar [Less/Not Active] - avatar
+ 1
Would I have to use canvas to generate image for cloud vision api
2nd Oct 2020, 1:40 PM
Arnav Kumar [Less/Not Active]
Arnav Kumar [Less/Not Active] - avatar
+ 1
Arnav Kumar Yes, that is perhaps the easiest way. Based on the documentation, the process should be similar to this. 1. The kid writes on the canvas. 2. Convert the handwriting to a base 64 encoded string with the toDataURL() function https://developer.mozilla.org/en-US/docs/Web/API/HTMLCanvasElement/toDataURL 3. Send the base 64 string to the vision API. Your request may look like this in JSON { "requests": [ { "image": { "content": base64img👈 }, "features": [ { "type": "DOCUMENT_TEXT_DETECTION" } ] } ] } 4. The detected letter will be found in responses.text in the response JSON
2nd Oct 2020, 1:57 PM
Ore
Ore - avatar
+ 1
Ore is there any limitations on use of this Or how do i send json to api using JavaScript i don't know that And is it totally free
2nd Oct 2020, 2:00 PM
Arnav Kumar [Less/Not Active]
Arnav Kumar [Less/Not Active] - avatar
+ 1
There is a free tier, where you are allowed 1,000 units per Feature Request per month free. You can get started for free. https://cloud.google.com/pricing You can send JSON with an asynchronous request by changing the Content-Type header. fetch(url, { headers: { 'Content-Type': 'application/json', }, method: 'POST', body: jsonBody, });
2nd Oct 2020, 2:11 PM
Ore
Ore - avatar
0
use canvas line method and ontouch or onpointer events to let user draw alphabets
1st Oct 2020, 10:15 AM
Abhay
Abhay - avatar
0
Abhay do you know any api to do this for me
1st Oct 2020, 10:49 AM
Arnav Kumar [Less/Not Active]
Arnav Kumar [Less/Not Active] - avatar