Image to text OCR web image URL upload

Question

Referring to the work here codepen demo, if click the select file button to upload an image from the local computer and extract the text from the image, the application runs fine. But how do I upload a web image URL like this, instead of from a local computer file, and output the OCR text results with the help of the button I marked in the demo?

If I can get any help I would be grateful :)

<div class="Content extra"><input id="File" type="File" onchange="proccess(window.lastFile=this.files[0])">< ;/div>

I tried changing onchange to onclick but it didn't work.

Answer 1

You can add input like this:

  


  Or paste image url : 
  

And check your process function, if the parameter is a string, if it is, it means we have a URL, so we just define this url as the src value:

function proccess(inputData){
  $(".result").html("");
  var src;
  if(typeof(inputData) == 'string') {
    src = inputData
  } else {
    src = (window.URL ? URL : webkitURL).createObjectURL(inputData);
  }
  //do what you want after that...
  //...
}