New to Telerik Document Processing? Download free 30-day trial

Telerik Document Processing - PdfProcessing Optical Character Recognition (OCR)

Loading Demo...

EXAMPLE
VIEW SOURCE

                    optical_character_recognition.cshtml
                
                    OpticalCharacterRecognitionController.cs

API REFERENCE

Upload your own image containing text in English or use our default sample to experience the OCR feature. After the conversion, you'll receive the extracted text along with a PDF containing the image with selectable text.

Status: Uploaded sample image

Converted image preview

Status: Converted image to pdf

/* ========================================== 1. Root/Global OCR Component Styles ========================================== */ .ocr { font-family: Roboto, sans-serif; display: flex; justify-content: center; gap: 17px; margin: 30px auto 100px; position: relative; } .ocr__heading { width: 733px; margin: 0 auto; font-family: Roboto, sans-serif; font-size: 14px; font-weight: 400; line-height: 18px; } .ocr__border { border: 1px solid #D6D4D4 !important; } .ocr__file-input { display: none; } /* ========================================== 2. Layout & Panel Structure ========================================== */ .ocr__panel { display: flex; flex-direction: column; height: 100%; } .ocr__panel--middle { display: flex; align-self: center; position: relative; } /* ========================================== 3. Common Element Styles ========================================== */ .ocr__status { font-family: 'Segoe UI', Roboto; font-size: 13px; color: #000; } .ocr__status-label { display: inline-block; } .ocr__status-value { display: flex; justify-content: flex-start; align-items: center; gap: 10px; margin-top: 6px; padding: 3px 8px; border: 1px solid #D6D4D4; height: auto; min-height: 48px; max-width: 303px; overflow-wrap: break-word; word-break: break-word; white-space: normal; background-color: #00000008; border-radius: 2px; } .ocr__status-value--hidden, .ocr__status-label--hidden { visibility: hidden; } .ocr__status-image { height: 34px; width: 28px; } .ocr__status-text { font-family: Roboto, sans-serif; font-size: 14px; font-weight: 400; line-height: 19px; } .k-button-solid-primary:focus, .k-button-solid-primary.k-focus { box-shadow: 0 0 0px 1px rgba(0, 0, 0, 0.08); } /* ========================================== 4. Left Panel Components ========================================== */ .ocr__btn-group { display: flex; justify-content: space-between; } .ocr__btn { width: 142px; height: 30px; font-weight: 400; background-color: #F5F5F5; border: 1px solid #00000014; } .ocr__btn-text { color: #3D3D3D; } .ocr__btn:hover { background-color: #F5F5F5; border-color: #00000014; } .ocr__preview { margin: 12px 0 16px 0; padding: 2px; width: 303px; height: 359px; } .ocr__preview-img { width: 100%; height: 100%; border: 1px dashed #D6D4D4; background-color: #879EF30D; } /* ========================================== 5. Middle Panel Components ========================================== */ .ocr__loader-overlay { display: none; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(255,255,255,0.3); z-index: 10; align-items: center; } .ocr__loader { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); margin-bottom: 10px; display: none; } .ocr__convert-btn { width: 89px; height: 30px; font-size: 14px; line-height: 142%; } /* ========================================== 6. Right Panel Components ========================================== */ .ocr__panel--right { position: relative; } .ocr__download-float { position: absolute; bottom: 52px; right: 0; } .ocr__header { display: flex; justify-content: space-between; align-items: center; height: 30px; } .ocr__result-label { font-family: 'Inter', 'Roboto'; font-size: 13px; font-weight: 400; line-height: 20px; } .ocr__action-container { justify-content: flex-end; display: flex; position: relative; } .ocr__action-btn { border: none; padding-inline: 4px; } .ocr__action-btn .k-icon { font-size: 22px; } .ocr__action-btn:hover, .ocr__action-btn.k-hover { background-color: white; } .ocr__action-btn:focus, .ocr__action-btn.k-focus { box-shadow: 0 0 0px 1px rgba(18, 116, 172, 0.3); } /* Action Button States */ .ocr__action-btn--disabled { color: #1273AB4D !important; pointer-events: none; cursor: default; background: none; } .ocr__action-btn--hidden { visibility: hidden; position: absolute; pointer-events: none; margin-top: 8px; } .ocr__action-btn--enabled { color: #1274AC !important; pointer-events: auto; cursor: pointer; background: none; } .ocr__result { font-family: 'Inter', 'Roboto'; border: 1px dashed #D6D4D4; background-color: #F9FAFE; resize: none; outline: none; margin: 12px 0 16px 0; padding: 4px; width: 303px; height: 359px; overflow-y: auto; } .ocr__placeholder-text { display: flex; justify-content: center; align-items: center; height: 100%; width: 100%; font-family: 'Inter', 'Roboto'; font-weight: 400; font-size: 13px; line-height: 20px; text-transform: uppercase; } .ocr__placeholder-text span { width: 140px; text-align: center; } /* ========================================== 7. Notification Styles ========================================== */ .ocr__notification { position: absolute; width: 0; height: 0; overflow: visible; } .k-notification, .k-notification-error { position: absolute; top: 0; right: 300px; z-index: 20; width: auto; max-width: 300px; box-shadow: 0 2px 8px rgba(0,0,0,0.2) !important; }

Description

Telerik RadPdfProcessing provides easy to use API which allows performing optical character recognition (OCR) onto PDF documents. This example demonstrates how to import an image into the PdfProcessing library, retrieve the text from it and export it to a PDF document.

Additional Libraries

This PdfProcessing example is part of Document Processing demos, with which you can see all Telerik Document Processing libraries and their features in action.

Telerik Document Processing - PdfProcessing Optical Character Recognition (OCR)

Description

Additional Libraries

Support & Learning Resources

Additional Resources