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 9.6KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521
  1. <template>
  2. <div class="nudity-crop">
  3. <div class="crop-help">
  4. <section class="box">
  5. <div class="buttons">
  6. <nuxt-link to="/" class="button is-danger">Cancel</nuxt-link>
  7. <button class="button" @click.prevent="togglePreferences">
  8. <span v-if="!isPreferencesVisible">Preferences</span>
  9. <span v-else>Information</span>
  10. </button>
  11. <button class="button is-success" @click.prevent="crop">Nudify!</button>
  12. </div>
  13. </section>
  14. <div v-if="!isPreferencesVisible">
  15. <section class="box">
  16. <p class="box-title">📷 Photo cropping</p>
  17. <p class="help-text">
  18. To be able to generate the dream correctly it is necessary to resize your photo to the size of 512x512
  19. </p>
  20. <p class="help-text">
  21. Use the tool on the right to crop the photo. Try to keep the person in the center and make the body visible.
  22. </p>
  23. <p class="help-text">
  24. 🐭 Move the photo by dragging it with the mouse, you can zoom in or out using the mouse wheel.
  25. </p>
  26. </section>
  27. <section class="box">
  28. <label for="is-cropped">
  29. <input id="is-cropped" v-model="isCropped" type="checkbox" /> My photo is already the size of 512x512, do not crop. <span v-tooltip="'Select this option to ignore the cropping tool on the right and pass the original photo directly to the transformation algorithm.'" class="underline text-sm">?</span>
  30. </label>
  31. </section>
  32. <section class="box">
  33. <p class="box-title">🕵️‍️ How to obtain better results?</p>
  34. <p class="help-text">
  35. <ul>
  36. <li>Only one person should appear in the photo.</li>
  37. <li>The person is standing in a straight position without crossing arms or legs.</li>
  38. <li>The person is looking towards the camera.</li>
  39. <li>The person wears light clothes. (bikini works better)</li>
  40. <li>Try to make the person's belly button and legs visible.</li>
  41. </ul>
  42. </p>
  43. </section>
  44. </div>
  45. <div v-else>
  46. <div class="notification">
  47. These preferences will only be applied to the current photo, you can change the global preferences in <nuxt-link to="/system/settings/preferences">Settings</nuxt-link>.
  48. </div>
  49. <!-- Preferences -->
  50. <settings-preferences v-model="photo.preferences" />
  51. </div>
  52. </div>
  53. <div class="crop-canvas">
  54. <canvas ref="photoCanvas" />
  55. </div>
  56. <div class="cropper"></div>
  57. </div>
  58. </template>
  59. <script>
  60. import Cropper from 'cropperjs'
  61. export default {
  62. middleware: 'nudity',
  63. data: () => ({
  64. // Instance of CropperJS
  65. cropper: undefined,
  66. isCropped: false,
  67. isPreferencesVisible: false
  68. }),
  69. computed: {
  70. photo() {
  71. return this.$nudify.photo
  72. }
  73. },
  74. mounted() {
  75. this.createCropper()
  76. },
  77. methods: {
  78. /**
  79. *
  80. */
  81. async createCropper() {
  82. this.cropper = new Cropper(this.$refs.photoCanvas, {
  83. viewMode: 0,
  84. dragMode: 'move',
  85. cropBoxMovable: false,
  86. cropBoxResizable: false,
  87. toggleDragModeOnDblclick: false,
  88. minCropBoxWidth: 512,
  89. minCropBoxHeight: 512,
  90. maxCropBoxWidth: 512,
  91. maxCropBoxHeight: 512,
  92. aspectRatio: 1,
  93. modal: true,
  94. guides: false,
  95. highlight: false,
  96. autoCropArea: 0.1,
  97. wheelZoomRatio: 0.03
  98. })
  99. const dataURL = await this.photo.getSourceFile().readAsDataURL()
  100. this.cropper.replace(dataURL)
  101. },
  102. /**
  103. *
  104. */
  105. async saveCroppedPhoto() {
  106. /**
  107. * height: 480
  108. left: 0
  109. naturalHeight: 300
  110. naturalWidth: 300
  111. top: 80.5
  112. width: 480
  113. const data = this.cropper.getData()
  114. console.log(data)
  115. */
  116. if (!this.isCropped) {
  117. const canvas = this.cropper.getCroppedCanvas({
  118. width: 512,
  119. height: 512,
  120. minWidth: 512,
  121. minHeight: 512,
  122. maxWidth: 512,
  123. maxHeight: 512,
  124. fillColor: 'white',
  125. imageSmoothingEnabled: true,
  126. imageSmoothingQuality: 'high'
  127. })
  128. await $tools.crop(this.photo, canvas)
  129. } else {
  130. this.photo.croppedFile = this.photo.sourceFile
  131. }
  132. },
  133. /**
  134. *
  135. */
  136. async crop() {
  137. await this.saveCroppedPhoto()
  138. this.$router.push('/nudity/results')
  139. },
  140. /**
  141. *
  142. */
  143. togglePreferences() {
  144. this.isPreferencesVisible = !this.isPreferencesVisible
  145. }
  146. }
  147. }
  148. </script>
  149. <style lang="scss">
  150. .nudity-crop {
  151. @apply flex h-full;
  152. .crop-canvas {
  153. @apply flex-1 h-full;
  154. }
  155. .crop-help {
  156. @apply flex-1 flex flex-col overflow-hidden p-3 overflow-y-auto;
  157. section {
  158. .buttons {
  159. @apply flex justify-center;
  160. .button {
  161. @apply flex-1;
  162. }
  163. }
  164. }
  165. .help-text {
  166. @apply mb-3;
  167. ul {
  168. @apply list-disc ml-5;
  169. }
  170. }
  171. }
  172. }
  173. .crupper {
  174. color: red;
  175. }
  176. .creeper {
  177. color: green;
  178. }
  179. </style>
  180. <style>
  181. /*!
  182. * Cropper.js v1.5.6
  183. * https://fengyuanchen.github.io/cropperjs
  184. *
  185. * Copyright 2015-present Chen Fengyuan
  186. * Released under the MIT license
  187. *
  188. * Date: 2019-10-04T04:33:44.164Z
  189. */
  190. .cropper-container {
  191. direction: ltr;
  192. font-size: 0;
  193. line-height: 0;
  194. position: relative;
  195. -ms-touch-action: none;
  196. touch-action: none;
  197. -webkit-user-select: none;
  198. -moz-user-select: none;
  199. -ms-user-select: none;
  200. user-select: none;
  201. }
  202. .cropper-container img {
  203. display: block;
  204. height: 100%;
  205. image-orientation: 0deg;
  206. max-height: none !important;
  207. max-width: none !important;
  208. min-height: 0 !important;
  209. min-width: 0 !important;
  210. width: 100%;
  211. }
  212. .cropper-wrap-box,
  213. .cropper-canvas,
  214. .cropper-drag-box,
  215. .cropper-crop-box,
  216. .cropper-modal {
  217. bottom: 0;
  218. left: 0;
  219. position: absolute;
  220. right: 0;
  221. top: 0;
  222. }
  223. .cropper-wrap-box,
  224. .cropper-canvas {
  225. overflow: hidden;
  226. }
  227. .cropper-drag-box {
  228. background-color: #fff;
  229. opacity: 0;
  230. }
  231. .cropper-modal {
  232. background-color: #000;
  233. opacity: 0.5;
  234. }
  235. .cropper-view-box {
  236. display: block;
  237. height: 100%;
  238. outline: 1px solid #39f;
  239. outline-color: rgba(51, 153, 255, 0.75);
  240. overflow: hidden;
  241. width: 100%;
  242. }
  243. .cropper-dashed {
  244. border: 0 dashed #eee;
  245. display: block;
  246. opacity: 0.5;
  247. position: absolute;
  248. }
  249. .cropper-dashed.dashed-h {
  250. border-bottom-width: 1px;
  251. border-top-width: 1px;
  252. height: calc(100% / 3);
  253. left: 0;
  254. top: calc(100% / 3);
  255. width: 100%;
  256. }
  257. .cropper-dashed.dashed-v {
  258. border-left-width: 1px;
  259. border-right-width: 1px;
  260. height: 100%;
  261. left: calc(100% / 3);
  262. top: 0;
  263. width: calc(100% / 3);
  264. }
  265. .cropper-center {
  266. display: block;
  267. height: 0;
  268. left: 50%;
  269. opacity: 0.75;
  270. position: absolute;
  271. top: 50%;
  272. width: 0;
  273. }
  274. .cropper-center::before,
  275. .cropper-center::after {
  276. background-color: #eee;
  277. content: ' ';
  278. display: block;
  279. position: absolute;
  280. }
  281. .cropper-center::before {
  282. height: 1px;
  283. left: -3px;
  284. top: 0;
  285. width: 7px;
  286. }
  287. .cropper-center::after {
  288. height: 7px;
  289. left: 0;
  290. top: -3px;
  291. width: 1px;
  292. }
  293. .cropper-face,
  294. .cropper-line,
  295. .cropper-point {
  296. display: block;
  297. height: 100%;
  298. opacity: 0.1;
  299. position: absolute;
  300. width: 100%;
  301. }
  302. .cropper-face {
  303. background-color: #fff;
  304. left: 0;
  305. top: 0;
  306. }
  307. .cropper-line {
  308. background-color: #39f;
  309. }
  310. .cropper-line.line-e {
  311. cursor: ew-resize;
  312. right: -3px;
  313. top: 0;
  314. width: 5px;
  315. }
  316. .cropper-line.line-n {
  317. cursor: ns-resize;
  318. height: 5px;
  319. left: 0;
  320. top: -3px;
  321. }
  322. .cropper-line.line-w {
  323. cursor: ew-resize;
  324. left: -3px;
  325. top: 0;
  326. width: 5px;
  327. }
  328. .cropper-line.line-s {
  329. bottom: -3px;
  330. cursor: ns-resize;
  331. height: 5px;
  332. left: 0;
  333. }
  334. .cropper-point {
  335. background-color: #39f;
  336. height: 5px;
  337. opacity: 0.75;
  338. width: 5px;
  339. }
  340. .cropper-point.point-e {
  341. cursor: ew-resize;
  342. margin-top: -3px;
  343. right: -3px;
  344. top: 50%;
  345. }
  346. .cropper-point.point-n {
  347. cursor: ns-resize;
  348. left: 50%;
  349. margin-left: -3px;
  350. top: -3px;
  351. }
  352. .cropper-point.point-w {
  353. cursor: ew-resize;
  354. left: -3px;
  355. margin-top: -3px;
  356. top: 50%;
  357. }
  358. .cropper-point.point-s {
  359. bottom: -3px;
  360. cursor: s-resize;
  361. left: 50%;
  362. margin-left: -3px;
  363. }
  364. .cropper-point.point-ne {
  365. cursor: nesw-resize;
  366. right: -3px;
  367. top: -3px;
  368. }
  369. .cropper-point.point-nw {
  370. cursor: nwse-resize;
  371. left: -3px;
  372. top: -3px;
  373. }
  374. .cropper-point.point-sw {
  375. bottom: -3px;
  376. cursor: nesw-resize;
  377. left: -3px;
  378. }
  379. .cropper-point.point-se {
  380. bottom: -3px;
  381. cursor: nwse-resize;
  382. height: 20px;
  383. opacity: 1;
  384. right: -3px;
  385. width: 20px;
  386. }
  387. @media (min-width: 768px) {
  388. .cropper-point.point-se {
  389. height: 15px;
  390. width: 15px;
  391. }
  392. }
  393. @media (min-width: 992px) {
  394. .cropper-point.point-se {
  395. height: 10px;
  396. width: 10px;
  397. }
  398. }
  399. @media (min-width: 1200px) {
  400. .cropper-point.point-se {
  401. height: 5px;
  402. opacity: 0.75;
  403. width: 5px;
  404. }
  405. }
  406. .cropper-point.point-se::before {
  407. background-color: #39f;
  408. bottom: -50%;
  409. content: ' ';
  410. display: block;
  411. height: 200%;
  412. opacity: 0;
  413. position: absolute;
  414. right: -50%;
  415. width: 200%;
  416. }
  417. .cropper-invisible {
  418. opacity: 0;
  419. }
  420. .cropper-bg {
  421. background-image: url('data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQAQMAAAAlPW0iAAAAA3NCSVQICAjb4U/gAAAABlBMVEXMzMz////TjRV2AAAACXBIWXMAAArrAAAK6wGCiw1aAAAAHHRFWHRTb2Z0d2FyZQBBZG9iZSBGaXJld29ya3MgQ1M26LyyjAAAABFJREFUCJlj+M/AgBVhF/0PAH6/D/HkDxOGAAAAAElFTkSuQmCC');
  422. }
  423. .cropper-hide {
  424. display: block;
  425. height: 0;
  426. position: absolute;
  427. width: 0;
  428. }
  429. .cropper-hidden {
  430. display: none !important;
  431. }
  432. .cropper-move {
  433. cursor: move;
  434. }
  435. .cropper-crop {
  436. cursor: crosshair;
  437. }
  438. .cropper-disabled .cropper-drag-box,
  439. .cropper-disabled .cropper-face,
  440. .cropper-disabled .cropper-line,
  441. .cropper-disabled .cropper-point {
  442. cursor: not-allowed;
  443. }
  444. </style>