fix(Price Validation Assistant): fix image display (#1152)

Co-authored-by: Alex Bourreau <[email protected]>

src/components/ContributionAssistantPriceFormCard.vue

@@ -8,11 +8,13 @@
     <v-divider />
     <v-card-text>
       <v-img
+        v-if="mode === 'Contribution'"
         class="mb-4"
         height="200px"
         :src="productPriceForm.proofImage"
         contain
       />
+      <ProofImageCropped v-else-if="mode === 'Validation'" class="mb-4" height="200px" :proofImageFilePath="productPriceForm.proofImage" :boundingBox="productPriceForm.bounding_box" />
       <ProductInputRow :productForm="productPriceForm" :disableInitWhenSwitchingType="true" @filled="productFormFilled = $event" />
       <v-alert
         v-if="productIsTypeProduct"
@@ -72,6 +74,7 @@ import constants from '../constants'
 
 export default {
   components: {
+    ProofImageCropped: defineAsyncComponent(() => import('../components/ProofImageCropped.vue')),
   ProductInputRow: defineAsyncComponent(() => import('../components/ProductInputRow.vue')),
   PriceInputRow: defineAsyncComponent(() => import('../components/PriceInputRow.vue')),
   ProofFooterRow: defineAsyncComponent(() => import('../components/ProofFooterRow.vue')),

src/components/ProofImageCropped.vue

@@ -0,0 +1,54 @@
+<template>
+  <v-img
+    :src="croppedImage"
+    contain
+  />
+</template>
+
+<script>
+export default {
+  props: {
+    proofImageFilePath: {
+      type: String,
+      default: ''
+    },
+    boundingBox: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      canvas: null,
+      ctx: null,
+      proofImage: null,
+      croppedImage: null
+    }
+  },
+  mounted() {
+    this.getImage()
+  },
+  methods: {
+    getImage() {
+      this.canvas = document.createElement('canvas')
+      this.ctx = this.canvas.getContext('2d')
+      this.proofImage = new Image()
+      this.proofImage.onload = this.cropImage
+      this.proofImage.src = `${import.meta.env.VITE_OPEN_PRICES_APP_URL}/img/${this.proofImageFilePath}`
+      this.proofImage.crossOrigin = 'Anonymous'
+    },
+    cropImage() {
+      const startY = this.boundingBox[0] * this.proofImage.height
+      const startX = this.boundingBox[1] * this.proofImage.width
+      const endY = this.boundingBox[2] * this.proofImage.height
+      const endX = this.boundingBox[3] * this.proofImage.width
+      const width = Math.abs(endX - startX)
+      const height = Math.abs(endY - startY)
+      this.canvas.width = width
+      this.canvas.height = height
+      this.ctx.drawImage(this.proofImage, Math.min(startX, endX), Math.min(startY, endY), width, height, 0, 0, width, height)
+      this.croppedImage = this.canvas.toDataURL()
+    }
+  }
+}
+</script>

src/views/PriceValidatorAssistant.vue

@@ -121,6 +121,7 @@ export default {
               // proofImage: 'https://prices.openfoodfacts.org/img/0024/2NToLMxOgN.webp',
               product_code: barcodeString,
               detected_product_code: barcodeString,
+              bounding_box: data.items[i].bounding_box
             }
             this.productPriceForms.push(productPriceForm)
           }