title: How to set aspect ratio to vue cropperjs
body: <p>From vue-cropper.js example I can't find way to set aspect ratio like on jquery version in options.
  In jquery version you can pass options to element where is crop used, on this one I can't find answer..
      </p>
  
  <pre><code>  &lt;div id="app"&gt;
      &lt;h2 style="margin: 0;"&gt;Vue CropperJS&lt;/h2&gt;
      &lt;hr/&gt;
      &lt;input type="file" name="image" accept="image/*"
             style="font-size: 1.2em; padding: 10px 0;"
             @change="setImage" /&gt;
      &lt;br/&gt;
      &lt;div style="width: 400px; height:300px; border: 1px solid gray; display: inline-block;"&gt;
        &lt;vue-cropper
            ref='cropper'
            :guides="true"
            :view-mode="2"
            drag-mode="crop"
            :auto-crop-area="0.5"
            :min-container-width="250"
            :min-container-height="180"
            :background="true"
            :rotatable="true"
            :src="imgSrc"
            alt="Source Image"
            :img-style="{ 'width': '400px', 'height': '300px' }"&gt;
        &lt;/vue-cropper&gt;
      &lt;/div&gt;
      &lt;img :src="cropImg" style="width: 200px; height: 150px; border: 1px solid gray" alt="Cropped Image" /&gt;
      &lt;br/&gt;
      &lt;br /&gt;
  
      &lt;button @click="cropImage" v-if="imgSrc != ''" style="margin-right: 40px;"&gt;Crop&lt;/button&gt;
      &lt;button @click="rotate" v-if="imgSrc != ''"&gt;Rotate&lt;/button&gt;
    &lt;/div&gt;
  
  &lt;/template&gt;
  
  &lt;script&gt;
    import VueCropper from 'vue-cropperjs';
    export default {
      components: {
        VueCropper,
      },
      data() {
        return {
          imgSrc: '',
          cropImg: '',
        };
      },
      methods: {
        setImage(e) {
          const file = e.target.files[0];
          if (!file.type.includes('image/')) {
            alert('Please select an image file');
            return;
          }
          if (typeof FileReader === 'function') {
            const reader = new FileReader();
            reader.onload = (event) =&gt; {
              this.imgSrc = event.target.result;
              // rebuild cropperjs with the updated source
              this.$refs.cropper.replace(event.target.result);
            };
            reader.readAsDataURL(file);
          } else {
            alert('Sorry, FileReader API not supported');
          }
        },
        cropImage() {
          // get image data for post processing, e.g. upload or setting image src
          this.cropImg = this.$refs.cropper.getCroppedCanvas().toDataURL();
        },
        rotate() {
          // guess what this does :)
          this.$refs.cropper.rotate(90);
        },
      },
    };
  &lt;/script&gt;
  </code></pre>
  
  <p>Nothing mentioned on: </p>
  
  <p><a href="https://github.com/Agontuk/vue-cropperjs" rel="nofollow noreferrer">https://github.com/Agontuk/vue-cropperjs</a>..</p>
  
  <p>I need to set aspect ratio to 1:1;</p>
  
  <p>Any help?</p>
  
  <p>Thanks</p>