---
title: Image Cropping
---

{{#extend "layout-default"}}
  {{#content "css_vendor" mode="append"}}
    <link rel="stylesheet" href="{{global}}/vendor/cropper/cropper.css">
  {{/content}}

  {{#content "css" mode="prepend"}}
    <link rel="stylesheet" href="{{assets}}/examples/css/forms/image-cropping.css">
  {{/content}}


  {{#content "js_vendor" mode="append"}}
    <script src="{{global}}/vendor/cropper/cropper.min.js"></script>
  {{/content}}


  {{#content "scripts" mode="replace"}}
    <script src="{{assets}}/examples/js/forms/image-cropping.js"></script>
  {{/content}}

  {{#content "body"}}

    <!-- Page -->
    <div class="page">
      <div class="page-header">
        <h1 class="page-title">Image Cropping</h1>
        <ol class="breadcrumb">
          <li class="breadcrumb-item"><a href="{{dest 'index.html'}}">Home</a></li>
          <li class="breadcrumb-item"><a href="javascript:void(0)">Forms</a></li>
          <li class="breadcrumb-item active">Image Cropping</li>
        </ol>
        <div class="page-header-actions">
          <a class="btn btn-sm btn-primary btn-round" href="https://github.com/fengyuanchen/cropper"
            target="_blank">
        <i class="icon md-link" aria-hidden="true"></i>
        <span class="hidden-sm-down">Official Website</span>
      </a>
        </div>
      </div>

      <div class="page-content">
        <!-- Panel Full Demo -->
        <div class="panel">
          <div class="panel-heading">
            <h3 class="panel-title">Full Demo (16 : 9)</h3>
          </div>
          <div class="panel-body container-fluid">
            <div class="row">
              <div class="col-lg-8">
                <div class="cropper text-center" id="exampleFullCropper">
                  <img src="{{global}}/photos/placeholder.png" alt="...">
                </div>
                <div class="cropper-toolbar text-center">
                  <div class="btn-group mb-20">
                    <button type="button" class="btn btn-primary" data-cropper-method="zoom" data-option="0.1"
                      data-toggle="tooltip" data-container="body" title="Zoom In">
                      <span class="cropper-tooltip" title="zoom in">
                        <i class="icon md-zoom-in"></i>
                      </span>
                    </button>
                    <button type="button" class="btn btn-primary" data-cropper-method="zoom" data-option="-0.1"
                      data-toggle="tooltip" data-container="body" title="Zoom Out">
                      <span class="cropper-tooltip" title="zoom out">
                        <i class="icon md-zoom-out"></i>
                      </span>
                    </button>
                    <button type="button" class="btn btn-primary" data-cropper-method="rotate" data-option="-90"
                      data-toggle="tooltip" data-container="body" title="Turn Left">
                      <span class="cropper-tooltip" title="rotate left 90°">
                        <i class="icon md-long-arrow-left cropper-flip-horizontal"></i>
                      </span>
                    </button>
                    <button type="button" class="btn btn-primary" data-cropper-method="rotate" data-option="90"
                      data-toggle="tooltip" data-container="body" title="Turn Right">
                      <span class="cropper-tooltip" title="rotate right 90°">
                        <i class="icon md-long-arrow-right"></i>
                      </span>
                    </button>
                    <button type="button" class="btn btn-primary" data-cropper-method="rotate" data-option="-5"
                      data-toggle="tooltip" data-container="body" title="Rotate Left">
                      <span class="cropper-tooltip" title="rotate left 90°">
                        <i class="icon md-rotate-left cropper-flip-horizontal"></i>
                      </span>
                    </button>
                    <button type="button" class="btn btn-primary" data-cropper-method="rotate" data-option="5"
                      data-toggle="tooltip" data-container="body" title="Rotate Right">
                      <span class="cropper-tooltip" title="rotate right 90°">
                        <i class="icon md-rotate-right" aria-hidden="true"></i>
                      </span>
                    </button>
                  </div>

                  <div class="btn-group mb-20">
                    <button type="button" class="btn btn-primary" data-cropper-method="setDragMode"
                      data-option="move" data-toggle="tooltip" data-container="body"
                      title="Move">
                      <span class="cropper-tooltip" title="move">
                        <i class="icon md-arrows" aria-hidden="true"></i>
                      </span>
                    </button>
                    <button type="button" class="btn btn-primary" data-cropper-method="setDragMode"
                      data-option="crop" data-toggle="tooltip" data-container="body"
                      title="Crop">
                      <span class="cropper-tooltip" title="Crop">
                        <i class="icon md-crop" aria-hidden="true"></i>
                      </span>
                    </button>
                    <button type="button" class="btn btn-primary" data-cropper-method="getCroppedCanvas"
                      data-option='{ "width": 320, "height": 180 }' data-toggle="tooltip"
                      data-container="body" title="Get Image">
                      <span class="cropper-tooltip" title="Get Image">
                        <i class="icon md-image" aria-hidden="true"></i>
                      </span>
                    </button>
                    <button type="button" class="btn btn-primary" data-cropper-method="clear" data-toggle="tooltip"
                      data-container="body" title="Clear">
                      <span class="cropper-tooltip" title="clear">
                        <i class="icon md-close" aria-hidden="true"></i>
                      </span>
                    </button>
                    <label class="btn btn-primary mb-0" data-toggle="tooltip" for="inputImage" data-container="body"
                      title="Upload File">
                      <input type="file" class="hidden-xs-up" id="inputImage" name="file" accept="image/*">
                      <span class="cropper-tooltip" title="Import image with FileReader">
                        <i class="icon md-upload" aria-hidden="true"></i>
                      </span>
                    </label>
                  </div>

                  <!-- Modal -->
                  <div class="modal fade docs-cropped" id="getDataURLModal" aria-hidden="true" aria-labelledby="getDataURLTitle"
                    role="dialog" tabindex="-1">
                    <div class="modal-dialog modal-simple">
                      <div class="modal-content">
                        <div class="modal-header">
                          <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                          <h4 class="modal-title" id="getDataURLTitle">Cropped</h4>
                        </div>
                        <div class="modal-body"></div>
                      </div>
                    </div>
                  </div>
                  <!-- End Modal -->
                </div>
              </div>

              <div class="col-lg-4">
                <div class="cropper-preview clearfix" id="exampleFullCropperPreview">
                  <div class="img-preview preview-lg"></div>
                  <div class="img-preview preview-md"></div>
                  <div class="img-preview preview-sm"></div>
                  <div class="img-preview preview-xs"></div>
                </div>
                <h4>Data:</h4>
                <div class="cropper-data">
                  <div class="input-group mb-15">
                    <label class="input-group-addon" for="inputDataX">X</label>
                    <input type="number" class="form-control" id="inputDataX" name="inputNumbers" placeholder="x">
                    <span class="input-group-addon">px</span>
                  </div>
                  <div class="input-group mb-15">
                    <label class="input-group-addon" for="inputDataY">Y</label>
                    <input type="number" class="form-control" id="inputDataY" name="inputNumbers" placeholder="y">
                    <span class="input-group-addon">px</span>
                  </div>
                  <div class="input-group mb-15">
                    <label class="input-group-addon" for="inputDataWidth">Width</label>
                    <input type="number" class="form-control" id="inputDataWidth" name="inputNumbers"
                      placeholder="width">
                    <span class="input-group-addon">px</span>
                  </div>
                  <div class="input-group mb-15">
                    <label class="input-group-addon" for="inputDataHeight">Height</label>
                    <input type="number" class="form-control" id="inputDataHeight" name="inputNumbers"
                      placeholder="height">
                    <span class="input-group-addon">px</span>
                  </div>
                  <button class="btn btn-primary btn-block" id="setCropperData" type="button">Set Data</button>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- End Panel Full Demo -->

        <!-- Panel Simple Demo -->
        <div class="panel">
          <div class="panel-heading">
            <h3 class="panel-title">Simple Demo</h3>
          </div>
          <div class="panel-body container-fluid">
            <div class="row">
              <div class="col-lg-9">
                <div class="cropper" id="simpleCropper">
                  <img src="{{global}}/photos/placeholder.png" alt="...">
                </div>
              </div>
              <div class="col-lg-3">
                <div class="cropper-preview clearfix" id="simpleCropperPreview">
                  <div class="img-preview preview-lg"></div>
                </div>
              </div>
            </div>
          </div>
        </div>
        <!-- End Panel Simple Demo -->
      </div>
    </div>
    <!-- End Page -->

  {{/content}}
{{/extend}}