Implement Image Compressor in Vuejs using javascript

Question

I want to ask something about image compressor using Javascript. I tried to Implement this source code in vue project but somehow I think I missed some steps. this is the thread that I tried to use for my image compressor : how-to-compress-an-image-via-javascript-in-the-browser

I tried to compress image around 0.7 scale this is the example of my template:

    <input
     type="file"
     name="fileName"
     id="uploadFile"
     ref="uploadFile"
     accept="image/*"
     class="input-file"
     placeholder="Upload Photo"
     @change="uploadBankPhoto"
    />
    
    <div id="preview"></div>

this is my data:

data() {
 return {
  registerBankPhoto: {},

  errors: {
   registerBankPhoto: false,
   registerBankPhotoMsg: "",
  },

 }
}

and this is my image compressor methods:

methods: {
    uploadBankPhoto() {
      if (this.$refs['uploadFile'] && this.$refs['uploadFile'].files && this.$refs['uploadFile'].files.length > 0) {
        const { size, type, name } = this.$refs['uploadFile'].files[0];
        const sizeLimit = 5120 * 1000;
        const allowedType = ['image/jpeg', 'image/jpg', 'image/png']
        if (size > sizeLimit) {
          this.errors.registerBankPhoto = true;
          this.errors.registerBankPhotoMsg = "Size too big";
        } else if (allowedType.indexOf(type) == -1) {
          this.errors.registerBankPhoto = true;
          this.errors.registerBankPhotoMsg = "Wrong Format";
        } else {
          this.errors.registerBankPhoto = false;
          console.log("Check Files Up : ", this.$refs['uploadFile'].files[0]);
          this.registerBankPhoto = URL.createObjectURL(this.$refs['uploadFile'].files[0]);
          console.log("Check Files : ", this.registerBankPhoto);

          // helper Image object
          let image = new Image();
          image.src = this.registerBankPhoto;
          image.onload = this.imgHelper(image);
        }
      }
    },

    imgHelper(img) {
      let resized = this.imgCompressor(img); // send it to canvas
      let newinput = document.createElement("input");
      newinput.type = 'hidden';
      newinput.name = 'images';
      newinput.value = resized; // put result from canvas into new hidden input
      this.registerBankPhoto = newinput;
      console.log("After Compress : ", this.registerBankPhoto);
    },

    imgCompressor(img) {
      let canvas = document.createElement('canvas');

      let width = 720;
      let height = 480;

      // resize the canvas and draw the image data into it
      canvas.width = width;
      canvas.height = height;
      let ctx = canvas.getContext("2d");
      ctx.drawImage(img, 0, 0, width, height);
      preview.appendChild(canvas);
      console.log("canvas : ", canvas);
      
      return canvas.toDataURL("image/jpeg",0.7);
    },

}

this is the image processing source that I tried to implement: source code for image processing

currently what I got is something like this:

but what make me wonder, why all the after compression has the same value where I got it wrong? since the image doesn't show in the preview? can someone tell me where I got this wrong?