Turning aspectRatio onto a parameter when cropping images with cropperjs on vue.js

Question

I've created an image cropping web app using cropperjs through vue.js (This is the tutorial I followed: https://www.youtube.com/watch?v=6a6AzjbGLsI). In the mounted() Vue lifecycle event, I set the aspectRatio of the image cropper to 1, but I want to turn this aspectRatio onto a parameter so I can reuse my code. How would I approach doing this?

This is what I have on my file ImageCropper.vue

<template>
  <div>
    <div class="img-container">
      <img ref="image" :src="src">
    </div>
    <img :src="destination" class="img-preview">
  </div>
</template>

<script>
  import Cropper from "cropperjs";
  export default {
    name: 'ImageCropper',
    props: {
      src: String
    }, 
    data () {
      return {
        cropper: {},
        destination: {},
        image: {}
      }
    },
    mounted () {
      this.image = this.$refs.image;
      this.cropper = new Cropper(this.image, {
        zoomable: false,
        scalable: false,
        aspectRatio: 1, // need to turn this into a parameter
        crop: () => {
          const canvas = this.cropper.getCroppedCanvas();
          this.destination = canvas.toDataURL("image/png"); // should just be the uploaded image file
        }
      });
    }
  }
</script>

//these can all be manipulated 
<style scoped>
  .img-container {
    width: 640px;
    height: 480px;
    float: left;
  }

  .img-preview {
    width: 200px;
    height: 200px;
    float: left;
    margin-left: 10px;
  }
</style>

what my cropper currently looks like

Answer 1

You can pass the aspect ratio as a props to your image-cropper component.

In your App.vue (or any parent component using your image-croper component):

<template>
    <image-cropper :src="'/src/assets/logo.png'" :aspect-ratio="2/3"></image-cropper>
</template>

Then in your ImageCropper.vue:

<template>
    <div>
        <div class="img-container">
            <img ref="image" :src="src" />
        </div>
        <img :src="destination" class="img-preview" />
    </div>
</template>

<script>
    import Cropper from 'cropperjs';

    export default {
        name: 'ImageCropper',
        props: {
            src: String,
            aspectRatio: Number,  // get the value of aspect-ratio from parent
        },
        data() {
            return {
                cropper: {},
                destination: {},
                image: {},
            };
        },
        mounted() {
            this.image = this.$refs.image;
            this.cropper = new Cropper(this.image, {
                zoomable: false,
                scalable: false,
                aspectRatio: this.aspectRatio,  // use it here
                crop: () => {
                    const canvas = this.cropper.getCroppedCanvas();
                    this.destination = canvas.toDataURL('image/png');
                },
            });
        },
    };
</script>