edit cooperative page and functionality

components/FormInputImage.vue

@@ -0,0 +1,110 @@
+<template>
+  <div class="form-container">
+    <input class="input" type="file" @change="loadImage" />
+
+    <!-- Editor -->
+    <div v-show="edit">
+      <cropper
+        ref="cropperRef"
+        class="cropper"
+        :src="croppieImage"
+        :stencil-props="{ aspectRatio: 1 }"
+      />
+      <div>
+        <button class="filter-button" @click.prevent="crop">Aplicar</button>
+        <button @click.prevent="cancel">Cancelar</button>
+      </div>
+    </div>
+
+    <!-- Result -->
+    <div v-show="cropped && !edit">
+      <img :src="cropped" @click.prevent="editImage" />
+    </div>
+  </div>
+</template>
+
+<script>
+import { Cropper } from "vue-advanced-cropper";
+import "vue-advanced-cropper/dist/style.css";
+
+export default {
+  components: { Cropper },
+  props: {
+    imageUrl: {
+      type: String,
+      default: null,
+    },
+  },
+  emits: ["change"],
+  data() {
+    return {
+      croppieImage: "",
+      cropped: null,
+      edit: false,
+    };
+  },
+  mounted() {
+    if (typeof this.imageUrl === "string") {
+      this.croppieImage = this.imageUrl;
+      this.cropped = this.imageUrl;
+    }
+  },
+  methods: {
+    editImage() {
+      this.edit = true;
+    },
+    cancel() {
+      this.edit = false;
+    },
+    loadImage(e) {
+      const file = e.target.files?.[0];
+      if (!file) return;
+
+      const reader = new FileReader();
+      reader.onload = (evt) => {
+        this.croppieImage = evt.target.result;
+        this.edit = true;
+      };
+      reader.readAsDataURL(file);
+    },
+    crop() {
+      const canvas = this.$refs.cropperRef.getResult().canvas;
+      if (canvas) {
+        const base64 = canvas.toDataURL("image/png");
+        this.cropped = base64;
+
+        // Emitir como File
+        canvas.toBlob((blob) => {
+          if (blob) {
+            const fileName =
+              Math.random().toString(36).substring(2, 15) + ".png";
+            const file = new File([blob], fileName, { type: "image/png" });
+            this.$emit("change", file);
+          }
+        }, "image/png");
+      }
+      this.edit = false;
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.form-container {
+  width: 100%;
+}
+.cropper {
+  width: 500px;
+  height: 500px;
+}
+.filter-button {
+  background-color: $color-navy;
+  color: $color-light;
+  font-size: $xs;
+  padding: 0.5em 0.8em;
+  border-radius: 5px;
+}
+.input {
+  max-width: 100%;
+}
+</style>