{"id":69277,"date":"2023-09-15T15:01:48","date_gmt":"2023-09-15T07:01:48","guid":{"rendered":"https:\/\/www.hongkiat.com\/blog\/?p=69277"},"modified":"2023-09-20T15:57:46","modified_gmt":"2023-09-20T07:57:46","slug":"uwp-document-scanning-app","status":"publish","type":"post","link":"https:\/\/www.hongkiat.com\/blog\/uwp-document-scanning-app\/","title":{"rendered":"Building a UWP Document Scanning App"},"content":{"rendered":"<p><strong>Note:<\/strong> This article has been contributed by Eric Parker from <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.dynamsoft.com\/\">Dynamsoft<\/a>.<\/p>\n<p>The Universal Windows Platform (UWP) allows us to develop apps for various Windows devices and distribute them through the Windows Store. It is a modern technology from Microsoft, used for building client apps. UWP apps can take advantage of the latest visual styles and features available in the newest versions of Windows.<\/p>\n<p>Dynamic Web TWAIN (DWT) is a JavaScript library used for document scanning. If you want to create a document scanning app for UWP, you can achieve this by using UWP\u2019s WebView control.<\/p>\n<p>The WebView control enables you to embed a web view within your UWP app, which can display web content using the Microsoft Edge Legacy rendering engine.<\/p>\n<p>This approach results in a hybrid app, combining both native UWP controls and a web page to deliver the functionality you need.<\/p>\n<p>In this article, we will provide step-by-step instructions for creating your own UWP document-scanning app.<\/p>\n<h2>Overview of Building a Document Scanning App in UWP<\/h2>\n<p>To develop a document scanning app in UWP, you can follow these steps:<\/p>\n<ol>\n<li>Start by using the Universal Windows App template to create a new project for your app.<\/li>\n<li>Next, copy the resources folder and demo files from the <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/www.dynamsoft.com\/web-twain\/overview\/\">Dynamic Web TWAIN library<\/a> into your project.<\/li>\n<li>Then, add a WebView control to your app\u2019s UI and load the HTML file.<\/li>\n<li>Customize your app\u2019s behavior for scenarios where Dynamic Web TWAIN is not installed on the system.<\/li>\n<li>Utilize the capabilities of the Windows Runtime API to enhance your app\u2019s functionality.<\/li>\n<\/ol>\n<h2>Requirements<\/h2>\n<p>The requirements for this project are as follows:<\/p>\n<ul>\n<li>Installation of Visual Studio along with the Windows 10 SDK.<\/li>\n<li>The Dynamic Web TWAIN library.<\/li>\n<\/ul>\n<h2>Create a UWP Document Scanning App<\/h2>\n<h3>Start a New Universal Windows App Project<\/h3>\n<p>To begin, open Visual Studio and create a new project for a Universal Windows app.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/uwp-document-scanning-app\/screenshot-1.jpg\" alt=\"Visual Studio New Project Window\" width=\"1868\" height=\"1200\"><\/figure>\n<h3>Copy the Dynamic Web TWAIN Resources Folder and Demo to the Project<\/h3>\n<p>To copy the Dynamic Web TWAIN (DWT) resources folder and demo, please follow these steps:<\/p>\n<ol>\n<li>Create a new folder and name it \u201cDWT.\u201d<\/li>\n<li>Click <a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/github.com\/xulihang\/UWP-Document-Scanner\/releases\/download\/assets\/DWT.zip\">this link<\/a> to download the HTML, CSS, and JavaScript files for the pre-built demo. Place the downloaded files into the \u201cDWT\u201d folder you created in Step 1.<\/li>\n<li>Copy the Resources folder from <code>C:\\Program Files (x86)\\Dynamsoft\\Dynamic Web TWAIN SDK 18.3\\<\/code> to the DWT folder. Note that the exact path may vary depending on your computer\u2019s setup.<\/li>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/uwp-document-scanning-app\/screenshot-2.jpg\" alt=\"Dynamic Web TWAIN Resources Folder\" width=\"1284\" height=\"780\"><\/figure>\n<\/ol>\n<h3>Create a WebView Control and Load the HTML File<\/h3>\n<ol start=\"4\">\n<li>Modify the <code>MainPage.xaml<\/code> file using the code provided below:<\/li>\n<\/ol>\n<pre>\r\n&lt;RelativePanel&gt;\r\n     &lt;WebView x:Name=\"WebView1\" RelativePanel.AlignTopWithPanel=\"True\" RelativePanel.AlignLeftWithPanel=\"True\" RelativePanel.AlignRightWithPanel=\"True\" RelativePanel.AlignBottomWithPanel=\"True\" LoadCompleted=\"WebView1_LoadCompleted\"\/&gt;\r\n &lt;\/RelativePanel&gt;\r\n<\/pre>\n<ol start=\"5\">\n<li>Upon launching the app, update the <code>MainPage.xaml.cs<\/code> file to point the WebView to the HTML file.<\/li>\n<\/ol>\n<pre>\r\npublic MainPage()\r\n{\r\n    this.InitializeComponent();\r\n    WebView1.Navigate(new Uri(\"ms-appx-web:\/\/\/DWT\/index.html\"));\r\n}\r\n<\/pre>\n<p>If Dynamic Web TWAIN is installed, the document scanning feature should be available within the WebView.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/uwp-document-scanning-app\/screenshot-3.jpg\" alt=\"Document Scanning Feature in WebView\" width=\"922\" height=\"786\"><\/figure>\n<p>If it is not installed, you may see the following dialogue box:<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/uwp-document-scanning-app\/screenshot-4.jpg\" alt=\"Dialogue Box for Missing Dynamic Web TWAIN\" width=\"1066\" height=\"806\"><\/figure>\n<p><strong>Note:<\/strong> To utilize the document scanning functionality, the JavaScript library of Dynamic Web TWAIN needs to communicate with a local service. Users must install this service before using the scanning app.<\/p>\n<h3>Override the Default Behavior When Web TWAIN is Not Detected<\/h3>\n<p>If Web TWAIN is not detected, a download dialogue box will appear. However, downloading the installer within the WebView is not possible. To work around this, you can open the download link in the device\u2019s native browser.<\/p>\n<p>UWP\u2019s WebView enables web pages to send notifications to the app:<\/p>\n<p>\u2013 Utilize <code>window.external.alert<\/code> in the HTML event handler to send notifications via <code>WebView.ScriptNotify<\/code>.<\/p>\n<p>Add the following C# code to allow the web page to notify the app:<\/p>\n<pre>\r\npublic MainPage()\r\n{\r\n    this.InitializeComponent();\r\n\r\n    \/\/ Newly added\r\n    List&lt;Uri&gt; allowedUris = new List&lt;Uri&gt;();\r\n    allowedUris.Add(new Uri(\"ms-appx-web:\/\/\/DWT\/index.html\"));\r\n\r\n    WebView1.ScriptNotify += WebView1_ScriptNotify;  \/\/ Newly added\r\n    WebView1.Navigate(new Uri(\"ms-appx-web:\/\/\/DWT\/index.html\"));\r\n}\r\n\r\n\/\/ Newly added\r\nprivate async void WebView1_ScriptNotify(object sender, NotifyEventArgs e)\r\n{\r\n    \/\/ Handles the message\r\n}\r\n<\/pre>\n<p>First, locate and open the <code>dynamsoft.webtwain.install.js<\/code> file found in the \u201cResources\u201d folder. Search for the specific code segment that needs modification and update it as follows:<\/p>\n<pre>\r\nDynamsoft.OnWebTwainNotFoundOnWindowsCallback = function(\r\n    ProductName, \r\n    InstallerUrl, \r\n    bHTML5, \r\n    bIE, \r\n    bSafari, \r\n    bSSL, \r\n    strIEVersion\r\n) {\r\n    var response = {};\r\n    response[\"info\"] = \"dynamsoft_service_not_running\";\r\n    \r\n    window.external.notify(JSON.stringify(response));\r\n};\r\n<\/pre>\n<p>With this change, when the web page detects that Web TWAIN is not installed, it will send a JSON-formatted message to the application.<\/p>\n<p>In the C# file, use the following code to prompt the user to download and install the required service:<\/p>\n<pre>\r\nprivate async void WebView1_ScriptNotify(object sender, NotifyEventArgs e)\r\n{\r\n    var response = JsonConvert.DeserializeObject&lt;Dictionary&lt;string, string&gt;&gt;(e.Value);\r\n    string info = response.GetValueOrDefault(\"info\", \"\");\r\n\r\n    \/\/ Respond to the script notification\r\n    if (info == \"dynamsoft_service_not_running\")\r\n    {\r\n        \/\/ Create and set the content of the message dialog\r\n        var messageDialog = new MessageDialog(\"The Dynamsoft Service is not running. Please download and install it.\");\r\n\r\n        \/\/ Add commands and their callbacks; both buttons use the same callback function\r\n        messageDialog.Commands.Add(new UICommand(\r\n            \"Download\",\r\n            new UICommandInvokedHandler(this.CommandInvokedHandler)\r\n        ));\r\n        messageDialog.Commands.Add(new UICommand(\r\n            \"Close\",\r\n            new UICommandInvokedHandler(this.CommandInvokedHandler)\r\n        ));\r\n\r\n        \/\/ Set the default command\r\n        messageDialog.DefaultCommandIndex = 0;\r\n\r\n        \/\/ Set the cancel command\r\n        messageDialog.CancelCommandIndex = 1;\r\n\r\n        \/\/ Display the message dialog\r\n        await messageDialog.ShowAsync();\r\n    }\r\n}\r\n\r\nprivate async void CommandInvokedHandler(IUICommand command)\r\n{\r\n    if (command.Label == \"Download\") \r\n    {\r\n        string uriToLaunch = @\"https:\/\/download2.dynamsoft.com\/Demo\/DWT\/DWTResources\/dist\/DynamsoftServiceSetup.msi\";\r\n        var uri = new Uri(uriToLaunch);\r\n        var success = await Windows.System.Launcher.LaunchUriAsync(uri);\r\n    }\r\n}\r\n<\/pre>\n<p>If the service is not active, the following dialog box will appear:<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/uwp-document-scanning-app\/screenshot-5.jpg\" alt=\"Dialog Box for Inactive Service\" width=\"1880\" height=\"418\"><\/figure>\n<h3>Enhance Functionality with Windows Runtime API<\/h3>\n<p>Some features of Web TWAIN are limited in a WebView environment. However, by leveraging the Windows Runtime API for UWP, you can augment the capabilities of your UWP application.<\/p>\n<p><strong>Utilizing the Camera API<\/strong><\/p>\n<p>The <code><a rel=\"nofollow noopener\" target=\"_blank\" href=\"https:\/\/docs.microsoft.com\/en-us\/windows\/uwp\/audio-video-camera\/capture-photos-and-video-with-cameracaptureui\">Windows.Media.Capture.CameraCaptureUI<\/a><\/code> API offers an intuitive camera interface for capturing images.<\/p>\n<pre>\r\nprivate async void CameraButton_Click(object sender, RoutedEventArgs e)\r\n{\r\n    \/\/ Utilize the Windows.Media.Capture.CameraCaptureUI API to capture a photo\r\n    CameraCaptureUI dialog = new CameraCaptureUI();\r\n    dialog.VideoSettings.AllowTrimming = true;\r\n\r\n    StorageFile file = await dialog.CaptureFileAsync(CameraCaptureUIMode.Photo);\r\n}\r\n<\/pre>\n<p>Once triggered, a built-in camera dialog will appear to enable image capturing. The API also provides auto-trimming features useful for document scanning.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/uwp-document-scanning-app\/screenshot-6.jpg\" alt=\"Built-in Camera Dialog for Image Capturing\" width=\"998\" height=\"1058\"><\/figure>\n<p><strong>Integrating Captured Image into WebView<\/strong><\/p>\n<p>You can use the <code>WebView.InvokeScriptAsync<\/code> method to send the captured image to the web page.<\/p>\n<pre>\r\nprivate async void CameraButton_Click(object sender, RoutedEventArgs e)\r\n{\r\n    \/\/ Capture a photo using the CameraCaptureUI API\r\n    CameraCaptureUI dialog = new CameraCaptureUI();\r\n    dialog.VideoSettings.AllowTrimming = true;\r\n\r\n    StorageFile file = await dialog.CaptureFileAsync(CameraCaptureUIMode.Photo);\r\n\r\n    \/\/ Convert the captured file to a base64 string\r\n    string base64 = await StorageFileToBase64(file);\r\n    await WebView1.InvokeScriptAsync(\"LoadImageFromBase64\", new string[] { base64 });\r\n}\r\n\r\n\/\/ Convert a StorageFile to a base64 string\r\nprivate async Task&lt;string&gt; StorageFileToBase64(StorageFile file)\r\n{\r\n    string Base64String = \"\";\r\n\r\n    if (file != null)\r\n    {\r\n        IRandomAccessStream fileStream = await file.OpenAsync(FileAccessMode.Read);\r\n        var reader = new DataReader(fileStream.GetInputStreamAt(0));\r\n        await reader.LoadAsync((uint)fileStream.Size);\r\n\r\n        byte[] byteArray = new byte[fileStream.Size];\r\n        reader.ReadBytes(byteArray);\r\n\r\n        Base64String = Convert.ToBase64String(byteArray);\r\n    }\r\n\r\n    return Base64String;\r\n}\r\n<\/pre>\n<p><strong>Displaying the Captured Image in HTML<\/strong><\/p>\n<p>After obtaining the base64-encoded image, add it to the HTML page using the following function:<\/p>\n<pre>\r\nfunction LoadImageFromBase64(base64) {\r\n    if (DWObject) {\r\n        DWObject.LoadImageFromBase64Binary(\r\n            base64,\r\n            Dynamsoft.DWT.EnumDWT_ImageType.IT_ALL\r\n        );\r\n    }\r\n}\r\n<\/pre>\n<h3>Integrating OCR Capabilities<\/h3>\n<p><strong>Utilize the Windows Media OCR API<\/strong><\/p>\n<p>The <code>Windows.Media.Ocr<\/code> API offers a straightforward interface for Optical Character Recognition (OCR). In this section, we\u2019ll outline how to add OCR capabilities to your UWP application for a selected image.<\/p>\n<p><strong>Retrieve Base64 of Selected Image in HTML<\/strong><\/p>\n<p>First, add a JavaScript function to obtain the base64-encoded string of the selected image.<\/p>\n<pre>\r\nfunction GetSelectedImageInBase64() {\r\n    if (DWObject) {\r\n        DWObject.ConvertToBase64(\r\n            [DWObject.CurrentImageIndexInBuffer],\r\n            Dynamsoft.DWT.EnumDWT_ImageType.IT_PNG,\r\n            function(result, indices, type) {\r\n                var response = {};\r\n                response[\"info\"] = \"image_base64\";\r\n                response[\"data\"] = result.getData(0, result.getLength());\r\n\r\n                window.external.notify(JSON.stringify(response));\r\n            },\r\n            function(errorCode, errorString) {\r\n                console.log(errorString);\r\n            }\r\n        );\r\n    }\r\n}\r\n<\/pre>\n<p><strong>Implement OCR Functionality in C#<\/strong><\/p>\n<p>Next, invoke the aforementioned JavaScript function and perform OCR on the base64-encoded image in the C# code.<\/p>\n<pre>\r\nprivate async void OCRButton_Click(object sender, RoutedEventArgs e)\r\n{\r\n    await WebView1.InvokeScriptAsync(\"GetSelectedImageInBase64\", new string[] { });\r\n}\r\n\r\nprivate async void WebView1_ScriptNotify(object sender, NotifyEventArgs e)\r\n{\r\n    if (info == \"image_base64\") \r\n    {\r\n        if (response.ContainsKey(\"data\")) \r\n        {\r\n            string base64 = response.GetValueOrDefault(\"data\", \"\");\r\n            OCRImageFromBase64(base64);\r\n        }\r\n    }\r\n}\r\n\r\nprivate async void OCRImageFromBase64(string base64)\r\n{\r\n    \/\/ Conversion and OCR-related logic\r\n    \/\/ ...\r\n    \/\/ Display OCR results in a content dialog\r\n    ContentDialog contentDialog = new ContentDialog\r\n    {\r\n        Title = \"Result:\",\r\n        Content = ocrResult.Text,\r\n        PrimaryButtonText = \"Copy to clipboard\",\r\n        CloseButtonText = \"Close\"\r\n    };\r\n\r\n    ContentDialogResult result = await contentDialog.ShowAsync();\r\n    if (result == ContentDialogResult.Primary)\r\n    {\r\n        DataPackage dataPackage = new DataPackage();\r\n        dataPackage.SetText(ocrResult.Text);\r\n        Clipboard.SetContent(dataPackage);\r\n    }\r\n}\r\n<\/pre>\n<p><strong>Result and User Interaction<\/strong><\/p>\n<p>The OCR output will be displayed in a content dialog box. Users have the option to copy the recognized text to their clipboard.<\/p>\n<figure><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/assets.hongkiat.com\/uploads\/uwp-document-scanning-app\/screenshot-7.jpg\" alt=\"OCR Output in Content Dialog Box\" width=\"1226\" height=\"816\"><\/figure>\n<h2>Conclusion<\/h2>\n<p>UWP allows developers to build and publish versatile applications across all Windows devices. Following the steps outlined above, you can create a UWP application with robust document scanning functionalities using the Dynamic Web TWAIN SDK.<\/p>","protected":false},"excerpt":{"rendered":"<p>Step-by-step guide to building a UWP app for document scanning, from ideation to deployment.<\/p>\n","protected":false},"author":9,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3397],"tags":[],"topic":[],"class_list":["entry-content","is-maxi"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v22.8 (Yoast SEO v27.4) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Building a UWP Document Scanning App - Hongkiat<\/title>\n<meta name=\"description\" content=\"Step-by-step guide to building a UWP app for document scanning, from ideation to deployment.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.hongkiat.com\/blog\/uwp-document-scanning-app\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Building a UWP Document Scanning App\" \/>\n<meta property=\"og:description\" content=\"Step-by-step guide to building a UWP app for document scanning, from ideation to deployment.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.hongkiat.com\/blog\/uwp-document-scanning-app\/\" \/>\n<meta property=\"og:site_name\" content=\"Hongkiat\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/hongkiatcom\" \/>\n<meta property=\"article:published_time\" content=\"2023-09-15T07:01:48+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-09-20T07:57:46+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/assets.hongkiat.com\/uploads\/uwp-document-scanning-app\/screenshot-1.jpg\" \/>\n<meta name=\"author\" content=\"Hongkiat.com\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:site\" content=\"@hongkiat\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Hongkiat.com\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"8 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/uwp-document-scanning-app\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/uwp-document-scanning-app\\\/\"},\"author\":{\"name\":\"Hongkiat.com\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/7cc686597d92f9086729e4bcc1577ba3\"},\"headline\":\"Building a UWP Document Scanning App\",\"datePublished\":\"2023-09-15T07:01:48+00:00\",\"dateModified\":\"2023-09-20T07:57:46+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/uwp-document-scanning-app\\\/\"},\"wordCount\":907,\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/uwp-document-scanning-app\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/uwp-document-scanning-app\\\/screenshot-1.jpg\",\"articleSection\":[\"Desktop\"],\"inLanguage\":\"en-US\"},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/uwp-document-scanning-app\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/uwp-document-scanning-app\\\/\",\"name\":\"Building a UWP Document Scanning App - Hongkiat\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/uwp-document-scanning-app\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/uwp-document-scanning-app\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/uwp-document-scanning-app\\\/screenshot-1.jpg\",\"datePublished\":\"2023-09-15T07:01:48+00:00\",\"dateModified\":\"2023-09-20T07:57:46+00:00\",\"description\":\"Step-by-step guide to building a UWP app for document scanning, from ideation to deployment.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/uwp-document-scanning-app\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/uwp-document-scanning-app\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/uwp-document-scanning-app\\\/#primaryimage\",\"url\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/uwp-document-scanning-app\\\/screenshot-1.jpg\",\"contentUrl\":\"https:\\\/\\\/assets.hongkiat.com\\\/uploads\\\/uwp-document-scanning-app\\\/screenshot-1.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/uwp-document-scanning-app\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Building a UWP Document Scanning App\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"name\":\"Hongkiat\",\"description\":\"Tech and Design Tips\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#organization\",\"name\":\"Hongkiat.com\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"contentUrl\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/wp-content\\\/uploads\\\/hkdc-logo-rect-yoast.jpg\",\"width\":1200,\"height\":799,\"caption\":\"Hongkiat.com\"},\"image\":{\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"},\"sameAs\":[\"https:\\\/\\\/www.facebook.com\\\/hongkiatcom\",\"https:\\\/\\\/x.com\\\/hongkiat\",\"https:\\\/\\\/www.pinterest.com\\\/hongkiat\\\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/#\\\/schema\\\/person\\\/7cc686597d92f9086729e4bcc1577ba3\",\"name\":\"Hongkiat.com\",\"description\":\"This post is published by an HKDC (hongkiat.com) staff. (I.e., intern, staff writer, or editor).\",\"sameAs\":[\"https:\\\/\\\/www.hongkiat.com\"],\"url\":\"https:\\\/\\\/www.hongkiat.com\\\/blog\\\/author\\\/com\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Building a UWP Document Scanning App - Hongkiat","description":"Step-by-step guide to building a UWP app for document scanning, from ideation to deployment.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.hongkiat.com\/blog\/uwp-document-scanning-app\/","og_locale":"en_US","og_type":"article","og_title":"Building a UWP Document Scanning App","og_description":"Step-by-step guide to building a UWP app for document scanning, from ideation to deployment.","og_url":"https:\/\/www.hongkiat.com\/blog\/uwp-document-scanning-app\/","og_site_name":"Hongkiat","article_publisher":"https:\/\/www.facebook.com\/hongkiatcom","article_published_time":"2023-09-15T07:01:48+00:00","article_modified_time":"2023-09-20T07:57:46+00:00","og_image":[{"url":"https:\/\/assets.hongkiat.com\/uploads\/uwp-document-scanning-app\/screenshot-1.jpg","type":"","width":"","height":""}],"author":"Hongkiat.com","twitter_card":"summary_large_image","twitter_creator":"@hongkiat","twitter_site":"@hongkiat","twitter_misc":{"Written by":"Hongkiat.com","Est. reading time":"8 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.hongkiat.com\/blog\/uwp-document-scanning-app\/#article","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/uwp-document-scanning-app\/"},"author":{"name":"Hongkiat.com","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/7cc686597d92f9086729e4bcc1577ba3"},"headline":"Building a UWP Document Scanning App","datePublished":"2023-09-15T07:01:48+00:00","dateModified":"2023-09-20T07:57:46+00:00","mainEntityOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/uwp-document-scanning-app\/"},"wordCount":907,"publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/uwp-document-scanning-app\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/uwp-document-scanning-app\/screenshot-1.jpg","articleSection":["Desktop"],"inLanguage":"en-US"},{"@type":"WebPage","@id":"https:\/\/www.hongkiat.com\/blog\/uwp-document-scanning-app\/","url":"https:\/\/www.hongkiat.com\/blog\/uwp-document-scanning-app\/","name":"Building a UWP Document Scanning App - Hongkiat","isPartOf":{"@id":"https:\/\/www.hongkiat.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.hongkiat.com\/blog\/uwp-document-scanning-app\/#primaryimage"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/uwp-document-scanning-app\/#primaryimage"},"thumbnailUrl":"https:\/\/assets.hongkiat.com\/uploads\/uwp-document-scanning-app\/screenshot-1.jpg","datePublished":"2023-09-15T07:01:48+00:00","dateModified":"2023-09-20T07:57:46+00:00","description":"Step-by-step guide to building a UWP app for document scanning, from ideation to deployment.","breadcrumb":{"@id":"https:\/\/www.hongkiat.com\/blog\/uwp-document-scanning-app\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.hongkiat.com\/blog\/uwp-document-scanning-app\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/uwp-document-scanning-app\/#primaryimage","url":"https:\/\/assets.hongkiat.com\/uploads\/uwp-document-scanning-app\/screenshot-1.jpg","contentUrl":"https:\/\/assets.hongkiat.com\/uploads\/uwp-document-scanning-app\/screenshot-1.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.hongkiat.com\/blog\/uwp-document-scanning-app\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.hongkiat.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Building a UWP Document Scanning App"}]},{"@type":"WebSite","@id":"https:\/\/www.hongkiat.com\/blog\/#website","url":"https:\/\/www.hongkiat.com\/blog\/","name":"Hongkiat","description":"Tech and Design Tips","publisher":{"@id":"https:\/\/www.hongkiat.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.hongkiat.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.hongkiat.com\/blog\/#organization","name":"Hongkiat.com","url":"https:\/\/www.hongkiat.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","contentUrl":"https:\/\/www.hongkiat.com\/blog\/wp-content\/uploads\/hkdc-logo-rect-yoast.jpg","width":1200,"height":799,"caption":"Hongkiat.com"},"image":{"@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/hongkiatcom","https:\/\/x.com\/hongkiat","https:\/\/www.pinterest.com\/hongkiat\/"]},{"@type":"Person","@id":"https:\/\/www.hongkiat.com\/blog\/#\/schema\/person\/7cc686597d92f9086729e4bcc1577ba3","name":"Hongkiat.com","description":"This post is published by an HKDC (hongkiat.com) staff. (I.e., intern, staff writer, or editor).","sameAs":["https:\/\/www.hongkiat.com"],"url":"https:\/\/www.hongkiat.com\/blog\/author\/com\/"}]}},"jetpack_featured_media_url":"https:\/\/","jetpack_shortlink":"https:\/\/wp.me\/p4uxU-i1n","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/69277","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/comments?post=69277"}],"version-history":[{"count":3,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/69277\/revisions"}],"predecessor-version":[{"id":69385,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/posts\/69277\/revisions\/69385"}],"wp:attachment":[{"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/media?parent=69277"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/categories?post=69277"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/tags?post=69277"},{"taxonomy":"topic","embeddable":true,"href":"https:\/\/www.hongkiat.com\/blog\/wp-json\/wp\/v2\/topic?post=69277"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}