"Extracting Text from Images: Convert Images to Text using Optical Character Recognition

While referencing a live Codepen demonstration available at this link, the application functions correctly when the "choose file" button is clicked to upload an image from the local computer and extract text from it. However, my question is how can I upload a Web Image URL such as this one, rather than from local files, using a button that I have designated in my demonstration to output the OCR text result?

Any assistance would be greatly appreciated :) 

<div class="content extra"><input id="file" type="file" onchange="process(window.lastFile=this.files[0])"></div>

I have attempted changing the "onchange" attribute to "onclick", but it did not work.

javascripthtmlcssocr

Answer №1

If you want to include an input field in your HTML, here is how you can do it:

<div class="content extra">
  <input id="file" type="file" onchange="handleFile(window.lastFile=this.files[0])">
</div>
<div class="content extra">
  <label for="imgURL">Alternatively, you can paste the image URL: </label>
  <input id="imgURL" type="text" onchange="handleInput(value)">
</div>

In your JavaScript function, make sure to check whether the parameter is a string or not. If it is a string, it means that it contains a URL, so set this URL as the source value:

function handleInput(inputData){
  $(".result").html("");
  var src;
  if(typeof(inputData) == 'string') {
    src = inputData
  } else {
    src = (window.URL ? URL : webkitURL).createObjectURL(inputData);
  }
  // Perform further actions here...
  //...
}

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

Creating an Android button styled in blue using HTML

When using my android smartphone, a button on my website gets a blue selection color when clicked, but this does not happen when using a desktop browser. I have tried using outline:none but it doesn't work. button:active { outline: none ! ...

htmlcssbutton

Can variable values be utilized as a union type within Typescript?

I'm attempting to achieve a setup similar to the following example using Typescript: const fruitApple:string = 'Apple'; const fruitOrange:string = 'Orange'; export type FruitOptions = fruitApple | fruitOrange //the compiler doe ...

javascripttypescripttypescript-typings

Simple trick to transfer an object or variable value from an HTML script tag to an angular controller

function displayMessage(msg) { console.log("message type is" + msg.type); var reply = document.getElementById('reply'); var para = document.createElement('p'); para.style.wordWrap = 'break-word'; para.appen ...

javascriptjqueryangularjsangularjs-scopejavascript-objects

NodeJs, the optimal approach for synchronous development

I am a beginner with NodeJs and Express frameworks. I have come to understand that Node operates with only one thread on the server side, which has posed some challenges in developing my application effectively. Within my routes folder, there is a file ca ...

javascriptmysqlnode.jsexpresssynchronization

Clicking the button will close the active tab in Firefox

I need help with a webpage that has a popup. When the user clicks the OK button in the popup, I want the current tab to close. The OK button is an HTML input tag. I've tried various ways of using JavaScript's close method and searched online, but ...

javascriptjqueryhtmlbuttononclick

jQuery Hover Event Handling

I'm encountering an issue with syncing hover effects in two separate tables. Oddly, the first part of the function works fine on its own. However, when I add the second part, it breaks the first part without any errors. I refrained from including it ...

javascriptjqueryhtmlcss

Unable to retrieve template generated using the innerHTML directive in Angular 4

I am in need of accessing the elements of a dynamically created component's DOM through the innerHTML directive in Angular. Below is my main component: import {Component} from '@angular/core'; @Component({ selector: 'app-root', ...

javascriptangulartypescript

How to align a list item to the right using CSS

I'm having trouble aligning items in a list to the right and adjusting their width based on content length. Unfortunately, I haven't been able to make it work despite multiple attempts. Take a look at my code snippet below: .messages { over ...

htmlcss

Ways to extract dropdown selection into a .php script

I am trying to capture the selected dropdown value in my .php file, which is used for sending emails. When a user selects one of the 6 options from the dropdown menu, I want that selected option to be included as the email subject. Below is the HTML code ...

javascriptphpjqueryhtmlemail

Error: jQuery Datatables Library encounters an issue with undefined variable "oColumn"

I'm encountering an issue with implementing the jQuery Datatables library on my Joomla website's table. The script partially styles the table, but then stops (changing header and text colors, but missing datatables controls). http://datatables.ne ...

phpjqueryhtmldatatableshtml-table

A computer program designed to determine a series of numbers needed to complete a square grid

Given the numbers 1, 2, 3, 4, 5, 6, 7, 8, I am seeking to replace the x's in such a way that each side adds up to the number in the center. *-*---*-* |x| x |x| *-*---*-* |x| 12|x| *-*---*-* |x| x |x| *-*---*-* Initially, I have iterated over the num ...

javascriptalgorithm

Is there a way to add an entire array of child nodes to a parent node in a single operation using JavaScript?

Is there a quick way in JavaScript to attach an array of child nodes to a parent node all at once? I'm looking for a method that will avoid triggering unnecessary repaints. So far, I attempted using parent.appendChild(arrayOfNodes), but it resulted ...

javascript

Creating an expandable search box that overflows other content: A step-by-step guide

I am facing an issue with a search box that expands when activated. However, I want the search box to break out of the Bootstrap column and overflow other content on the page. How can I achieve this? Here is the CSS code for the search box styling: .searc ...

cssbootstrap-5

Tips for wrapping a div element around another div at the top left corner

I am working with a particular layout. <div class="comment"> <div class="leftpart"> </div> <div class="rightpart"> </div> </div> When viewing on a desktop, I maintain the original styling where each div is in its own s ...

htmlcss

Is it possible to make a model draggable but disable it specifically on input fields?

I'm exploring the implementation of a draggable feature by using both a JavaScript directive and the simple draggable="true" attribute. (Testing each method separately). Here's my basic code structure: <div draggable="true& ...

javascripthtmltypescript

Create a div that vanishes when hovered over

I want to create a div element that disappears on hover using CSS without reappearing when moving the mouse again. While I know this can be achieved using JavaScript, I'm looking for a solution that incorporates CSS transitions for a smoother effect: ...

htmlcss

Why is there space between two divs if there are no `margin`, `padding`, or `border` properties set?

Using vue.js, I created a page called index.vue which includes the components header.vue and home.vue: The code for index.vue: <template> <div class="index"> <i-header></i-header> <router-view></router-view> ...

cssvue.js

Utilize Ramda.js to transform commands into a functional programming approach

I have written a code to convert an array of numbers into a new datalist using imperative style. However, I am looking to convert it to functional style using a JavaScript library like ramdajs. Code Background: Let's say we have 5 coins in total with ...

javascriptfunctional-programmingramda.js

Incorporate a new attribute into a JSON string using Jackson JSON library

Currently, I am saving a JSON string into a text field within a MySQL database. Following the insertion process, my goal is to enhance the JSON string by incorporating the MySQL line ID using Jackson JSON. Within my Java application, I have a String that ...

javajavascriptjsonjackson

Duplicate entries in the angular-ui Calendar

I've implemented the Angular-UI calendar to showcase some events. My activity controller interacts with the backend service to fetch the data, which is then bound to the model. //activity controller $scope.events = []; Activities.get() ...

javascriptangularjsangular-ui