aboutsummaryrefslogtreecommitdiff
path: root/src/components/image_cropper/image_cropper.vue
blob: 1c52842ca9d818f5f5f98450e6d0dd09bd1469e0 (plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
<template>
  <div class="image-cropper">
    <modal :show="dataUrl" :title="title" @close="destroy">
      <div class="modal-body">
        <div class="image-cropper-image-container">
          <img ref="img" :src="dataUrl" alt="" @load.stop="createCropper" />
        </div>
      </div>
      <div class="modal-footer">
        <button class="btn image-cropper-btn" type="button" @click="submit" v-text="saveButtonLabel"></button>
      </div>
    </modal>
    <input ref="input" type="file" class="image-cropper-img-input" :accept="mimes">
  </div>
</template>

<script src="./image_cropper.js"></script>

<style lang="scss">
.image-cropper {
  &-img-input {
    display: none;
  }

  &-image-container {
    position: relative;

    img {
      display: block;
      max-width: 100%;
    }
  }

  &-btn {
    display: block;
    width: 100%;
  }
}
</style>