{"id":2983,"date":"2017-04-27T07:45:09","date_gmt":"2017-04-27T14:45:09","guid":{"rendered":"https:\/\/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\/es\/save-captured-images-nativescript-angular-application-couchbase\/","title":{"rendered":"Guardar im\u00e1genes capturadas en una aplicaci\u00f3n NativeScript Angular a Couchbase"},"content":{"rendered":"<p>Cuando se trata de aplicaciones m\u00f3viles, me plantean una serie de preguntas concretas: la primera es c\u00f3mo guardar las im\u00e1genes capturadas, y la segunda, c\u00f3mo sincronizarlas entre dispositivos o con una base de datos remota. Como soy un gran fan de <a href=\"https:\/\/www.nativescript.org\" target=\"_blank\" rel=\"noopener\">NativeScript<\/a> para el desarrollo de Android e iOS, pens\u00e9 que ser\u00eda genial compartir uno de los muchos ejemplos posibles para resolver este problema.<\/p>\n<p>Vamos a ver c\u00f3mo capturar im\u00e1genes en una aplicaci\u00f3n NativeScript utilizando <a href=\"https:\/\/angular.io\/\" target=\"_blank\" rel=\"noopener\">Angular<\/a> y guardar esas im\u00e1genes capturadas en Couchbase Lite, una base de datos integrada a nivel de dispositivo.<\/p>\n<p><!--more--><\/p>\n<p>En adelante, es importante tener en cuenta que hay muchas maneras de guardar im\u00e1genes o cualquier otro dato de archivo dentro de una aplicaci\u00f3n m\u00f3vil. Por ejemplo, puedes guardarlos en una base de datos o en el sistema de archivos. En este ejemplo vamos a guardarlos directamente en la base de datos, pero investiga qu\u00e9 estrategia te funcionar\u00e1 mejor.<\/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>En la imagen animada anterior se nos presenta la posibilidad de capturar im\u00e1genes.  Las cosas son un poco diferentes en un simulador, pero en un dispositivo la c\u00e1mara se abrir\u00e1.  Despu\u00e9s de capturar una imagen se presentar\u00e1 en la pantalla y se guardar\u00e1 en Couchbase Lite como una cadena con formato base64.<\/p>\n<h2>Requisitos<\/h2>\n<p>No hay muchos requisitos para tener \u00e9xito con esta gu\u00eda.  Como m\u00ednimo necesitar\u00e1s lo siguiente:<\/p>\n<ul>\n<li>NativeScript CLI<\/li>\n<li>Android SDK para Android y Xcode para iOS<\/li>\n<\/ul>\n<p>Para poder construir para Android necesitar\u00e1s el SDK de Android y para poder construir para iOS necesitar\u00e1s Xcode, que solo est\u00e1 disponible en ordenadores macOS. Para esta gu\u00eda en particular, no es necesaria una instancia remota de Couchbase Server.<\/p>\n<h2>Creaci\u00f3n de un nuevo proyecto NativeScript con Angular<\/h2>\n<p>Con los prerrequisitos instalados y listos para funcionar, necesitamos crear un nuevo proyecto en alg\u00fan lugar de nuestro ordenador.<\/p>\n<p>Desde la CLI de NativeScript, ejecute lo siguiente:<\/p>\n<pre class=\"lang:default highlight:0 decode:true\">tns create foto-proyecto --ng<\/pre>\n<p>El comando anterior crear\u00e1 un nuevo proyecto Angular, por lo tanto el comando\u00a0<code>--ng<\/code> bandera.<\/p>\n<p>Antes de empezar a desarrollar, necesitaremos instalar el plugin de Couchbase para NativeScript.  Esto se puede hacer ejecutando lo siguiente:<\/p>\n<pre class=\"lang:default highlight:0 decode:true\">tns plugin add nativescript-couchbase<\/pre>\n<p>Aunque t\u00e9cnicamente podemos empezar a desarrollar la aplicaci\u00f3n, hay un asunto m\u00e1s del que ocuparse. En iOS es un requisito explicar cada uno de los permisos que se utilizan. Poder hacer fotos o usar la galer\u00eda es una petici\u00f3n de permiso, as\u00ed que tenemos que explicarlo.<\/p>\n<p>Abra el archivo\u00a0<strong>app\/App_Resources\/iOS\/Info.plist<\/strong> e incluya lo siguiente:<\/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>Lo anterior evitar\u00e1 cualquier error durante el tiempo de compilaci\u00f3n o de ejecuci\u00f3n.  Ahora podemos empezar a desarrollar con seguridad nuestra aplicaci\u00f3n m\u00f3vil para Android e iOS.<\/p>\n<h2>Desarrollo de la l\u00f3gica central de la aplicaci\u00f3n y de la interfaz de usuario<\/h2>\n<p>Antes de empezar a a\u00f1adir nuestro propio c\u00f3digo, vamos a despojarnos de un mont\u00f3n de c\u00f3digo de plantilla que se incluye al crear un nuevo proyecto NativeScript con Angular.<\/p>\n<p>Esto va a ser una aplicaci\u00f3n de una sola p\u00e1gina por lo que necesitamos eliminar cualquiera de las rutas de navegaci\u00f3n preexistentes.  Comience por abrir el proyecto\u00a0<strong>app\/app.routing.ts<\/strong> y que tenga el siguiente aspecto:<\/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>Lo \u00fanico que hicimos fue eliminar las rutas del\u00a0<code>rutas<\/code> array.  T\u00e9cnicamente podemos eliminar este archivo, pero es m\u00e1s f\u00e1cil quitar lo que no vamos a utilizar.<\/p>\n<p>Ahora abra el proyecto\u00a0<strong>app\/app.module.ts<\/strong> y hacer que el TypeScript se parezca a lo siguiente:<\/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>F\u00edjate que en lo anterior hemos eliminado cualquier referencia a los archivos MVC que antes eran rutas.  Esto incluye HTML, TypeScript y el servicio Angular que se proporcion\u00f3.<\/p>\n<p>A la hora de a\u00f1adir nuevo contenido, vamos a centrarnos primero en la l\u00f3gica TypeScript, para pasar despu\u00e9s a la interfaz de usuario HTML. Abra el proyecto\u00a0<strong>app\/app.component.ts<\/strong> e incluya lo siguiente:<\/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>En el c\u00f3digo anterior ocurren muchas cosas, as\u00ed que vamos a desglosarlo.<\/p>\n<p>Hab\u00edamos descargado previamente el plugin de Couchbase para NativeScript, pero ahora necesitamos importarlo junto con otras cosas:<\/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>La funcionalidad de la c\u00e1mara ya est\u00e1 incluida en NativeScript, s\u00f3lo tenemos que importarla.  Cuando se trata de manipular los datos de la c\u00e1mara, la funci\u00f3n\u00a0<code>Fuente de im\u00e1genes<\/code> es lo que usaremos.<\/p>\n<p>Dentro del\u00a0<code>AppComponent<\/code> tenemos dos variables:<\/p>\n<pre class=\"lang:default highlight:0 decode:true\">private database: any;\r\npublic images: Array&lt;any&gt;;<\/pre>\n<p>En <code>base de datos<\/code> contendr\u00e1 nuestra instancia abierta de Couchbase Lite y el archivo\u00a0<code>im\u00e1genes<\/code> contendr\u00e1 todas las im\u00e1genes guardadas que se presentar\u00e1n en la pantalla.<\/p>\n<p>Dentro del\u00a0<code>constructor<\/code> abrimos nuestra base de datos, creamos una vista que m\u00e1s tarde podremos consultar, e inicializamos el array que almacenar\u00e1 nuestras im\u00e1genes.<\/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>La vista que estamos creando devolver\u00e1 todos los documentos NoSQL que tengan una propiedad llamada\u00a0<code>tipo<\/code> que se establece en\u00a0<code>imagen<\/code> que nos representa que es una de las im\u00e1genes posibles para mostrar en la pantalla.<\/p>\n<p>Porque los datos nunca deben cargarse en el\u00a0<code>constructor<\/code> llevamos las cosas al m\u00e9todo\u00a0<code>ngOnInit<\/code> m\u00e9todo:<\/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>En\u00a0<code>ngOnInit<\/code> se activa despu\u00e9s de que\u00a0<code>constructor<\/code> y consultar\u00e1 la vista previamente creada. Cada documento guardado tendr\u00e1 una propiedad llamada\u00a0<code>imagen<\/code> que contiene datos de imagen en base64. Este modelo se basa en nuestro dise\u00f1o.<\/p>\n<p>Tras obtener los datos en base64 se convierten en un\u00a0<code>Fuente de im\u00e1genes<\/code> y se a\u00f1ade a nuestra matriz para que aparezca en la pantalla.<\/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>Lo anterior\u00a0<code>captura<\/code> es llamado a trav\u00e9s de la pulsaci\u00f3n de un bot\u00f3n en nuestro HTML. Lanzar\u00e1 la c\u00e1mara con algunos ajustes definidos.<\/p>\n<p>Si la captura se realiza correctamente, la imagen se convertir\u00e1 a base64 y se crear\u00e1 un documento NoSQL con informaci\u00f3n diversa junto a los datos base64.<\/p>\n<p>No est\u00e1 tan mal, \u00bfverdad?<\/p>\n<p>Ahora queremos echar un vistazo al c\u00f3digo HTML que acompa\u00f1a a esta l\u00f3gica.  Abra el proyecto\u00a0<strong>app\/app.component.html<\/strong> e incluya lo siguiente:<\/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>En el HTML anterior tenemos una barra de acci\u00f3n con un bot\u00f3n que activar\u00e1 la c\u00e1mara.  Dentro del contenido central de la p\u00e1gina tenemos un bucle que recorrer\u00e1 cada imagen del array y la mostrar\u00e1 en pantalla.<\/p>\n<h2>Conclusi\u00f3n<\/h2>\n<p>Acabas de ver c\u00f3mo crear una aplicaci\u00f3n b\u00e1sica de captura de im\u00e1genes con <a href=\"https:\/\/www.nativescript.org\" target=\"_blank\" rel=\"noopener\">NativeScript<\/a> y Angular que guarda los datos de las im\u00e1genes directamente en documentos NoSQL de Couchbase Lite como cadenas codificadas en base64. La pr\u00f3xima vez vamos a ver c\u00f3mo sincronizar estos datos de imagen entre dispositivos y una instancia de base de datos remota.<\/p>\n<p>Mientras tanto, echa un vistazo a este otro tutorial sobre el uso de NativeScript con Couchbase titulado,\u00a0<a href=\"https:\/\/www.couchbase.com\/blog\/es\/key-value-operations-in-couchbase-mobile-via-nativescript-and-angular\/\" target=\"_blank\" rel=\"noopener\">Operaciones clave-valor en Couchbase Mobile mediante NativeScript y Angular<\/a>.<\/p>\n<p>\u00bfQuieres m\u00e1s ayuda con Couchbase para Android e iOS? Echa un vistazo a la <a href=\"https:\/\/www.couchbase.com\/blog\/es\/developers\/\" target=\"_blank\" rel=\"noopener\">Portal para desarrolladores de Couchbase<\/a> para consultar documentaci\u00f3n y ejemplos.<\/p>","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>","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"],"acf":[],"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v26.0 (Yoast SEO v26.0) - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\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\/es\/save-captured-images-nativescript-angular-application-couchbase\/\" \/>\n<meta property=\"og:locale\" content=\"es_MX\" \/>\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\/es\/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 minutos\" \/>\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\":\"es\",\"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\":\"es\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.couchbase.com\/blog\/save-captured-images-nativescript-angular-application-couchbase\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@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\":\"es\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.couchbase.com\/blog\/#organization\",\"name\":\"The Couchbase Blog\",\"url\":\"https:\/\/www.couchbase.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"es\",\"@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\":\"es\",\"@id\":\"https:\/\/www.couchbase.com\/blog\/#\/schema\/person\/image\/8863514d8bed0cf6080f23db40e00354\",\"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\/es\/author\/nic-raboy-2\/\"}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"NativeScript Angular Application: Save Captured Images","description":"Vea c\u00f3mo capturar im\u00e1genes en una aplicaci\u00f3n NativeScript usando Angular y guardar esas im\u00e1genes capturadas en Couchbase Lite, una base de datos integrada a nivel de dispositivo.","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\/es\/save-captured-images-nativescript-angular-application-couchbase\/","og_locale":"es_MX","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\/es\/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 minutos"},"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":"es","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":"Vea c\u00f3mo capturar im\u00e1genes en una aplicaci\u00f3n NativeScript usando Angular y guardar esas im\u00e1genes capturadas en Couchbase Lite, una base de datos integrada a nivel de dispositivo.","breadcrumb":{"@id":"https:\/\/www.couchbase.com\/blog\/save-captured-images-nativescript-angular-application-couchbase\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.couchbase.com\/blog\/save-captured-images-nativescript-angular-application-couchbase\/"]}]},{"@type":"ImageObject","inLanguage":"es","@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":"El blog de Couchbase","description":"Couchbase, la base de datos NoSQL","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":"es"},{"@type":"Organization","@id":"https:\/\/www.couchbase.com\/blog\/#organization","name":"El blog de Couchbase","url":"https:\/\/www.couchbase.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"es","@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, Defensor del Desarrollador, Couchbase","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/www.couchbase.com\/blog\/#\/schema\/person\/image\/8863514d8bed0cf6080f23db40e00354","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 es un defensor de las tecnolog\u00edas modernas de desarrollo web y m\u00f3vil. Tiene experiencia en Java, JavaScript, Golang y una variedad de frameworks como Angular, NativeScript y Apache Cordova. Nic escribe sobre sus experiencias de desarrollo relacionadas con hacer el desarrollo web y m\u00f3vil m\u00e1s f\u00e1cil de entender.","sameAs":["https:\/\/www.thepolyglotdeveloper.com","https:\/\/www.facebook.com\/thepolyglotdeveloper","https:\/\/x.com\/nraboy"],"url":"https:\/\/www.couchbase.com\/blog\/es\/author\/nic-raboy-2\/"}]}},"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","author_category":"","last_name":"Raboy","first_name":"Nic","job_title":"","user_url":"https:\/\/www.thepolyglotdeveloper.com","description":"Nic Raboy es un defensor de las tecnolog\u00edas modernas de desarrollo web y m\u00f3vil. Tiene experiencia en Java, JavaScript, Golang y una variedad de frameworks como Angular, NativeScript y Apache Cordova. Nic escribe sobre sus experiencias de desarrollo relacionadas con hacer el desarrollo web y m\u00f3vil m\u00e1s f\u00e1cil de entender."}],"_links":{"self":[{"href":"https:\/\/www.couchbase.com\/blog\/es\/wp-json\/wp\/v2\/posts\/2983","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.couchbase.com\/blog\/es\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.couchbase.com\/blog\/es\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.couchbase.com\/blog\/es\/wp-json\/wp\/v2\/users\/63"}],"replies":[{"embeddable":true,"href":"https:\/\/www.couchbase.com\/blog\/es\/wp-json\/wp\/v2\/comments?post=2983"}],"version-history":[{"count":0,"href":"https:\/\/www.couchbase.com\/blog\/es\/wp-json\/wp\/v2\/posts\/2983\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.couchbase.com\/blog\/es\/wp-json\/wp\/v2\/media\/13873"}],"wp:attachment":[{"href":"https:\/\/www.couchbase.com\/blog\/es\/wp-json\/wp\/v2\/media?parent=2983"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.couchbase.com\/blog\/es\/wp-json\/wp\/v2\/categories?post=2983"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.couchbase.com\/blog\/es\/wp-json\/wp\/v2\/tags?post=2983"},{"taxonomy":"author","embeddable":true,"href":"https:\/\/www.couchbase.com\/blog\/es\/wp-json\/wp\/v2\/ppma_author?post=2983"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}