Resizing and Image before upload?

Ionic Framework
1

Hey , in my app i can choose a photo from the gallery , but before i wanna upload it it should be resized…

it seems like all the tutorials on the web are outdated , the cordova plugin for resize is not maintained anymore (and i cant get it to work either) and is recommended to not be used anymore.

canvas method sucks , becasue the data is way huge and i also want to save it as a compressed jpeg file in firestore storage

now i wasted 2 full days and nothing i try seems to work

any help or a link to an actual working code example would be nice , thanx

Edit: its an ionic 4/5 project with capacitor

1 Like
2

So you want to automatically resize the image or open a image cropper where you can crop the image manually?

3

just resizing , i have a function for the correct width and height

4

I use Jimp for that in a node js based backend - think it will work in an app too

5

ok , canvas actually seems to work very good. i was just dumb

let dataURL = canvas.toDataURL(‘image/jpeg’, 0.8);

or

let dataURL = canvas.toBlob(callback(){…},‘image/jpeg’, 0.8);

yield good results …

full code:

img.onload = async function (e) {
      
      let picaWidth;
      let picaHeight;

      // Resize image to max wdth or height of 1000 pixels
      let maxWH = 1000;

      if (img.width > img.height) {
        picaWidth = maxWH;
        picaHeight = maxWH * img.height / img.width
      } else {
        picaWidth = maxWH * img.width / img.height;
        picaHeight = maxWH;
      }

      canvas.width = picaWidth;
      canvas.height = picaHeight;

      let snapshotCtx = canvas.getContext("2d");
      snapshotCtx.drawImage(img, 0, 0, picaWidth, picaHeight);

      let dataURL = canvas.toDataURL('image/jpeg', 0.8);

     // ... do stuff
    }

    img.src = image.webPath; // (from capacitor camera)

this works in both android and web

1 Like