Retrieve and display photos from localstorage system

Photo stored in text format (base 64) in localstorage

src/components/CommonUtil.vue

@@ -17,6 +17,8 @@ export default {
     CONST_STORAGE_OBSERVATION_LIST      :   'store-observation-list',
     CONST_STORAGE_IMAGE_LIST            :   'store-image-list',
 
+    CONST_IMAGE_CANVAS_WIDTH            :   100,
+    CONST_IMAGE_CANVAS_HEIGHT           :   100,
 
     CONST_CROP_CATEGORY_ID              :   'cropCategoryId',
     CONST_ORGANISM_ID                   :   'organismId',
@@ -37,7 +39,7 @@ export default {
 
     CONST_URL_STATIC_IMAGE_PATH         :   '/static/images/observations/',
     
-
+    
     CONST_GPS_URL_NORWAY_MAP            :   'https://opencache.statkart.no/gatekeeper/gk/gk.open_wmts?Version=1.0.0&service=wmts&request=getcapabilities',
     CONST_GPS_DEFAULT_LATITUDE_NORWAY   :   16,
     CONST_GPS_DEFAULT_LONGITUDE_NORWAY  :   63,
@@ -46,7 +48,7 @@ export default {
     CONST_GPS_OBSERVATION_ZOOM          :   10,
     data(){
         return {
-            isEmulator                          :   false,
+            isEmulator                          :   true,
             CONST_URL_DOMAIN                    :   'http://vipslogic-local.no',
             CONST_URL_DOMAIN_EMULATOR_ANDROID   :   'http://10.0.2.2:8080/VIPSLogic', /** Android emulator host loop back */
 

src/components/PhotoObservation.vue

 <template>
     <div>
-        Photo : Observation Id : {{observationId}}
+<!--         Photo : Observation Id : {{observationId}}
                 Organism Id : {{organismId}}
-                Image File Name : {{imageFileName}}
-
+                Image File Name : {{imageFileName}} -->
+    <canvas ref="canvas" class="img-thumbnail float-left"></canvas>
     <common-util ref="CommonUtil"/>
     </div>
 </template>
@@ -34,6 +34,50 @@ export default {
                         }
                     },
     methods     :   {
+                        getPhotosFromStore()
+                        {
+                            let     This                =   this;
+                             let    storageImageData    =   JSON.parse(localStorage.getItem(CommonUtil.CONST_STORAGE_IMAGE_LIST));
+                             if(storageImageData)
+                             {
+                                $.each(storageImageData, function(index, observationImages){
+                                    if (
+                                            (observationImages.observationId    === This.observationId) &&
+                                            (observationImages.organismId       === This.organismId) 
+                                        )
+                                    {
+                                            let illustrations = observationImages.observationIllustrationSet;
+                                            if(illustrations)
+                                            {
+                                                $.each(illustrations, function(index, imageData){
+                                                    if(imageData.fileName === This.imageFileName)
+                                                    {
+                                                        let imgTextData = imageData.imageTextData;
+                                                        This.displayPhoto(imgTextData);
+                                                    }
+                                                })
+                                            }
+                                    }
+                                })
+                             }
+                        },
+                        displayPhoto(imgTextData)
+                        {
+                                let canvas          =   this.$refs.canvas;
+                                    canvas.width    =   75;
+                                    canvas.height   =   75;
+                                let context         =   canvas.getContext("2d");
+                                let image           =   new Image();
+                                    image.width     =   imgTextData.width;
+                                    image.height    =   imgTextData.height;
+                                image.src           =   imgTextData;
+                                image.onload        =   function(){
+                                                            context.drawImage(image,
+                                                                                    0,0,100,100,
+                                                                                    0,0,CommonUtil.CONST_IMAGE_CANVAS_WIDTH,CommonUtil.CONST_IMAGE_CANVAS_HEIGHT
+                                                                            );
+                                                        };
+                        },
                         checkPhotoAvailability()
                             {
                              this.storageData = localStorage.getItem(CommonUtil.CONST_STORAGE_IMAGE_LIST);
@@ -73,7 +117,6 @@ export default {
                                 toDataURL(photoURL)
                                 .then(imageTextData => {
                                     This.getImageDataJSON(This.imageFileName,imageTextData);
-                                    //console.log('RESULT:', imageTextData)
                                     This.storeData(This);
                                 })
                         },
@@ -155,7 +198,6 @@ export default {
                                 }
                              }
                              else{
-                                 console.log('storage system call 2');
                                  
                                  let localObservationImages = [];
                                  let localObservationImageData = {
@@ -181,6 +223,7 @@ export default {
             this.CONST_URL_DOMAIN = this.$refs.CommonUtil.getDomain();
             
             this.fetchFromServer();
+            this.getPhotosFromStore();
             
     }