tesseract-gui-vue/public/app.js

/*
 * ഓം ബ്രഹ്മാർപ്പണം
 * app.js
 * Created: Mon Mar 09 2020 02:16:15 GMT+0530 (GMT+05:30)
 * Copyright 2020 Harish.K<harish2704@gmail.com>
 */

function ocrByServer(image) {
  var data = new FormData();
  data.append("image", image);
  return fetch(
    "./ocr",
    {
      method: "POST",
      body: data,
    }
  ).then((res) => res.json());
}


new Vue({
  el: "#main",
  components: {
  },
  data: {
    scalingFactor: 1,
    selectedFileName: "",
    currentFileBlob: null,
    isLoading: false,
    ocrOutput: "",
  },
  methods: {
    doOcr: function () {
      this.isLoading = true;
      ocrByServer(this.currentFileBlob)
        .then((data) => {
          console.log("success", data);
          this.ocrOutput = data.text;
          this.isLoading = false;
        })
        .catch((error) => {
          console.log("error", error);
          alert("Some error occurred while Calling OCR API");
          this.isLoading = false;
        });
    },

    setImage: function (file) {
      var self = this;
      var canvas = this.$refs.canvas;
      var ctx = canvas.getContext("2d");
      var img = new Image();
      this.currentFileBlob = file;
      img.onload = function () {
        canvas.width = img.width;
        canvas.height = img.height;
        ctx.drawImage(img, 0, 0);
        self.scalingFactor = canvas.clientWidth / canvas.width;
      };
      img.src = URL.createObjectURL(file);
    },

    onChangeFile: function File(e) {
      this.setImage(e.target.files[0]);
      this.selectedFileName = e.target.files[0].name;
    },
  },
  mounted: function () {
    var self = this;
    fetch("./sample.png")
      .then((v) => v.blob())
      .then((blob) => this.setImage(blob));
    document.onpaste = function (event) {
      var items = (event.clipboardData || event.originalEvent.clipboardData)
        .items;
      for (var index in items) {
        var item = items[index];
        if (item.kind === "file") {
          var blob = item.getAsFile();
          self.setImage(blob);
          self.ocrOutput = "";
        }
      }
    };
    window.addEventListener("resize", function () {
      var canvas = self.$refs.canvas;
      self.scalingFactor = canvas.clientWidth / canvas.width;
    });
  },
});