Image to Text OCR Web Image URL Upload-CodePudding

referring to a working codepen demo at here, the app is working fine if choose file button clicked which upload image from local computer and the text from the image is extracted. However, how do I upload a Web Image URL such as this and not from local computer files and with the help of a button which I labelled in my demo to output the OCR text result?

I would appreciate any help I can get :)

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

I have tried to change the onchange to onclick but does not work.

CodePudding user response：

You can add an input like that :

<div >
  <input id="file" type="file" onchange="proccess(window.lastFile=this.files[0])">
</div>
<div >
  <label for="imgURL">Or paste image url : </label>
  <input id="imgURL" type="text" onchange="proccess(value)">
</div>

And check in your process function if the param is a string or not, if it is it means we have an URL so we just defined this url as 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...
  //...
}