Skip to content

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";
name: "Ocr"
export default class Ocr extends Vue {
// axios instance is injected
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);
// Send AJAX request to Web API through axios
// and process its response
.post("/api/ocr", data)
.then((res: AxiosResponse) => {
this._ocrOutput.src =;
this._ocrResult.textContent = JSON.stringify(, null, 2);
.catch((ex: any) => {
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment