JSFiddle - React, Tailwind, and code Playground

by deswolf

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.min.js"></script>
<main>
  <div>
    <textarea id="area"></textarea>
  </div>
  <div>
    <img id="screen" src="" alt="loading..."/>
  </div>
</main>

CSS

* {
  box-sizing: border-box;
}

html, body {
  margin:0;
  padding:0;
}

main {
  margin:12px;
}

textarea {
  width:100%;
  min-height:96px;
}

img {
  max-width:100%;
}

JavaScript

var imageURL = "https://i.imgur.com/KsbBYeC.png";
var apiKey = "de4e96b62288957";

var apiURL = "https://api.ocr.space/parse/image";
var bodyFormData = new FormData();
bodyFormData.set('language', 'eng');
bodyFormData.set('isOverlayRequired', false);
bodyFormData.set('url', imageURL);
bodyFormData.set('iscreatesearchablepdf', false);
bodyFormData.set('issearchablepdfhidetextlayer', false);
bodyFormData.set('scale', true);
bodyFormData.set('isTable', true);

displayImg(imageURL);

axios({
  method: 'post',
  url: apiURL,
  data: bodyFormData,
  headers: {
    'Content-Type': 'multipart/form-data',
    'apikey': apiKey
  }
})
  .then(function (response) {
  displayData(response.data.ParsedResults[0].ParsedText);
  console.log(response);
})
  .catch(function (response) {
  displayData("cos sie odjebao");
  console.log(response);
});

function displayData(data) {
  var textarea = document.getElementById("area");
  area.innerHTML = data;
}

function displayImg(src) {
	var screen = document.getElementById("screen");
  screen.src = src;
}