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.

padding.vue 3.1KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129
  1. <template>
  2. <div class="cropper">
  3. <PageHeader>
  4. <h2 class="title">
  5. <span class="icon"><font-awesome-icon icon="compress-arrows-alt" /></span>
  6. <span>Color Padding tool.</span>
  7. </h2>
  8. <h3 class="subtitle">
  9. Adjust the photo to the color padding mask.
  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. import PaddingMask from '~/assets/images/masks/1.jpg'
  30. export default {
  31. layout: 'layout--wide',
  32. computed: {
  33. tooltip() {
  34. return `
  35. Make sure that the black and white colors are visible on the sides of the photo, by doing this correctly the algorithm will dramatically decrease the color change that occurs during nudification.<br><br>
  36. Commands:<br>
  37. - Click and drag somewhere in the mask to create the photo.<br>
  38. - You can move the photo by dragging it.<br>
  39. - You can increase or decrease the size of the photo by dragging any of the anchor points in the corners.<br><br>
  40. <strong>Warning:</strong> This tool can dramatically decrease the quality of some photos.`
  41. },
  42. photo() {
  43. return this.$parent.photo
  44. },
  45. cropper() {
  46. return this.photo.cropper
  47. },
  48. },
  49. mounted() {
  50. this.create()
  51. tutorial.cropper()
  52. },
  53. methods: {
  54. /**
  55. *
  56. */
  57. async create() {
  58. const Cropper = require('cropperjs')
  59. const canvas = this.$refs.cropCanvas
  60. this.photo.cropper = new Cropper(canvas, {
  61. viewMode: 1,
  62. initialAspectRatio: 0.9,
  63. autoCropArea: 1,
  64. zoomable: false,
  65. ready: () => {
  66. const { cropper } = this.photo
  67. this.photo.geometry.crop = cropper.getData()
  68. this.photo.geometry.image = cropper.getImageData()
  69. cropper.setCropBoxData(this.photo.geometry.cropBox)
  70. canvas.addEventListener('crop', () => {
  71. this.photo.geometry.cropBox = cropper.getCropBoxData()
  72. this.photo.geometry.crop = cropper.getData()
  73. })
  74. },
  75. })
  76. this.photo.cropper.replace(PaddingMask)
  77. this.reload()
  78. },
  79. /**
  80. *
  81. */
  82. async reload() {
  83. await this.photo.syncEditor()
  84. const root = document.documentElement
  85. root.style.setProperty('--photo-image', `url("${this.photo.inputFile.path}")`)
  86. },
  87. },
  88. }
  89. </script>
  90. <style lang="scss" scoped>
  91. .cropper {
  92. @apply flex flex-col h-full;
  93. &::v-deep {
  94. .cropper-view-box,
  95. .cropper-face {
  96. @apply bg-black bg-no-repeat opacity-100;
  97. background-image: var(--photo-image, url('~assets/images/etc/MvlZgXx.jpg'));
  98. background-size: 100% 100%;
  99. }
  100. }
  101. }
  102. .cropper__crop {
  103. @apply flex-1 h-full;
  104. }
  105. </style>