fix #37

previ · previ · commit e53389bbe057 · 2022-02-20T15:53:35.000+01:00
diff --git a/src/components/Gallery.vue b/src/components/Gallery.vue
@@ -51,14 +51,28 @@
                   <v-card-title class="text-h5 grey lighten-2">
                     {{ photo.name }}
                   </v-card-title>
-                  <v-img v-if="photo.type=='jpg'" :src="CBv1+'/photos/'+photo.fileName" aspect-ratio="1" class="grey lighten-2">
-                    <v-layout slot="placeholder" fill-height align-center justify-center ma-0>
+                  <v-img v-if="photo.type=='jpg'" height="100%" :src="CBv1+'/photos/'+photo.fileName" class="grey lighten-2" ref="photo" @click="getPixelColor">
+                    <v-layout slot="placeholder" align-center justify-center ma-0>
                       <v-progress-circular indeterminate color="grey lighten-5"></v-progress-circular>
                     </v-layout>
                   </v-img>
                   <video v-else-if="photo.type=='mp4'" controls autoplay :src="CBv1+'/photos/'+photo.fileName"/>
                   <v-card-actions>
                     <v-spacer></v-spacer>
+                    <v-text-field v-if="get_pixel_color" v-model="pixel_color" v-bind:label="$t('message.gallery_pixel_color')"
+                      readonly
+                    >
+                    </v-text-field>
+                    <v-btn-toggle
+                      v-model="get_pixel_color"
+                    >
+                    <v-btn
+                      text
+                      value="true"
+                    >
+                      {{ $t("message.gallery_get_pixel_color") }}
+                    </v-btn>
+                    </v-btn-toggle>
                     <v-btn
                       color="primary"
                       text
@@ -153,6 +167,27 @@ export default {
       const currentStatus = this.$store.getters.drawerStatus;
       this.$store.commit('toggleDrawer', !currentStatus);
     },
+    getPixelColor(event) {
+      if (this.get_pixel_color) {
+        const img = this.$refs.photo.image;
+        const canvas = document.createElement('canvas');
+        canvas.width = img.width;
+        canvas.height = img.height;
+        img.crossOrigin = 'Anonymous';
+        canvas.getContext('2d').drawImage(img, 0, 0, img.width, img.height);
+        const pixelData = canvas.getContext('2d').getImageData(event.layerX, event.layerY, 1, 1).data;
+        /* eslint-disable prefer-template */
+        const colorHex = '#' + this.paddedHexString(pixelData[0]) + this.paddedHexString(pixelData[1]) + this.paddedHexString(pixelData[2]);
+        /* eslint-enable */
+        this.pixel_color = colorHex;
+      }
+    },
+    paddedHexString(n) {
+      const ns = n.toString(16);
+      /* eslint-disable prefer-template */
+    	return ('00' + ns).substring(ns.length);
+      /* eslint-enable */
+    }
   },
   data() {
     return {
@@ -163,7 +198,9 @@ export default {
       l: null,
       photo: null,
       gallery_detail: null,
-      confirmDeleteDlg: null
+      confirmDeleteDlg: null,
+      get_pixel_color: false,
+      pixel_color: ''
     };
   },
   computed: {
diff --git a/src/i18n/locales/it/messages.json b/src/i18n/locales/it/messages.json
@@ -110,6 +110,8 @@
     "control_video_rec_stopped": "Registrazione terminata",
     "control_sound_playing": "'Nota in riproduzione'",
     "control_photo_gallery": "Galleria",
+    "gallery_pixel_color": "Colore del pixel",
+    "gallery_get_pixel_color": "Ricava colore del pixel",
     "coderbot_status_offline_1": "In attesa che CoderBot torni online...",
     "coderbot_status_offline_2": "CoderBot irraggiungibile",
     "coderbot_status_offline_3": "Il coderbot risulta offline, non puoi eseguire il programma.",
