feat: rounded avatar editor

src/components/AvatarEditor.vue

@@ -7,10 +7,12 @@
         {{ caption }}
       </v-card-title>
       <v-card-text>
-        <v-layout justify-center>
+        <v-layout justify-center class="mb-4">
+          <div
+            :class="rounded ? 'rounded' : ''"
+            class="canvas-container">
             <croppa
               ref="croppa"
-            class="canvas-container"
               v-model="plugin"
               canvas-color="white"
               accept="image/jpeg,image/png"
@@ -24,6 +26,12 @@
               @file-type-mismatch="handleFileTypeMismatch"
               placeholder="Choisissez une image"
             ></croppa>
+            <!-- <div
+              v-if="rounded"
+              class="rounded-mask">
+              <div class="inside"></div>
+            </div> -->
+          </div>
         </v-layout>
         <v-layout justify-center>
           <v-btn
@@ -104,6 +112,10 @@ export default {
     loading: {
       type: Boolean,
       default: false
+    },
+    rounded: {
+      type: Boolean,
+      default: false
     }
   },
   methods: {
@@ -154,9 +166,24 @@ export default {
   .croppa-container {
     background: transparent !important;
   }
+  .canvas-container {
+    line-height: 0;
+  }
   .canvas-container canvas {
     border: 1px solid #bdc3c7;
   }
+  /* .rounded-mask {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    top: 0;
+    left: 0;
+    border-radius: 50%;
+    background-color: rgba(189, 195, 199, 0.5);
+  } */
+  .canvas-container.rounded .croppa-container canvas {
+    border-radius: 50% !important;
+  }
   @media screen and (max-width: 959px) {
     .canvas-container canvas {
       width: 100% !important;