You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

crop.vue 2.5KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111
  1. <template>
  2. <div class="cropper">
  3. <PageHeader>
  4. <h2 class="title">
  5. <span class="icon"><font-awesome-icon icon="crop" /></span>
  6. <span>Crop tool.</span>
  7. </h2>
  8. <h3 class="subtitle">
  9. Manually select the area you want to be cropped and resized.
  10. <AppTip :tooltip="tooltip" />
  11. </h3>
  12. <template v-slot:right>
  13. <button id="cropper-reload"
  14. v-tooltip="'Get recent changes from the editor.'"
  15. class="button"
  16. @click.prevent="reload">
  17. <span class="icon"><font-awesome-icon icon="sync" /></span>
  18. <span>Reload</span>
  19. </button>
  20. </template>
  21. </PageHeader>
  22. <div class="cropper__crop">
  23. <canvas ref="cropCanvas" data-private />
  24. </div>
  25. </div>
  26. </template>
  27. <script>
  28. import { tutorial } from '~/modules'
  29. export default {
  30. layout: 'layout--wide',
  31. computed: {
  32. tooltip() {
  33. return `Commands:<br>
  34. - Increase or decrease the zoom with the mouse wheel.<br>
  35. - Click and drag somewhere in the photo to create the crop box.<br>
  36. - You can move the crop box by dragging it.<br>
  37. - You can increase or decrease the size of the cropbox by dragging any of the anchor points in the corners.<br><br>
  38. <strong>Warning:</strong> This tool can dramatically decrease the quality of some photos.`
  39. },
  40. photo() {
  41. return this.$parent.photo
  42. },
  43. cropper() {
  44. return this.photo.cropper
  45. },
  46. },
  47. mounted() {
  48. this.create()
  49. tutorial.cropper()
  50. },
  51. methods: {
  52. /**
  53. *
  54. */
  55. async create() {
  56. const Cropper = require('cropperjs')
  57. const canvas = this.$refs.cropCanvas
  58. this.photo.cropper = new Cropper(canvas, {
  59. aspectRatio: 1,
  60. wheelZoomRatio: 0.05,
  61. ready: () => {
  62. const { cropper } = this.photo
  63. this.photo.geometry.crop = cropper.getData()
  64. this.photo.geometry.image = cropper.getImageData()
  65. cropper.setCropBoxData(this.photo.geometry.cropBox)
  66. canvas.addEventListener('crop', () => {
  67. this.photo.geometry.cropBox = cropper.getCropBoxData()
  68. this.photo.geometry.crop = cropper.getData()
  69. })
  70. },
  71. })
  72. this.reload()
  73. },
  74. /**
  75. *
  76. */
  77. async reload() {
  78. await this.photo.syncEditor()
  79. this.cropper.replace(this.photo.inputFile.path)
  80. },
  81. },
  82. }
  83. </script>
  84. <style lang="scss" scoped>
  85. .cropper {
  86. @apply flex flex-col h-full;
  87. }
  88. .cropper__crop {
  89. @apply flex-1 h-full;
  90. }
  91. </style>