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.

Preview.vue 1.2KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859
  1. <template>
  2. <figure class="cnudity-preview">
  3. <img :src="nudityPreview" :style="{ 'width': width + 'px', 'height': height + 'px' }">
  4. </figure>
  5. </template>
  6. <script>
  7. export default {
  8. props: {
  9. width: {
  10. type: Number,
  11. default: 312,
  12. },
  13. height: {
  14. type: Number,
  15. default: 312,
  16. },
  17. type: {
  18. type: String,
  19. default: 'output',
  20. },
  21. },
  22. data: () => ({
  23. nudityPreview: undefined,
  24. }),
  25. async created() {
  26. this.nudityPreview = await this.getPreviewDataURL()
  27. },
  28. methods: {
  29. async getPreviewDataURL() {
  30. if (!this.$nudity.hasModelPhoto()) {
  31. // eslint-disable-next-line global-require
  32. return require('~/assets/images/d1hpv9d-e1c2c577-d272-41b0-bd73-a89209108efd.jpg')
  33. }
  34. if (this.type === 'output') {
  35. return this.$nudity.modelPhoto.getOutputFile().readAsDataURL()
  36. }
  37. if (this.type === 'cropped') {
  38. return this.$nudity.modelPhoto.getCroppedFile().readAsDataURL()
  39. }
  40. return this.$nudity.modelPhoto.getSourceFile().readAsDataURL()
  41. },
  42. },
  43. }
  44. </script>
  45. <style lang="scss">
  46. .cnudity-preview {
  47. @apply flex justify-center items-center py-4;
  48. }
  49. </style>