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.

overlay.vue 2.6KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114
  1. <template>
  2. <div class="cropper">
  3. <PageHeader>
  4. <h2 class="title">
  5. <span class="icon"><font-awesome-icon icon="magic" /></span>
  6. <span>Overlay tool.</span>
  7. </h2>
  8. <h3 class="subtitle">
  9. Select the area you want to be cropped, nudified and then restored to the original photo.
  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. data: () => ({
  32. cropper: undefined,
  33. }),
  34. computed: {
  35. tooltip() {
  36. return `This tool preserves the original dimensions of the photo.<br><br>
  37. Commands:<br>
  38. - Increase or decrease the zoom with the mouse wheel.<br>
  39. - Click and drag somewhere in the photo to create the crop box.<br>
  40. - You can move the crop box by dragging it.<br>
  41. - You can increase or decrease the size of the cropbox by dragging any of the anchor points in the corners.<br><br>
  42. <strong>Warning:</strong> This tool can dramatically decrease the quality of some photos.`
  43. },
  44. photo() {
  45. return this.$parent.photo
  46. },
  47. },
  48. mounted() {
  49. this.create()
  50. tutorial.cropper()
  51. },
  52. methods: {
  53. /**
  54. *
  55. */
  56. async create() {
  57. const Cropper = require('cropperjs')
  58. const canvas = this.$refs.cropCanvas
  59. this.cropper = new Cropper(canvas, {
  60. viewMode: 1,
  61. aspectRatio: 1,
  62. wheelZoomRatio: 0.05,
  63. ready: () => {
  64. const { cropper } = this
  65. this.photo.geometry.crop = cropper.getData()
  66. this.photo.geometry.image = cropper.getImageData()
  67. cropper.setCropBoxData(this.photo.geometry.cropBox)
  68. canvas.addEventListener('crop', () => {
  69. this.photo.geometry.cropBox = cropper.getCropBoxData()
  70. this.photo.geometry.crop = cropper.getData()
  71. })
  72. },
  73. })
  74. this.reload()
  75. },
  76. /**
  77. *
  78. */
  79. async reload() {
  80. await this.photo.syncEditor()
  81. this.cropper.replace(this.photo.inputFile.path)
  82. },
  83. },
  84. }
  85. </script>
  86. <style lang="scss" scoped>
  87. .cropper {
  88. @apply flex flex-col h-full;
  89. }
  90. .cropper__crop {
  91. @apply flex-1 h-full;
  92. }
  93. </style>