Commit 80a41058 authored by Дмитрий Малюгин's avatar Дмитрий Малюгин 🕓
Browse files

change url of image and cropper

parent e32e2834

src/components/CreateEntityMenu.vue

+10 −16
Original line number Diff line number Diff line
@@ -15,15 +15,10 @@ 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;

  const url = URL.createObjectURL(file);

  image.src = url;

  console.log('image width and height: ', image.width, image.height);

  console.log('url length: ', url.length);
@@ -34,7 +29,6 @@ const addImage = (files: FileList) => { 
    image_position: 'left',

    image_height: 300

  });

  });

};

onChange((files) => {

  if (files && files?.length > 0) {

src/modules/BaseModal.vue

+7 −1
Original line number Diff line number Diff line 
<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>

src/pages/HomePage.vue

+13 −18
Original line number Diff line number Diff line
@@ -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;

    const url = URL.createObjectURL(file);

    image.src = url;

    console.log('url: ', url);

    image.onload = function () {

        console.log('image width and height: ', image.width, image.height);

        imageInfo.value.url = String(reader.result);

      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"