Ability to resize an image after image is loaded in uploader BEFORE upload

[anli-xsigns]

Suppose a user uploads a very high resolution from phone. We want the ability to check the resolution and of the image if it is greater than X,Y, then resize it to x,y and then upload it. This will eliminate a lot of bandwidth and storage problems down the road due to large image sizes.

In #7165 using vue-croppa is suggested but that project looks dead and is only available for vue2. Are there any other suggestions? Thanks a lot for your help!

[Dtsiantaris]

You can use FileReader to do this easily enough. All these libraries use similar tactics under the hood anyways.

<template>
 <q-uploader
    label="Upload Image"
    @added="onFileAdded"
    :max-files="1"
    accept="image/*"
 />
</template>

<script setup>
import { ref } from 'vue';

const onFileAdded = (files) => {
 const file = files[0]; // Assuming only one file is added at a time
 const reader = new FileReader();

 reader.onload = (event) => {
    const img = new Image();
    img.onload = () => {
      const canvas = document.createElement('canvas');
      const ctx = canvas.getContext('2d');

      // Set the canvas dimensions to the desired size
      const maxWidth = 800; // Example: Max width
      const maxHeight = 800; // Example: Max height
      let width = img.width;
      let height = img.height;

      if (width > height) {
        if (width > maxWidth) {
          height *= maxWidth / width;
          width = maxWidth;
        }
      } else {
        if (height > maxHeight) {
          width *= maxHeight / height;
          height = maxHeight;
        }
      }

      canvas.width = width;
      canvas.height = height;
      ctx.drawImage(img, 0, 0, width, height);

      canvas.toBlob((blob) => {
        // Now you can upload the blob
        // For example, you can use Axios to send the blob to a server
        // axios.post('/upload', blob, { headers: { 'Content-Type': 'image/jpeg' } });
        console.log('Resized image blob:', blob);
      }, 'image/jpeg', 0.95); // 0.95 is the quality of the JPEG image
    };

    img.src = event.target.result;
 };

 reader.readAsDataURL(file);
};
</script>

Note that I've taken this code directly from phind so you might need to make some tweaks but I use very similar code.