{"id":2983,"date":"2017-04-27T07:45:09","date_gmt":"2017-04-27T14:45:09","guid":{"rendered":"http:\/\/www.couchbase.com\/blog\/?p=2983"},"modified":"2025-06-13T20:52:45","modified_gmt":"2025-06-14T03:52:45","slug":"save-captured-images-nativescript-angular-application-couchbase","status":"publish","type":"post","link":"https:\/\/www.couchbase.com\/blog\/save-captured-images-nativescript-angular-application-couchbase\/","title":{"rendered":"Save Captured Images in a NativeScript Angular Application to Couchbase"},"content":{"rendered":"<p>I get a particular set of questions quite a bit when it comes to mobile applications, the first being how to save captured images, and the second being how to sync them between devices or a remote database. Since I&#8217;m a huge fan of <a href=\"https:\/\/www.nativescript.org\" target=\"_blank\" rel=\"noopener\">NativeScript<\/a> for Android and iOS development, I thought it would be great to share one of many possible examples toward solving this problem.<\/p>\n<p>We&#8217;re going to see how to capture images in a NativeScript application using <a href=\"https:\/\/angular.io\/\" target=\"_blank\" rel=\"noopener\">Angular<\/a> and save those captured images to Couchbase Lite, an embedded device level database.<\/p>\n<p><!--more--><\/p>\n<p>Going forward, it is important to note that there are many ways to save images or any other file data within a mobile application. For example you could save them in a database or you can save them on the file system. We&#8217;re going to be saving them directly into the database in this example, but do your research on what strategy will work best for you.<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-3227 size-full\" src=\"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/2017\/04\/ns-couchbase-photos-p1.gif\" alt=\"NativeScript Couchbase Photos\" width=\"967\" height=\"705\" \/><\/p>\n<p>In the above animated image we are presented with the ability to capture images. \u00a0Things are a little different in a simulator, but on a device the camera will open. \u00a0After capturing an image it will be presented on the screen and saved into Couchbase Lite as a base64 formatted string.<\/p>\n<h2>The Requirements<\/h2>\n<p>There aren&#8217;t many requirements when it comes to being successful with this guide. \u00a0At a minimum you&#8217;ll need the following:<\/p>\n<ul>\n<li>NativeScript CLI<\/li>\n<li>Android SDK for Android and Xcode for iOS<\/li>\n<\/ul>\n<p>To be able to build for Android you&#8217;ll need the Android SDK and to be able to build for iOS you&#8217;ll need Xcode, which is only available on macOS computers. For this particular guide, no remote instance of Couchbase Server is necessary.<\/p>\n<h2>Creating a Fresh NativeScript with Angular Project<\/h2>\n<p>With the prerequisites installed and ready to go, we need to create a fresh project somewhere on our computer.<\/p>\n<p>From the NativeScript CLI, execute the following:<\/p>\n<pre class=\"lang:default highlight:0 decode:true \">tns create photo-project --ng<\/pre>\n<p>The above command will create a new Angular project, hence the\u00a0<code>--ng<\/code> flag.<\/p>\n<p>Before we start developing, we will need to install the Couchbase plugin for NativeScript. \u00a0This can be done by executing the following:<\/p>\n<pre class=\"lang:default highlight:0 decode:true \">tns plugin add nativescript-couchbase<\/pre>\n<p>While we can technically start developing the application, there is one more order of business to take care of. On iOS it is a requirement to explain each of the permissions being used. Being able to take photos or use the gallery is a permission request, so we have to explain.<\/p>\n<p>Open the project&#8217;s\u00a0<strong>app\/App_Resources\/iOS\/Info.plist<\/strong> file and include the following:<\/p>\n<pre class=\"lang:default highlight:0 decode:true \">&lt;key&gt;NSPhotoLibraryUsageDescription&lt;\/key&gt;\r\n&lt;string&gt;Photo Library Access Warning&lt;\/string&gt;<\/pre>\n<p>The above will prevent any errors during compile time or run time. \u00a0Now we can safely start developing our Android and iOS mobile application.<\/p>\n<h2>Developing the\u00a0Core Application Logic and User Interface<\/h2>\n<p>Before we start adding our own code, let&#8217;s strip out a bunch of the boilerplate template code that ships when creating a new NativeScript with Angular project.<\/p>\n<p>This is going to be a single page application so we need to remove any of the pre-existing navigation routes. \u00a0Start by opening the project&#8217;s\u00a0<strong>app\/app.routing.ts<\/strong> file and make it look like the following:<\/p>\n<pre class=\"lang:default highlight:0 decode:true \">import { NgModule } from \"@angular\/core\";\r\nimport { NativeScriptRouterModule } from \"nativescript-angular\/router\";\r\nimport { Routes } from \"@angular\/router\";\r\n\r\nconst routes: Routes = [];\r\n\r\n@NgModule({\r\n    imports: [NativeScriptRouterModule.forRoot(routes)],\r\n    exports: [NativeScriptRouterModule]\r\n})\r\nexport class AppRoutingModule { }<\/pre>\n<p>The only thing we did was remove the routes from the\u00a0<code>routes<\/code> array. \u00a0Technically we can remove this file, but it is easier just to strip out what we&#8217;re not going to use.<\/p>\n<p>Now open the project&#8217;s\u00a0<strong>app\/app.module.ts<\/strong> file and make the TypeScript look like the following:<\/p>\n<pre class=\"lang:default highlight:0 decode:true \">import { NgModule, NO_ERRORS_SCHEMA } from \"@angular\/core\";\r\nimport { NativeScriptModule } from \"nativescript-angular\/nativescript.module\";\r\nimport { AppRoutingModule } from \".\/app.routing\";\r\nimport { AppComponent } from \".\/app.component\";\r\n\r\n\r\n@NgModule({\r\n    bootstrap: [\r\n        AppComponent\r\n    ],\r\n    imports: [\r\n        NativeScriptModule,\r\n        AppRoutingModule\r\n    ],\r\n    declarations: [\r\n        AppComponent\r\n    ],\r\n    providers: [],\r\n    schemas: [\r\n        NO_ERRORS_SCHEMA\r\n    ]\r\n})\r\nexport class AppModule { }<\/pre>\n<p>Notice in the above we&#8217;ve removed any reference to the MVC files that were previously routes. \u00a0This includes HTML, TypeScript, and the Angular service that was provided.<\/p>\n<p>When it comes to adding new content, we&#8217;re going to focus on the TypeScript logic first, then move into the HTML UI. Open the project&#8217;s\u00a0<strong>app\/app.component.ts<\/strong> file and include the following:<\/p>\n<pre class=\"lang:default highlight:0 decode:true \">import { Component, OnInit } from \"@angular\/core\";\r\nimport { Couchbase } from \"nativescript-couchbase\";\r\nimport * as Camera from \"camera\";\r\nimport * as ImageSource from \"image-source\";\r\n\r\n@Component({\r\n    selector: \"ns-app\",\r\n    templateUrl: \"app.component.html\",\r\n})\r\nexport class AppComponent implements OnInit {\r\n\r\n    public database: any;\r\n    public images: Array&lt;any&gt;;\r\n\r\n    public constructor() {\r\n        this.database = new Couchbase(\"image-database\");\r\n        this.database.createView(\"images\", \"1\", function(document, emitter) {\r\n            if(document.type &amp;&amp; document.type == \"image\") {\r\n                emitter.emit(document._id, document);\r\n            }\r\n        });\r\n        this.images = [];\r\n    }\r\n\r\n    public ngOnInit() {\r\n        let rows = this.database.executeQuery(\"images\");\r\n        for(let i = 0; i &lt; rows.length; i++) {\r\n            this.images.push(ImageSource.fromBase64(rows[i].image));\r\n        }\r\n    }\r\n\r\n    public capture() {\r\n        Camera.takePicture({ width: 300, height: 300, keepAspectRatio: true, saveToGallery: false }).then(picture =&gt; {\r\n            let base64 = picture.toBase64String(\"png\", 70);\r\n            this.database.createDocument({\r\n                \"type\": \"image\",\r\n                \"image\": base64,\r\n                \"timestamp\": (new Date()).getTime()\r\n            });\r\n            this.images.push(picture);\r\n        }, error =&gt; {\r\n            console.dump(error);\r\n        });\r\n    }\r\n\r\n}<\/pre>\n<p>A lot is happening in the above code so we&#8217;re going to break it down.<\/p>\n<p>We had previously downloaded the Couchbase plugin for NativeScript, but now we need to import it along with other things:<\/p>\n<pre class=\"lang:default highlight:0 decode:true \">import { Couchbase } from \"nativescript-couchbase\";\r\nimport * as Camera from \"camera\";\r\nimport * as ImageSource from \"image-source\";<\/pre>\n<p>The camera functionality is already included with NativeScript, we just need to import it. \u00a0When it comes to manipulating the camera data, the\u00a0<code>ImageSource<\/code> is what we&#8217;ll use.<\/p>\n<p>Within the\u00a0<code>AppComponent<\/code> class we have two variables:<\/p>\n<pre class=\"lang:default highlight:0 decode:true\">private database: any;\r\npublic images: Array&lt;any&gt;;<\/pre>\n<p>The <code>database<\/code> will hold our open Couchbase Lite instance and the\u00a0<code>images<\/code> will hold all saved images that will be presented on the screen.<\/p>\n<p>Within the\u00a0<code>constructor<\/code> method we open our database, create a view that we can later query, and initialize the array that will store our images.<\/p>\n<pre class=\"lang:default highlight:0 decode:true \">public constructor() {\r\n    this.database = new Couchbase(\"image-database\");\r\n    this.database.createView(\"images\", \"1\", function(document, emitter) {\r\n        if(document.type &amp;&amp; document.type == \"image\") {\r\n            emitter.emit(document._id, document);\r\n        }\r\n    });\r\n    this.images = [];\r\n}<\/pre>\n<p>The view that we&#8217;re creating will return all NoSQL documents that have a property called\u00a0<code>type<\/code> that is set to\u00a0<code>image<\/code> which represents to us that it is one of the possible images for displaying on the screen.<\/p>\n<p>Because data should never be loaded in the\u00a0<code>constructor<\/code> method, we take things to the\u00a0<code>ngOnInit<\/code> method:<\/p>\n<pre class=\"lang:default highlight:0 decode:true \">public ngOnInit() {\r\n    let rows = this.database.executeQuery(\"images\");\r\n    for(let i = 0; i &lt; rows.length; i++) {\r\n        this.images.push(ImageSource.fromBase64(rows[i].image));\r\n    }\r\n}<\/pre>\n<p>The\u00a0<code>ngOnInit<\/code> method triggers after the\u00a0<code>constructor<\/code> method and it will query the view that had been previously created. Each document saved will have a property called\u00a0<code>image<\/code> that contains base64 image data. This model is based on our design.<\/p>\n<p>After obtaining the base64 data it is converted into an\u00a0<code>ImageSource<\/code> and added to our array to be displayed on the screen.<\/p>\n<pre class=\"lang:default highlight:0 decode:true \">public capture() {\r\n    Camera.takePicture({ width: 300, height: 300, keepAspectRatio: true, saveToGallery: false }).then(picture =&gt; {\r\n        let base64 = picture.toBase64String(\"png\", 70);\r\n        this.database.createDocument({\r\n            \"type\": \"image\",\r\n            \"image\": base64,\r\n            \"timestamp\": (new Date()).getTime()\r\n        });\r\n        this.images.push(picture);\r\n    }, error =&gt; {\r\n        console.dump(error);\r\n    });\r\n}<\/pre>\n<p>The above\u00a0<code>capture<\/code> method is called via a button press in our HTML. It will launch the camera with a few settings defined.<\/p>\n<p>Upon a successful capture, the picture will be converted to base64 and a NoSQL document will be created along with various information sitting next to the base64 data.<\/p>\n<p>Not so bad right?<\/p>\n<p>Now we want to take a look at the HTML markup that goes with this logic. \u00a0Open the project&#8217;s\u00a0<strong>app\/app.component.html<\/strong> file and include the following:<\/p>\n<pre class=\"lang:default highlight:0 decode:true \">&lt;ActionBar title=\"{N} Couchbase Photos\"&gt;\r\n    &lt;ActionItem text=\"Capture\" ios.position=\"right\" (tap)=\"capture()\"&gt;&lt;\/ActionItem&gt;\r\n&lt;\/ActionBar&gt;\r\n&lt;StackLayout&gt;\r\n    &lt;Image *ngFor=\"let image of images\" [src]=\"image\"&gt;&lt;\/Image&gt;\r\n&lt;\/StackLayout&gt;<\/pre>\n<p>In the above HTML we have an actionbar with a button that will trigger the camera. \u00a0Within the core content of the page we have a loop that will go through each image in the array and display it on the screen.<\/p>\n<h2>Conclusion<\/h2>\n<p>You just saw how to create a basic image capturing application with <a href=\"https:\/\/www.nativescript.org\" target=\"_blank\" rel=\"noopener\">NativeScript<\/a> and Angular that saves image data directly into Couchbase Lite NoSQL documents as base64 encoded strings. Next time around we&#8217;re going to see how to synchronize this image data between devices and a remote database instance.<\/p>\n<p>In the meantime, check out this other tutorial on using NativeScript with Couchbase titled,\u00a0<a href=\"https:\/\/www.couchbase.com\/blog\/key-value-operations-in-couchbase-mobile-via-nativescript-and-angular\/\" target=\"_blank\" rel=\"noopener\">Key-Value Operations in Couchbase Mobile via NativeScript and Angular<\/a>.<\/p>\n<p>Want more help with Couchbase for Android and iOS? Check out the <a href=\"https:\/\/www.couchbase.com\/developers\/\" target=\"_blank\" rel=\"noopener\">Couchbase Developer Portal<\/a> for documentation and examples.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>I get a particular set of questions quite a bit when it comes to mobile applications, the first being how to save captured images, and the second being how to sync them between devices or a remote database. Since I&#8217;m [&hellip;]<\/p>\n","protected":false},"author":63,"featured_media":13873,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[2370,1810,9327],"tags":[1704,1597,1598,1536,1543,1589,1718],"ppma_author":[9032],"class_list":["post-2983","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-android","category-couchbase-mobile","category-javascript","tag-angular","tag-base64","tag-image","tag-ios","tag-javascript","tag-nativescript","tag-typescript"],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v27.3 (Yoast SEO v27.3) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>NativeScript Angular Application: Save Captured Images<\/title>\n<meta name=\"description\" content=\"See how to capture images in a NativeScript application using Angular and save those captured images to Couchbase Lite, an embedded device level database.\" \/>\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.couchbase.com\/blog\/save-captured-images-nativescript-angular-application-couchbase\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Save Captured Images in a NativeScript Angular Application to Couchbase\" \/>\n<meta property=\"og:description\" content=\"See how to capture images in a NativeScript application using Angular and save those captured images to Couchbase Lite, an embedded device level database.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.couchbase.com\/blog\/save-captured-images-nativescript-angular-application-couchbase\/\" \/>\n<meta property=\"og:site_name\" content=\"The Couchbase Blog\" \/>\n<meta property=\"article:author\" content=\"https:\/\/www.facebook.com\/thepolyglotdeveloper\" \/>\n<meta property=\"article:published_time\" content=\"2017-04-27T14:45:09+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2025-06-14T03:52:45+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/sites\/1\/2017\/04\/ns-couchbase-photos-p1.gif\" \/>\n\t<meta property=\"og:image:width\" content=\"967\" \/>\n\t<meta property=\"og:image:height\" content=\"705\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/gif\" \/>\n<meta name=\"author\" content=\"Nic Raboy, Developer Advocate, Couchbase\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@nraboy\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Nic Raboy, Developer Advocate, Couchbase\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"5 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/www.couchbase.com\\\/blog\\\/save-captured-images-nativescript-angular-application-couchbase\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.couchbase.com\\\/blog\\\/save-captured-images-nativescript-angular-application-couchbase\\\/\"},\"author\":{\"name\":\"Nic Raboy, Developer Advocate, Couchbase\",\"@id\":\"https:\\\/\\\/www.couchbase.com\\\/blog\\\/#\\\/schema\\\/person\\\/bb545ebe83bb2d12f91095811d0a72e1\"},\"headline\":\"Save Captured Images in a NativeScript Angular Application to Couchbase\",\"datePublished\":\"2017-04-27T14:45:09+00:00\",\"dateModified\":\"2025-06-14T03:52:45+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/www.couchbase.com\\\/blog\\\/save-captured-images-nativescript-angular-application-couchbase\\\/\"},\"wordCount\":1094,\"commentCount\":3,\"publisher\":{\"@id\":\"https:\\\/\\\/www.couchbase.com\\\/blog\\\/#organization\"},\"image\":{\"@id\":\"https:\\\/\\\/www.couchbase.com\\\/blog\\\/save-captured-images-nativescript-angular-application-couchbase\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.couchbase.com\\\/blog\\\/wp-content\\\/uploads\\\/sites\\\/1\\\/2022\\\/11\\\/couchbase-nosql-dbaas.png\",\"keywords\":[\"Angular\",\"base64\",\"image\",\"ios\",\"javascript\",\"nativescript\",\"TypeScript\"],\"articleSection\":[\"Android\",\"Couchbase Mobile\",\"JavaScript\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/www.couchbase.com\\\/blog\\\/save-captured-images-nativescript-angular-application-couchbase\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/www.couchbase.com\\\/blog\\\/save-captured-images-nativescript-angular-application-couchbase\\\/\",\"url\":\"https:\\\/\\\/www.couchbase.com\\\/blog\\\/save-captured-images-nativescript-angular-application-couchbase\\\/\",\"name\":\"NativeScript Angular Application: Save Captured Images\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/www.couchbase.com\\\/blog\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/www.couchbase.com\\\/blog\\\/save-captured-images-nativescript-angular-application-couchbase\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/www.couchbase.com\\\/blog\\\/save-captured-images-nativescript-angular-application-couchbase\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/www.couchbase.com\\\/blog\\\/wp-content\\\/uploads\\\/sites\\\/1\\\/2022\\\/11\\\/couchbase-nosql-dbaas.png\",\"datePublished\":\"2017-04-27T14:45:09+00:00\",\"dateModified\":\"2025-06-14T03:52:45+00:00\",\"description\":\"See how to capture images in a NativeScript application using Angular and save those captured images to Couchbase Lite, an embedded device level database.\",\"breadcrumb\":{\"@id\":\"https:\\\/\\\/www.couchbase.com\\\/blog\\\/save-captured-images-nativescript-angular-application-couchbase\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/www.couchbase.com\\\/blog\\\/save-captured-images-nativescript-angular-application-couchbase\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.couchbase.com\\\/blog\\\/save-captured-images-nativescript-angular-application-couchbase\\\/#primaryimage\",\"url\":\"https:\\\/\\\/www.couchbase.com\\\/blog\\\/wp-content\\\/uploads\\\/sites\\\/1\\\/2022\\\/11\\\/couchbase-nosql-dbaas.png\",\"contentUrl\":\"https:\\\/\\\/www.couchbase.com\\\/blog\\\/wp-content\\\/uploads\\\/sites\\\/1\\\/2022\\\/11\\\/couchbase-nosql-dbaas.png\",\"width\":1800,\"height\":630},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/www.couchbase.com\\\/blog\\\/save-captured-images-nativescript-angular-application-couchbase\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/www.couchbase.com\\\/blog\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Save Captured Images in a NativeScript Angular Application to Couchbase\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/www.couchbase.com\\\/blog\\\/#website\",\"url\":\"https:\\\/\\\/www.couchbase.com\\\/blog\\\/\",\"name\":\"The Couchbase Blog\",\"description\":\"Couchbase, the NoSQL Database\",\"publisher\":{\"@id\":\"https:\\\/\\\/www.couchbase.com\\\/blog\\\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/www.couchbase.com\\\/blog\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\\\/\\\/www.couchbase.com\\\/blog\\\/#organization\",\"name\":\"The Couchbase Blog\",\"url\":\"https:\\\/\\\/www.couchbase.com\\\/blog\\\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/www.couchbase.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\",\"url\":\"https:\\\/\\\/www.couchbase.com\\\/blog\\\/wp-content\\\/uploads\\\/2023\\\/04\\\/admin-logo.png\",\"contentUrl\":\"https:\\\/\\\/www.couchbase.com\\\/blog\\\/wp-content\\\/uploads\\\/2023\\\/04\\\/admin-logo.png\",\"width\":218,\"height\":34,\"caption\":\"The Couchbase Blog\"},\"image\":{\"@id\":\"https:\\\/\\\/www.couchbase.com\\\/blog\\\/#\\\/schema\\\/logo\\\/image\\\/\"}},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/www.couchbase.com\\\/blog\\\/#\\\/schema\\\/person\\\/bb545ebe83bb2d12f91095811d0a72e1\",\"name\":\"Nic Raboy, Developer Advocate, Couchbase\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/bedeb68368d4681aca4c74fe5f697f0c423b80d498ec50fd915ba018b72c101f?s=96&d=mm&r=g8863514d8bed0cf6080f23db40e00354\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/bedeb68368d4681aca4c74fe5f697f0c423b80d498ec50fd915ba018b72c101f?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/bedeb68368d4681aca4c74fe5f697f0c423b80d498ec50fd915ba018b72c101f?s=96&d=mm&r=g\",\"caption\":\"Nic Raboy, Developer Advocate, Couchbase\"},\"description\":\"Nic Raboy is an advocate of modern web and mobile development technologies. He has experience in Java, JavaScript, Golang and a variety of frameworks such as Angular, NativeScript, and Apache Cordova. Nic writes about his development experiences related to making web and mobile development easier to understand.\",\"sameAs\":[\"https:\\\/\\\/www.thepolyglotdeveloper.com\",\"https:\\\/\\\/www.facebook.com\\\/thepolyglotdeveloper\",\"https:\\\/\\\/x.com\\\/nraboy\"],\"url\":\"https:\\\/\\\/www.couchbase.com\\\/blog\\\/author\\\/nic-raboy-2\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"NativeScript Angular Application: Save Captured Images","description":"See how to capture images in a NativeScript application using Angular and save those captured images to Couchbase Lite, an embedded device level database.","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.couchbase.com\/blog\/save-captured-images-nativescript-angular-application-couchbase\/","og_locale":"en_US","og_type":"article","og_title":"Save Captured Images in a NativeScript Angular Application to Couchbase","og_description":"See how to capture images in a NativeScript application using Angular and save those captured images to Couchbase Lite, an embedded device level database.","og_url":"https:\/\/www.couchbase.com\/blog\/save-captured-images-nativescript-angular-application-couchbase\/","og_site_name":"The Couchbase Blog","article_author":"https:\/\/www.facebook.com\/thepolyglotdeveloper","article_published_time":"2017-04-27T14:45:09+00:00","article_modified_time":"2025-06-14T03:52:45+00:00","og_image":[{"width":967,"height":705,"url":"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/sites\/1\/2017\/04\/ns-couchbase-photos-p1.gif","type":"image\/gif"}],"author":"Nic Raboy, Developer Advocate, Couchbase","twitter_card":"summary_large_image","twitter_creator":"@nraboy","twitter_misc":{"Written by":"Nic Raboy, Developer Advocate, Couchbase","Est. reading time":"5 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.couchbase.com\/blog\/save-captured-images-nativescript-angular-application-couchbase\/#article","isPartOf":{"@id":"https:\/\/www.couchbase.com\/blog\/save-captured-images-nativescript-angular-application-couchbase\/"},"author":{"name":"Nic Raboy, Developer Advocate, Couchbase","@id":"https:\/\/www.couchbase.com\/blog\/#\/schema\/person\/bb545ebe83bb2d12f91095811d0a72e1"},"headline":"Save Captured Images in a NativeScript Angular Application to Couchbase","datePublished":"2017-04-27T14:45:09+00:00","dateModified":"2025-06-14T03:52:45+00:00","mainEntityOfPage":{"@id":"https:\/\/www.couchbase.com\/blog\/save-captured-images-nativescript-angular-application-couchbase\/"},"wordCount":1094,"commentCount":3,"publisher":{"@id":"https:\/\/www.couchbase.com\/blog\/#organization"},"image":{"@id":"https:\/\/www.couchbase.com\/blog\/save-captured-images-nativescript-angular-application-couchbase\/#primaryimage"},"thumbnailUrl":"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/sites\/1\/2022\/11\/couchbase-nosql-dbaas.png","keywords":["Angular","base64","image","ios","javascript","nativescript","TypeScript"],"articleSection":["Android","Couchbase Mobile","JavaScript"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.couchbase.com\/blog\/save-captured-images-nativescript-angular-application-couchbase\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.couchbase.com\/blog\/save-captured-images-nativescript-angular-application-couchbase\/","url":"https:\/\/www.couchbase.com\/blog\/save-captured-images-nativescript-angular-application-couchbase\/","name":"NativeScript Angular Application: Save Captured Images","isPartOf":{"@id":"https:\/\/www.couchbase.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.couchbase.com\/blog\/save-captured-images-nativescript-angular-application-couchbase\/#primaryimage"},"image":{"@id":"https:\/\/www.couchbase.com\/blog\/save-captured-images-nativescript-angular-application-couchbase\/#primaryimage"},"thumbnailUrl":"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/sites\/1\/2022\/11\/couchbase-nosql-dbaas.png","datePublished":"2017-04-27T14:45:09+00:00","dateModified":"2025-06-14T03:52:45+00:00","description":"See how to capture images in a NativeScript application using Angular and save those captured images to Couchbase Lite, an embedded device level database.","breadcrumb":{"@id":"https:\/\/www.couchbase.com\/blog\/save-captured-images-nativescript-angular-application-couchbase\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.couchbase.com\/blog\/save-captured-images-nativescript-angular-application-couchbase\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.couchbase.com\/blog\/save-captured-images-nativescript-angular-application-couchbase\/#primaryimage","url":"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/sites\/1\/2022\/11\/couchbase-nosql-dbaas.png","contentUrl":"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/sites\/1\/2022\/11\/couchbase-nosql-dbaas.png","width":1800,"height":630},{"@type":"BreadcrumbList","@id":"https:\/\/www.couchbase.com\/blog\/save-captured-images-nativescript-angular-application-couchbase\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.couchbase.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Save Captured Images in a NativeScript Angular Application to Couchbase"}]},{"@type":"WebSite","@id":"https:\/\/www.couchbase.com\/blog\/#website","url":"https:\/\/www.couchbase.com\/blog\/","name":"The Couchbase Blog","description":"Couchbase, the NoSQL Database","publisher":{"@id":"https:\/\/www.couchbase.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.couchbase.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.couchbase.com\/blog\/#organization","name":"The Couchbase Blog","url":"https:\/\/www.couchbase.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.couchbase.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/2023\/04\/admin-logo.png","contentUrl":"https:\/\/www.couchbase.com\/blog\/wp-content\/uploads\/2023\/04\/admin-logo.png","width":218,"height":34,"caption":"The Couchbase Blog"},"image":{"@id":"https:\/\/www.couchbase.com\/blog\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"https:\/\/www.couchbase.com\/blog\/#\/schema\/person\/bb545ebe83bb2d12f91095811d0a72e1","name":"Nic Raboy, Developer Advocate, Couchbase","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/bedeb68368d4681aca4c74fe5f697f0c423b80d498ec50fd915ba018b72c101f?s=96&d=mm&r=g8863514d8bed0cf6080f23db40e00354","url":"https:\/\/secure.gravatar.com\/avatar\/bedeb68368d4681aca4c74fe5f697f0c423b80d498ec50fd915ba018b72c101f?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/bedeb68368d4681aca4c74fe5f697f0c423b80d498ec50fd915ba018b72c101f?s=96&d=mm&r=g","caption":"Nic Raboy, Developer Advocate, Couchbase"},"description":"Nic Raboy is an advocate of modern web and mobile development technologies. He has experience in Java, JavaScript, Golang and a variety of frameworks such as Angular, NativeScript, and Apache Cordova. Nic writes about his development experiences related to making web and mobile development easier to understand.","sameAs":["https:\/\/www.thepolyglotdeveloper.com","https:\/\/www.facebook.com\/thepolyglotdeveloper","https:\/\/x.com\/nraboy"],"url":"https:\/\/www.couchbase.com\/blog\/author\/nic-raboy-2\/"}]}},"acf":[],"authors":[{"term_id":9032,"user_id":63,"is_guest":0,"slug":"nic-raboy-2","display_name":"Nic Raboy, Developer Advocate, Couchbase","avatar_url":"https:\/\/secure.gravatar.com\/avatar\/bedeb68368d4681aca4c74fe5f697f0c423b80d498ec50fd915ba018b72c101f?s=96&d=mm&r=g","0":null,"1":"","2":"","3":"","4":"","5":"","6":"","7":"","8":""}],"_links":{"self":[{"href":"https:\/\/www.couchbase.com\/blog\/wp-json\/wp\/v2\/posts\/2983","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.couchbase.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.couchbase.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.couchbase.com\/blog\/wp-json\/wp\/v2\/users\/63"}],"replies":[{"embeddable":true,"href":"https:\/\/www.couchbase.com\/blog\/wp-json\/wp\/v2\/comments?post=2983"}],"version-history":[{"count":0,"href":"https:\/\/www.couchbase.com\/blog\/wp-json\/wp\/v2\/posts\/2983\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.couchbase.com\/blog\/wp-json\/wp\/v2\/media\/13873"}],"wp:attachment":[{"href":"https:\/\/www.couchbase.com\/blog\/wp-json\/wp\/v2\/media?parent=2983"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.couchbase.com\/blog\/wp-json\/wp\/v2\/categories?post=2983"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.couchbase.com\/blog\/wp-json\/wp\/v2\/tags?post=2983"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.couchbase.com\/blog\/wp-json\/wp\/v2\/ppma_author?post=2983"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}