use advence-cropper to solve issue #86

alexfauquette · Sep 10, 2021 · 0d2533a · 0d2533a
1 parent d2cfb74
commit 0d2533a
Showing 1 changed file with 24 additions and 9 deletions.
diff --git a/src/views/QuestionView.vue b/src/views/QuestionView.vue
@@ -68,13 +68,28 @@
             <div class="ui big label">{{ currentQuestion.value }}</div>
           </div>
           <div class="ui divider hidden"></div>
-          <viewer :options="imageZoomOptions" style="height: 300px">
-            <img
-              :class="[imageRotationClassName]"
-              :src="currentQuestionImageUrl"
-              style="max-height: 300px; max-width: 300px"
-            />
-          </viewer>
+          <cropper
+            style="max-height: 300px; max-width: 300px"
+            :src="currentQuestionImageUrl"
+            :canvas="false"
+            :checkOrientation="false"
+            :crossOrigine="false"
+            :default-position="{
+              left: 0,
+              top: 0,
+            }"
+            :default-size="
+              ({ imageSize }) => ({
+                width: imageSize.width,
+                height: imageSize.height,
+              })
+            "
+            :stencil-props="{
+              handlers: {},
+              movable: false,
+              resizable: false,
+            }"
+          />
           <div class="ui divider hidden"></div>
 
           <div>
@@ -129,6 +144,7 @@
 </template>
 
 <script>
+import { Cropper } from "vue-advanced-cropper";
 import robotoffService from "../robotoff";
 import Product from "../components/Product";
 import LoadingSpinner from "../components/LoadingSpinner";
@@ -180,7 +196,6 @@ const insightTypesNames = {
 
 const randomInsightTypeChoices = ["label", "category", "brand"];
 
-
 const countryNames = [
   "en:belgium",
   "en:denmark",
@@ -243,7 +258,7 @@ const reformatValueTag = (value) => {
 
 export default {
   name: "QuestionView",
-  components: { Product, AnnotationCounter, LoadingSpinner },
+  components: { Product, AnnotationCounter, LoadingSpinner, Cropper },
   data: function() {
     return {
       valueTag: getURLParam("value_tag"),