Quasar image size

get image size

by s_light

HTML

<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/@quasar/extras/material-icons/material-icons.css">
<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/quasar@2/dist/quasar.prod.css">
<script src="https://cdn.jsdelivr.net/npm/vue@3/dist/vue.global.prod.js"></script>
<script src="https://cdn.jsdelivr.net/npm/quasar@2/dist/quasar.umd.prod.js"></script>

<div id="q-app">
  <div class="q-ma-md">
    Running Quasar v{{ $q.version }}
  </div>
  <div class="q-ma-md">
      <q-file
              label="photos"
              v-model="files"
              accept=".jpg, .png, image/*"
              multiple
              counter
              use-chips
              append
              />
  </div>
</div>

CSS

ul {
    list-style: none;
    padding: 0;
}

.card {
    /* aspect-ratio: 1; */
    border: solid black 1px;
    border-radius: 5%;
    min-width: 1vw;
    min-height: 1vh;
}

.card svg,
.card img {
    display: block;
    max-width: 10vw;
    max-height: 10vh;
    min-width: 5vw;
    min-height: 2vh;
    /* width: 100%; */
    /* height: 100%; */
}

.card svg path {
    fill: none;
    stroke: skyblue;
    stroke-width: 5;
}

JavaScript

const {
  ref,
  unref,
  watch,
  reactive,
} = Vue
const {
  useQuasar
} = Quasar


const app = Vue.createApp({setup() {
    const $q = useQuasar()

		const files = ref([])

		watch(files, (newFiles, oldFiles) => {
        if (newFiles instanceof Array) {
            for (const file of newFiles) {
                const img = new Image()
                console.log("img", img);
                img.scr = URL.createObjectURL(file)
                console.log("img.scr", img.scr);
                img.decode()
                .then(() => {
                    console.log("decode done....");
                    const sizes = {
                        width:this.width,
                        height: this.height
                    };
                    URL.revokeObjectURL(img.src);
                    console.log("sizes", sizes);
                })
                .catch((encodingError) => {
                    console.log("error", encodingError);
                })
            }
        }
    })

    return {
    	files,
    }
}})

app.use(Quasar, {
  config: {}
})
app.mount('#q-app')