Create a gist now

Instantly share code, notes, and snippets.

@justinyoo /ocr.ts Secret
Created Mar 27, 2017

What would you like to do?
Implementing OCR Using Azure Cognitive Services with HTML5 Media Capture API
import Vue from "vue";
import { Component, Inject } from "vue-property-decorator";
import { AxiosStatic, AxiosResponse } from "axios";
// Import symbols for dependency injection
import Symbols from "../configs/Symbols";
@Component({
name: "Ocr"
})
export default class Ocr extends Vue {
// axios instance is injected
@Inject(Symbols.Axios)
private _axios: AxiosStatic;
private _ocrInput: HTMLInputElement;
private _ocrOutput: HTMLImageElement;
private _ocrResult: HTMLTextAreaElement;
public getText (): void {
let refs: any = <any>this.$refs;
this._ocrInput = <HTMLInputElement>refs.ocrInput;
this._ocrOutput = <HTMLImageElement>refs.ocrOutput;
this._ocrResult = <HTMLTextAreaElement>refs.ocrResult;
// Prepare image from camera
let file: File = this._ocrInput.files[0];
let data: FormData = new FormData();
data.append(file.name, file);
// Send AJAX request to Web API through axios
// and process its response
this._axios
.post("/api/ocr", data)
.then((res: AxiosResponse) => {
this._ocrOutput.src = res.data.ImagePath;
this._ocrResult.textContent = JSON.stringify(res.data.Result, null, 2);
})
.catch((ex: any) => {
console.log(ex);
});
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment