From 80a410587476b2a5a6bba3a8b95c3218464cc4ab Mon Sep 17 00:00:00 2001
From: "d.malygin" <d.malygin@iqdev.digital>
Date: Fri, 16 Aug 2024 16:09:02 +0500
Subject: [PATCH] change url of image and cropper

---
 src/components/CreateEntityMenu.vue | 26 ++++++++++--------------
 src/modules/BaseModal.vue           |  8 +++++++-
 src/pages/HomePage.vue              | 31 ++++++++++++-----------------
 3 files changed, 30 insertions(+), 35 deletions(-)

diff --git a/src/components/CreateEntityMenu.vue b/src/components/CreateEntityMenu.vue
index 63759b7..6dbdd34 100644
--- a/src/components/CreateEntityMenu.vue
+++ b/src/components/CreateEntityMenu.vue
@@ -15,25 +15,19 @@ const {
 });
 
 const addImage = (files: FileList) => {
-  console.log('files', files);
   let image = new Image();
-
   const file = files[0];
-  const reader = new FileReader();
   console.log('file', file, 'type: ', typeof file);
-  reader.readAsDataURL(file);
-  reader.addEventListener('load', () => {
-    const url = reader.result;
-    image.src = url;
-    console.log('image width and height: ', image.width, image.height);
-    console.log('url length: ', url.length);
-    emit('addEntity', {
-      entity_type: 'image',
-      entity_uuid: uuidv4(),
-      image_data: url,
-      image_position: 'left',
-      image_height: 300
-    });
+  const url = URL.createObjectURL(file);
+  image.src = url;
+  console.log('image width and height: ', image.width, image.height);
+  console.log('url length: ', url.length);
+  emit('addEntity', {
+    entity_type: 'image',
+    entity_uuid: uuidv4(),
+    image_data: url,
+    image_position: 'left',
+    image_height: 300
   });
 };
 onChange((files) => {
diff --git a/src/modules/BaseModal.vue b/src/modules/BaseModal.vue
index 3e192ba..af212bf 100644
--- a/src/modules/BaseModal.vue
+++ b/src/modules/BaseModal.vue
@@ -1,6 +1,7 @@
 <script setup lang="ts">
 import { Cropper } from 'vue-advanced-cropper';
 import 'vue-advanced-cropper/dist/style.css';
+import 'vue-advanced-cropper/dist/theme.compact.css';
 import { useInterfaceStore } from '@/app/stores/interface';
 import { useWindowSize, useVModels } from '@vueuse/core';
 import type { IImageMainInfo } from '@/app/interfaces';
@@ -92,7 +93,12 @@ function onCropperChange({ canvas }) {
       <div
         :style="`position: relative; width: ${stageSize.width}px; height: ${stageSize.height}px;`"
       >
-        <Cropper :src="imageInstance.src" @change="onCropperChange"></Cropper>
+        <Cropper
+          :src="imageInstance.src"
+          @change="onCropperChange"
+          :minWidth="200"
+          :minHeight="200"
+        ></Cropper>
       </div>
     </Dialog>
   </div>
diff --git a/src/pages/HomePage.vue b/src/pages/HomePage.vue
index 85f18f8..f25871e 100644
--- a/src/pages/HomePage.vue
+++ b/src/pages/HomePage.vue
@@ -29,8 +29,7 @@ const addEntity = (newEntity: IEntity) => {
   const data = {
     event: 'createHomeEntity',
     body: {
-      ...newEntity,
-      nickName: authorizationStore.userNickName
+      ...newEntity
     }
   };
   websocketStore.sendData(data);
@@ -47,24 +46,19 @@ function openUploadFileModal() {
 }
 function uploadFile($event: Event) {
   const target = $event.target as HTMLInputElement;
-  console.log('target.files', target.files);
   if (target && target.files && target.files[0]) {
     let image = new Image();
     const file = target.files[0];
-    console.log('file: ', file);
-    const reader = new FileReader();
-    reader.readAsDataURL(file);
-    reader.addEventListener('load', () => {
-      image.src = reader.result;
-      image.onload = function () {
-        console.log('image width and height: ', image.width, image.height);
-        imageInfo.value.url = String(reader.result);
-        imageInfo.value.width = image.width;
-        imageInfo.value.height = image.height;
-        console.log('imageInfo.value', imageInfo.value);
-        openUploadFileModal();
-      };
-    });
+    const url = URL.createObjectURL(file);
+    image.src = url;
+    console.log('url: ', url);
+    image.onload = function () {
+      imageInfo.value.url = url;
+      imageInfo.value.width = image.width;
+      imageInfo.value.height = image.height;
+      console.log('imageInfo.value', imageInfo.value);
+      openUploadFileModal();
+    };
   }
 }
 </script>
@@ -96,7 +90,8 @@ function uploadFile($event: Event) {
             title="Change image"
             accept="image/*"
             class="w-2 pr-[135px] -mr-[135px] py-2 -my-2 pl-2 -ml-2 opacity-0"
-          /><span><i class="pi pi-image mr-2"></i>Change image</span>
+          />
+          <span><i class="pi pi-image mr-2"></i>Change image</span>
         </div>
         <button
           @click.prevent="setDefaultHomeBackground"
-- 
GitLab