title: How to change aspect ratio in fengyuanchen / cropper JS (Crop Avatar)
body: <p>Hi I would like to use fengyuanchen / cropper  JS (Crop Avatar) in my system. But i can not change aspect ratio for per page. Because aspect ratio is on main.js file with jquery. </p>
  
  <p>So i would like to determinite apect ratio in index.html </p>
  
  <p>Here is codes </p>
  
  <p>main.js (PS: Aspect Ratio is on line 201.)</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>(function (factory) {
    if (typeof define === 'function' &amp;&amp; define.amd) {
      // AMD. Register as anonymous module.
      define(['jquery'], factory);
    } else if (typeof exports === 'object') {
      // Node / CommonJS
      factory(require('jquery'));
    } else {
      // Browser globals.
      factory(jQuery);
    }
  })(function ($) {
  
    'use strict';
  
    var console = window.console || { log: function () {} };
  
    function CropAvatar($element) {
      this.$container = $element;
  
      this.$avatarView = this.$container.find('.avatar-view');
      this.$avatar = this.$avatarView.find('img');
      this.$avatarModal = this.$container.find('#avatar-modal');
      this.$loading = this.$container.find('.loading');
  
      this.$avatarForm = this.$avatarModal.find('.avatar-form');
      this.$avatarUpload = this.$avatarForm.find('.avatar-upload');
      this.$avatarSrc = this.$avatarForm.find('.avatar-src');
      this.$avatarData = this.$avatarForm.find('.avatar-data');
      this.$avatarInput = this.$avatarForm.find('.avatar-input');
      this.$avatarSave = this.$avatarForm.find('.avatar-save');
      this.$avatarBtns = this.$avatarForm.find('.avatar-btns');
  
      this.$avatarWrapper = this.$avatarModal.find('.avatar-wrapper');
      this.$avatarPreview = this.$avatarModal.find('.avatar-preview');
  
      this.init();
    }
  
    CropAvatar.prototype = {
      constructor: CropAvatar,
  
      support: {
        fileList: !!$('&lt;input type="file"&gt;').prop('files'),
        blobURLs: !!window.URL &amp;&amp; URL.createObjectURL,
        formData: !!window.FormData
      },
  
      init: function () {
        this.support.datauri = this.support.fileList &amp;&amp; this.support.blobURLs;
  
        if (!this.support.formData) {
          this.initIframe();
        }
  
        this.initTooltip();
        this.initModal();
        this.addListener();
      },
  
      addListener: function () {
        this.$avatarView.on('click', $.proxy(this.click, this));
        this.$avatarInput.on('change', $.proxy(this.change, this));
        this.$avatarForm.on('submit', $.proxy(this.submit, this));
        this.$avatarBtns.on('click', $.proxy(this.rotate, this));
      },
  
      initTooltip: function () {
        this.$avatarView.tooltip({
          placement: 'bottom'
        });
      },
  
      initModal: function () {
        this.$avatarModal.modal({
          show: false
        });
      },
  
      initPreview: function () {
        var url = this.$avatar.attr('src');
  
        this.$avatarPreview.html('&lt;img src="' + url + '"&gt;');
      },
  
      initIframe: function () {
        var target = 'upload-iframe-' + (new Date()).getTime();
        var $iframe = $('&lt;iframe&gt;').attr({
              name: target,
              src: ''
            });
        var _this = this;
  
        // Ready ifrmae
        $iframe.one('load', function () {
  
          // respond response
          $iframe.on('load', function () {
            var data;
  
            try {
              data = $(this).contents().find('body').text();
            } catch (e) {
              console.log(e.message);
            }
  
            if (data) {
              try {
                data = $.parseJSON(data);
              } catch (e) {
                console.log(e.message);
              }
  
              _this.submitDone(data);
            } else {
              _this.submitFail('Image upload failed!');
            }
  
            _this.submitEnd();
  
          });
        });
  
        this.$iframe = $iframe;
        this.$avatarForm.attr('target', target).after($iframe.hide());
      },
  
      click: function () {
        this.$avatarModal.modal('show');
        this.initPreview();
      },
  
      change: function () {
        var files;
        var file;
  
        if (this.support.datauri) {
          files = this.$avatarInput.prop('files');
  
          if (files.length &gt; 0) {
            file = files[0];
  
            if (this.isImageFile(file)) {
              if (this.url) {
                URL.revokeObjectURL(this.url); // Revoke the old one
              }
  
              this.url = URL.createObjectURL(file);
              this.startCropper();
            }
          }
        } else {
          file = this.$avatarInput.val();
  
          if (this.isImageFile(file)) {
            this.syncUpload();
          }
        }
      },
  
      submit: function () {
        if (!this.$avatarSrc.val() &amp;&amp; !this.$avatarInput.val()) {
          return false;
        }
  
        if (this.support.formData) {
          this.ajaxUpload();
          return false;
        }
      },
  
      rotate: function (e) {
        var data;
  
        if (this.active) {
          data = $(e.target).data();
  
          if (data.method) {
            this.$img.cropper(data.method, data.option);
          }
        }
      },
  
      isImageFile: function (file) {
        if (file.type) {
          return /^image\/\w+$/.test(file.type);
        } else {
          return /\.(jpg|jpeg|png|gif)$/.test(file);
        }
      },
  
      startCropper: function () {
        var _this = this;
  
        if (this.active) {
          this.$img.cropper('replace', this.url);
        } else {
          this.$img = $('&lt;img src="' + this.url + '"&gt;');
          this.$avatarWrapper.empty().html(this.$img);
          this.$img.cropper({
            aspectRatio: 1,
            preview: this.$avatarPreview.selector,
            crop: function (e) {
              var json = [
                    '{"x":' + e.x,
                    '"y":' + e.y,
                    '"height":' + e.height,
                    '"width":' + e.width,
                    '"rotate":' + e.rotate + '}'
                  ].join();
  
              _this.$avatarData.val(json);
            }
          });
  
          this.active = true;
        }
  
        this.$avatarModal.one('hidden.bs.modal', function () {
          _this.$avatarPreview.empty();
          _this.stopCropper();
        });
      },
  
      stopCropper: function () {
        if (this.active) {
          this.$img.cropper('destroy');
          this.$img.remove();
          this.active = false;
        }
      },
  
      ajaxUpload: function () {
        var url = this.$avatarForm.attr('action');
        var data = new FormData(this.$avatarForm[0]);
        var _this = this;
  
        $.ajax(url, {
          type: 'post',
          data: data,
          dataType: 'json',
          processData: false,
          contentType: false,
  
          beforeSend: function () {
            _this.submitStart();
          },
  
          success: function (data) {
            _this.submitDone(data);
          },
  
          error: function (XMLHttpRequest, textStatus, errorThrown) {
            _this.submitFail(textStatus || errorThrown);
          },
  
          complete: function () {
            _this.submitEnd();
          }
        });
      },
  
      syncUpload: function () {
        this.$avatarSave.click();
      },
  
      submitStart: function () {
        this.$loading.fadeIn();
      },
  
      submitDone: function (data) {
        console.log(data);
  
        if ($.isPlainObject(data) &amp;&amp; data.state === 200) {
          if (data.result) {
            this.url = data.result;
  
            if (this.support.datauri || this.uploaded) {
              this.uploaded = false;
              this.cropDone();
            } else {
              this.uploaded = true;
              this.$avatarSrc.val(this.url);
              this.startCropper();
            }
  
            this.$avatarInput.val('');
          } else if (data.message) {
            this.alert(data.message);
          }
        } else {
          this.alert('Failed to response');
        }
      },
  
      submitFail: function (msg) {
        this.alert(msg);
      },
  
      submitEnd: function () {
        this.$loading.fadeOut();
      },
  
      cropDone: function () {
        this.$avatarForm.get(0).reset();
        this.$avatar.attr('src', this.url);
        this.stopCropper();
        this.$avatarModal.modal('hide');
      },
  
      alert: function (msg) {
        var $alert = [
              '&lt;div class="alert alert-danger avatar-alert alert-dismissable"&gt;',
                '&lt;button type="button" class="close" data-dismiss="alert"&gt;&amp;times;&lt;/button&gt;',
                msg,
              '&lt;/div&gt;'
            ].join('');
  
        this.$avatarUpload.after($alert);
      }
    };
  
    $(function () {
      return new CropAvatar($('#crop-avatar'));
    });
  
  });</code></pre>
  </div>
  </div>
  </p>
  
  <p>This is index.html</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!doctype html&gt;
  &lt;html lang="en"&gt;
  
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;meta http-equiv="x-ua-compatible" content="ie=edge"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
    &lt;meta name="description" content="A complete example of Cropper."&gt;
    &lt;meta name="keywords" content="HTML, CSS, JS, JavaScript, jQuery plugin, image cropping, image crop, image move, image zoom, image rotate, image scale, front-end, frontend, web development"&gt;
    &lt;meta name="author" content="Fengyuan Chen"&gt;
    &lt;title&gt;Cropper&lt;/title&gt;
    &lt;link rel="stylesheet" href="../../assets/css/bootstrap.min.css"&gt;
    &lt;link rel="stylesheet" href="../../dist/cropper.min.css"&gt;
    &lt;link rel="stylesheet" href="css/main.css"&gt;
  
    &lt;!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries --&gt;
    &lt;!--[if lt IE 9]&gt;
      &lt;script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"&gt;&lt;/script&gt;
      &lt;script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"&gt;&lt;/script&gt;
    &lt;![endif]--&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
    &lt;div class="container" id="crop-avatar"&gt;
  
      &lt;!-- Current avatar --&gt;
      &lt;div class="avatar-view" title="Change the avatar"&gt;
        &lt;img src="img/picture.jpg" alt="Avatar"&gt;
      &lt;/div&gt;
  
      &lt;!-- Cropping modal --&gt;
      &lt;div class="modal fade" id="avatar-modal" aria-hidden="true" aria-labelledby="avatar-modal-label" role="dialog" tabindex="-1"&gt;
        &lt;div class="modal-dialog modal-lg"&gt;
          &lt;div class="modal-content"&gt;
            &lt;form class="avatar-form" action="crop.php" enctype="multipart/form-data" method="post"&gt;
              &lt;div class="modal-header"&gt;
                &lt;button type="button" class="close" data-dismiss="modal"&gt;&amp;times;&lt;/button&gt;
                &lt;h4 class="modal-title" id="avatar-modal-label"&gt;Change Avatar&lt;/h4&gt;
              &lt;/div&gt;
              &lt;div class="modal-body"&gt;
                &lt;div class="avatar-body"&gt;
  
                  &lt;!-- Upload image and data --&gt;
                  &lt;div class="avatar-upload"&gt;
                    &lt;input type="hidden" class="avatar-src" name="avatar_src"&gt;
                    &lt;input type="hidden" class="avatar-data" name="avatar_data"&gt;
                    &lt;label for="avatarInput"&gt;Local upload&lt;/label&gt;
                    &lt;input type="file" class="avatar-input" id="avatarInput" name="avatar_file"&gt;
                  &lt;/div&gt;
  
                  &lt;!-- Crop and preview --&gt;
                  &lt;div class="row"&gt;
                    &lt;div class="col-md-9"&gt;
                      &lt;div class="avatar-wrapper"&gt;&lt;/div&gt;
                    &lt;/div&gt;
                    &lt;div class="col-md-3"&gt;
                      &lt;div class="avatar-preview preview-lg"&gt;&lt;/div&gt;
                      &lt;div class="avatar-preview preview-md"&gt;&lt;/div&gt;
                      &lt;div class="avatar-preview preview-sm"&gt;&lt;/div&gt;
                    &lt;/div&gt;
                  &lt;/div&gt;
  
                  &lt;div class="row avatar-btns"&gt;
                    &lt;div class="col-md-9"&gt;
                      &lt;div class="btn-group"&gt;
                        &lt;button type="button" class="btn btn-primary" data-method="rotate" data-option="-90" title="Rotate -90 degrees"&gt;Rotate Left&lt;/button&gt;
                        &lt;button type="button" class="btn btn-primary" data-method="rotate" data-option="-15"&gt;-15deg&lt;/button&gt;
                        &lt;button type="button" class="btn btn-primary" data-method="rotate" data-option="-30"&gt;-30deg&lt;/button&gt;
                        &lt;button type="button" class="btn btn-primary" data-method="rotate" data-option="-45"&gt;-45deg&lt;/button&gt;
                      &lt;/div&gt;
                      &lt;div class="btn-group"&gt;
                        &lt;button type="button" class="btn btn-primary" data-method="rotate" data-option="90" title="Rotate 90 degrees"&gt;Rotate Right&lt;/button&gt;
                        &lt;button type="button" class="btn btn-primary" data-method="rotate" data-option="15"&gt;15deg&lt;/button&gt;
                        &lt;button type="button" class="btn btn-primary" data-method="rotate" data-option="30"&gt;30deg&lt;/button&gt;
                        &lt;button type="button" class="btn btn-primary" data-method="rotate" data-option="45"&gt;45deg&lt;/button&gt;
                      &lt;/div&gt;
                    &lt;/div&gt;
                    &lt;div class="col-md-3"&gt;
                      &lt;button type="submit" class="btn btn-primary btn-block avatar-save"&gt;Done&lt;/button&gt;
                    &lt;/div&gt;
                  &lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
              &lt;!-- &lt;div class="modal-footer"&gt;
                &lt;button type="button" class="btn btn-default" data-dismiss="modal"&gt;Close&lt;/button&gt;
              &lt;/div&gt; --&gt;
            &lt;/form&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
      &lt;!-- /.modal --&gt;
  
      &lt;!-- Loading state --&gt;
      &lt;div class="loading" aria-label="Loading" role="img" tabindex="-1"&gt;&lt;/div&gt;
    &lt;/div&gt;
  
    &lt;script src="../../assets/js/jquery.min.js"&gt;&lt;/script&gt;
    &lt;script src="../../assets/js/bootstrap.min.js"&gt;&lt;/script&gt;
    &lt;script src="../../dist/cropper.min.js"&gt;&lt;/script&gt;
    &lt;script src="js/main.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>