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.

editor.vue 1.5KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071
  1. <template>
  2. <div class="nudify-editor">
  3. <div v-if="photo.scaleMode === 'cropjs' || photo.scaleMode === 'overlay'" class="notification notification--warning">
  4. <span class="icon"><font-awesome-icon icon="exclamation-triangle" /></span>
  5. <span>The changes you make here will not be reflected in the final result until you click on the <strong>Reload</strong> button of the Crop/Overlay tool.</span>
  6. </div>
  7. <div ref="imageEditor"
  8. class="editor"
  9. data-private />
  10. </div>
  11. </template>
  12. <script>
  13. import { tutorial } from '~/modules'
  14. export default {
  15. layout: 'layout--wide',
  16. computed: {
  17. photo() {
  18. return this.$parent.photo
  19. },
  20. },
  21. mounted() {
  22. this.create()
  23. tutorial.editor()
  24. },
  25. methods: {
  26. /**
  27. *
  28. */
  29. async create() {
  30. const ImageEditor = require('tui-image-editor')
  31. const { blackTheme } = require('~/modules/editor.theme')
  32. this.photo.editor = new ImageEditor(this.$refs.imageEditor, {
  33. includeUI: {
  34. loadImage: {
  35. path: this.photo.file.path,
  36. name: this.photo.file.name,
  37. },
  38. theme: blackTheme,
  39. initMenu: 'draw',
  40. menu: ['draw', 'shape', 'flip', 'rotate', 'filter', 'mask'],
  41. menuBarPosition: 'left',
  42. },
  43. usageStatistics: false,
  44. })
  45. },
  46. },
  47. }
  48. </script>
  49. <style lang="scss" scoped>
  50. .nudify-editor {
  51. @apply h-full flex flex-col;
  52. }
  53. .editor {
  54. @apply w-full flex-1;
  55. }
  56. </style>
  57. <style lang="scss">
  58. .tui-image-editor-control {
  59. @apply bg-dark-600;
  60. }
  61. </style>