Assalam u alaikum friends, welcome to Sarfaraz Coding Club! Today in this tutorial you will learn how to extract text from image with JavaScript and Ninja API. If you are new here please subscribe our youtube channel and follow us on facebook and on whatsapp and allow our blog to send you notification about new projects.
Here we will create image to text converter with html css javascript.
If you wants to see video step by step then please watch this video like and share it and post a beautiful comment and then subscribe channel
So let's start >> First create files index.html, style.css and script.js
HTML
First import the basic code of html and change the title and after that add a div with class main and then in this add a form tag in which set function on submit event "submission(event)" and then create a label with input tag with type of file and then add an id "fileInput".
Then add a div with class result where we will show the text that we will get from image and in last add the jquery cdn link for using jquery's code.
Here is the code of HTML
//html code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SCC Imag to Text</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="main">
<form onsubmit="submission(event)">
<label for="file">Upload your Image</label>
<p class="instruction">Please upload image from which you wants to extract text</p>
<input type="file" id="fileInput" required>
<button type="submit">Extract Text</button>
</form>
<div class="result">
<p class="text"></p>
</div>
</div>
</body>
<script src="https://code.jquery.com/jquery-3.7.1.min.js" integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" crossorigin="anonymous"></script>
<script src="script.js"></script>
</html>
CSS
Here is the all css that will help us to style our elements.
body {
font-family: 'Arial', sans-serif;
background-color: #f4f4f4;
margin: 0;
padding: 0;
}
.main {
max-width: 600px;
margin: 50px auto;
background-color: #fff;
padding: 20px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
form {
text-align: center;
}
label {
display: block;
margin-bottom: 10px;
font-size: 18px;
color: #333;
}
.instruction {
font-size: 14px;
color: #777;
margin-bottom: 20px;
}
input[type="file"] {
display: block;
margin: 10px auto;
padding: 10px;
background-color: #f8f8f8;
border: 1px solid #ccc;
border-radius: 5px;
cursor: pointer;
transition: 0.4s;
}
input[type="file"]:hover {
background-color: #a8ffab;
}
button {
background-color: #4caf50;
color: #fff;
padding: 10px 20px;
font-size: 16px;
border: none;
border-radius: 5px;
cursor: pointer;
transition: 0.4s;
}
button:hover{
background-color: #085a0b;
}
.result {
margin-top: 30px;
}
.text {
font-size: 18px;
color: #333;
}
/* Add some styles for responsiveness */
@media (max-width: 768px) {
.main {
margin: 20px;
}
}
JavaScript
In JavaScript we will get the file from form and then send this image to the API that we are using in this tutorial. For this create function "submission(event)" where we will get the image from form and then we will send it to api this api needs api key to work for this you have to go to your account page in ninja api website and then copy from there and then paste it in 'X-Api-Key' then api will give us response in response we will get text and text coordinates but from which we wants only text then we will use map function and in which we will iterate all the text available in response and then we will combine the main text with spaces and after combining we will show the text in result div.
API Article and code Link:
Here is full JavaScript Code
function submission(event) {
event.preventDefault();
let resultshow = document.getElementsByClassName('result')[0];
resultshow.innerHTML = 'Loading...'
var formData = new FormData();
formData.append('image', $('#fileInput')[0].files[0]);
$.ajax({
method: 'POST',
url: 'https://api.api-ninjas.com/v1/imagetotext',
headers: {'X-Api-Key': 'YOUR_API_KEY'},
data: formData,
enctype: 'multipart/form-data',
processData: false,
contentType: false,
success: function (result) {
let texts = result.map(item => item.text)
let text = texts.join(' ')
resultshow.innerHTML = text;
},
error: function ajaxError(jqXHR, textStatus, errorThrown) {
alert(jqXHR.responseText);
resultshow.innerHTML = 'Failed to load'
}
});
}
And that's all. Now our project is ready.
Now upload a file that contains text and then wait for result. You will be amazed you will get the text in plan and you can copy it easily.
Great You did it!
For more interesting project bookmark our blog or follow us on whatsapp and on facebook to get notifications instantly and also other interesting coding related posts.
So Today is this now we will meet in next tutorial 🙂
0 Comments