appscms-tools-theme 2.9.5 → 2.9.6

Sign up to get free protection for your applications and to get access to all the features.
Files changed (161) hide show
  1. checksums.yaml +4 -4
  2. data/LICENSE.txt +21 -21
  3. data/README.md +50 -50
  4. data/_data/about/en/about.json +16 -16
  5. data/_data/blog/alertbar.yml +3 -3
  6. data/_data/blog/authors.yml +11 -11
  7. data/_data/blog/blog.yml +4 -4
  8. data/_data/blog/nav.json +13 -13
  9. data/_data/blog/share.yml +28 -28
  10. data/_data/calculators/en/biology-calc/bulb-spacing.json +78 -78
  11. data/_data/calculators/en/biology-calc/cat-chocolate-toxicity.json +52 -52
  12. data/_data/calculators/en/chemistry-calc/activation-energy.json +44 -44
  13. data/_data/calculators/en/finance-calc/401k.json +122 -122
  14. data/_data/contact/en/contact.json +38 -38
  15. data/_data/disclaimer/en/disclaimer.json +37 -37
  16. data/_data/download/en/download.json +35 -35
  17. data/_data/feature/en/3_shop_posters.json +351 -351
  18. data/_data/feature/en/allele-frequency.json +246 -246
  19. data/_data/feature/en/batch-conversion.json +77 -77
  20. data/_data/feature/en/compress-pdf.json +202 -202
  21. data/_data/feature/en/face-detection.json +52 -52
  22. data/_data/feature/en/split-pdf.json +115 -115
  23. data/_data/feature/en/theframe.json +56 -56
  24. data/_data/feature/hi/compress-pdf.json +81 -81
  25. data/_data/feature/tr/compress-pdf.json +80 -80
  26. data/_data/filecomparison/en/filecomparison.json +38 -38
  27. data/_data/fileinfo/en/fileinfo.json +15 -15
  28. data/_data/footer/en/data.json +164 -164
  29. data/_data/footer/hi/data.json +68 -68
  30. data/_data/footer/networksites.json +15 -15
  31. data/_data/header/en/data.json +173 -173
  32. data/_data/header/hi/data.json +144 -144
  33. data/_data/home/en/en.json +285 -285
  34. data/_data/home/en/photoeffects.json +23 -23
  35. data/_data/home/en/posters.json +323 -323
  36. data/_data/home/hi/hi.json +86 -86
  37. data/_data/home-1/en/en.json +229 -229
  38. data/_data/languagesupport/compress-pdf-langs.json +11 -11
  39. data/_data/languagesupport/index-langs.json +13 -13
  40. data/_data/photo-categories.json +104 -104
  41. data/_data/photoeffects.json +31 -31
  42. data/_data/privacy/en/privacyPolicy.json +265 -265
  43. data/_data/termAndCondition/en/termAndCondition.json +358 -358
  44. data/_includes/Rating/rating.html +92 -92
  45. data/_includes/Rating/structureddata.html +53 -53
  46. data/_includes/Usp/usp.html +95 -95
  47. data/_includes/adblocker.html +135 -135
  48. data/_includes/adsense/adsense.html +7 -7
  49. data/_includes/alternates/alternates.html +45 -45
  50. data/_includes/author_bio.html +16 -16
  51. data/_includes/authors/authors.html +67 -67
  52. data/_includes/batch-conversion.html +65 -65
  53. data/_includes/cssfile/links.html +11 -11
  54. data/_includes/custom-head.html +136 -136
  55. data/_includes/customblog/recentposts.html +67 -67
  56. data/_includes/customblog/relatedposts.html +203 -203
  57. data/_includes/disqus_comments.html +10 -10
  58. data/_includes/dropdown/langdropdown.html +22 -22
  59. data/_includes/feature.html +37 -37
  60. data/_includes/fileformat/Tabularcompariosn.html +158 -158
  61. data/_includes/fileformat/comparisonfiles.html +151 -151
  62. data/_includes/fileformat/fileformatdetail.html +101 -101
  63. data/_includes/fileformat/fileinfoformat.html +93 -93
  64. data/_includes/footer/index.html +534 -534
  65. data/_includes/google-analytics.html +22 -22
  66. data/_includes/head/index.html +235 -235
  67. data/_includes/header/blogHeader.html +34 -34
  68. data/_includes/header/index.html +188 -188
  69. data/_includes/languages/languages.html +60 -60
  70. data/_includes/monumetric/ads.html +57 -57
  71. data/_includes/monumetric/monumetric.html +57 -57
  72. data/_includes/monumetric/profitablecpmgate.html +51 -51
  73. data/_includes/nofiletransfer/nofiletransfer.html +38 -38
  74. data/_includes/paginationBlogPage.html +71 -71
  75. data/_includes/paginationPostPage.html +14 -14
  76. data/_includes/postauthorbio.html +17 -17
  77. data/_includes/postbox.html +31 -31
  78. data/_includes/script.html +58 -58
  79. data/_includes/section/alertbar.html +11 -11
  80. data/_includes/section/count.html +36 -36
  81. data/_includes/section/recent_posts.html +65 -65
  82. data/_includes/section/related_categories_post.html +198 -198
  83. data/_includes/share/socialshare.html +20 -20
  84. data/_includes/staticfooter.html +67 -67
  85. data/_layouts/aboutUs.html +34 -34
  86. data/_layouts/batch.html +102 -102
  87. data/_layouts/blog-1.html +83 -83
  88. data/_layouts/blog.html +94 -94
  89. data/_layouts/calculator.html +89 -89
  90. data/_layouts/categories.html +33 -33
  91. data/_layouts/contactUs.html +124 -124
  92. data/_layouts/default.html +1 -1
  93. data/_layouts/disclaimer.html +123 -123
  94. data/_layouts/download.html +299 -299
  95. data/_layouts/feature-1.html +320 -320
  96. data/_layouts/feature-download.html +308 -308
  97. data/_layouts/feature.html +258 -258
  98. data/_layouts/featureResultPage.html +65 -65
  99. data/_layouts/fileInfo.html +39 -39
  100. data/_layouts/filecomparison.html +85 -85
  101. data/_layouts/frame.html +222 -434
  102. data/_layouts/help.html +23 -23
  103. data/_layouts/home-1.html +229 -229
  104. data/_layouts/home.html +249 -249
  105. data/_layouts/homeResultPage.html +31 -31
  106. data/_layouts/imagekit.html +125 -125
  107. data/_layouts/page.html +5 -5
  108. data/_layouts/photo-effects-home.html +191 -193
  109. data/_layouts/post.html +177 -177
  110. data/_layouts/privacyPolicy.html +637 -637
  111. data/_layouts/termAndCondition.html +646 -646
  112. data/assets/cross.svg +4 -4
  113. data/assets/css/adblocker.css +187 -187
  114. data/assets/css/batch.css +437 -437
  115. data/assets/css/blog-1.css +65 -65
  116. data/assets/css/blog.css +491 -491
  117. data/assets/css/bootstrap.min.css +6 -6
  118. data/assets/css/calculators.css +47 -47
  119. data/assets/css/common.css +550 -550
  120. data/assets/css/feature-1.css +290 -290
  121. data/assets/css/filecomparison.css +25 -25
  122. data/assets/css/frame.css +780 -780
  123. data/assets/css/home-1.css +187 -187
  124. data/assets/css/imagekit.css +840 -840
  125. data/assets/css/tools.css +1278 -1278
  126. data/assets/facebook.svg +4 -4
  127. data/assets/images/abp.svg +41 -41
  128. data/assets/images/adblock.svg +266 -266
  129. data/assets/images/addimg.svg +2 -2
  130. data/assets/images/convert.svg +8 -8
  131. data/assets/images/safevideoconverter.svg +23 -23
  132. data/assets/images/uo.svg +41 -41
  133. data/assets/images/vectorpaint.svg +5 -5
  134. data/assets/instagram.svg +4 -4
  135. data/assets/js/TopScroll.js +8 -8
  136. data/assets/js/adBlocker.js +44 -44
  137. data/assets/js/ads.js +8 -8
  138. data/assets/js/append-div.js +10 -10
  139. data/assets/js/batch.js +229 -229
  140. data/assets/js/calculator-tooltip.js +3 -3
  141. data/assets/js/face-api.js +38064 -38064
  142. data/assets/js/face-detection.js +303 -303
  143. data/assets/js/featureResult.js +48 -48
  144. data/assets/js/frame.js +263 -263
  145. data/assets/js/googledrive.js +155 -155
  146. data/assets/js/homeResult.js +36 -36
  147. data/assets/js/manifest.json +16 -16
  148. data/assets/js/multiselect.js +157 -157
  149. data/assets/js/perspective.min.js +182 -182
  150. data/assets/js/photo-effects.json +84 -84
  151. data/assets/js/redirectResult.js +9 -9
  152. data/assets/js/testing-batch.js +39 -39
  153. data/assets/js/theme.js +44 -44
  154. data/assets/linkdin.svg +4 -4
  155. data/assets/noserverupload.svg +4 -4
  156. data/assets/pdf.svg +20 -20
  157. data/assets/secure.svg +43 -43
  158. data/assets/star.svg +4 -4
  159. data/assets/twitter.svg +4 -4
  160. data/assets/youtube.svg +4 -4
  161. metadata +7 -7
@@ -1,48 +1,48 @@
1
- let script = document.currentScript;
2
- const params = new URLSearchParams(window.location.search);
3
- let type = params.get("fileName");
4
- let jsonFileName = atob(type);
5
- let folderName = script.dataset.foldername;
6
- let fileName = jsonFileName;
7
- let lang = script.dataset.lang;
8
- let headingDiv = document.querySelector("#heading-div");
9
- let feature_h1 = document.createElement("h1");
10
- let feature_h2 = document.createElement("h2");
11
- feature_h1.setAttribute("class", "feature-h1");
12
- feature_h2.setAttribute("class", "feature-h2");
13
- headingDiv.appendChild(feature_h1);
14
- headingDiv.appendChild(feature_h2);
15
-
16
- let feature_img = document.querySelector(".features-img");
17
-
18
- const getSeodata = async () => {
19
- let URL = "/data" + "/" + folderName + "/" + lang + "/" + fileName + ".json";
20
- const data = await fetch(URL);
21
- const seoData = await data.json();
22
-
23
- feature_h1.innerHTML = seoData.H1;
24
- feature_h2.innerHTML = seoData.H2;
25
-
26
- document.head
27
- .querySelector('meta[property="og:title"]')
28
- .setAttribute("content", seoData.TITLE);
29
- document.head
30
- .querySelector('meta[name="description"]')
31
- .setAttribute("content", seoData.META);
32
- document.head
33
- .querySelector('meta[name="twitter:title"]')
34
- .setAttribute("content", seoData.TITLE);
35
- document.head
36
- .querySelector('meta[name="twitter:description"]')
37
- .setAttribute("content", seoData.META);
38
-
39
- if (seoData.img) {
40
- feature_img.src = seoData.img;
41
- feature_img.setAttribute("alt", seoData.imgalt);
42
- feature_img.style.width = seoData.imgwidth;
43
- feature_img.style.height = seoData.imgheight;
44
- }
45
-
46
- document.title = seoData.TITLE;
47
- };
48
- getSeodata();
1
+ let script = document.currentScript;
2
+ const params = new URLSearchParams(window.location.search);
3
+ let type = params.get("fileName");
4
+ let jsonFileName = atob(type);
5
+ let folderName = script.dataset.foldername;
6
+ let fileName = jsonFileName;
7
+ let lang = script.dataset.lang;
8
+ let headingDiv = document.querySelector("#heading-div");
9
+ let feature_h1 = document.createElement("h1");
10
+ let feature_h2 = document.createElement("h2");
11
+ feature_h1.setAttribute("class", "feature-h1");
12
+ feature_h2.setAttribute("class", "feature-h2");
13
+ headingDiv.appendChild(feature_h1);
14
+ headingDiv.appendChild(feature_h2);
15
+
16
+ let feature_img = document.querySelector(".features-img");
17
+
18
+ const getSeodata = async () => {
19
+ let URL = "/data" + "/" + folderName + "/" + lang + "/" + fileName + ".json";
20
+ const data = await fetch(URL);
21
+ const seoData = await data.json();
22
+
23
+ feature_h1.innerHTML = seoData.H1;
24
+ feature_h2.innerHTML = seoData.H2;
25
+
26
+ document.head
27
+ .querySelector('meta[property="og:title"]')
28
+ .setAttribute("content", seoData.TITLE);
29
+ document.head
30
+ .querySelector('meta[name="description"]')
31
+ .setAttribute("content", seoData.META);
32
+ document.head
33
+ .querySelector('meta[name="twitter:title"]')
34
+ .setAttribute("content", seoData.TITLE);
35
+ document.head
36
+ .querySelector('meta[name="twitter:description"]')
37
+ .setAttribute("content", seoData.META);
38
+
39
+ if (seoData.img) {
40
+ feature_img.src = seoData.img;
41
+ feature_img.setAttribute("alt", seoData.imgalt);
42
+ feature_img.style.width = seoData.imgwidth;
43
+ feature_img.style.height = seoData.imgheight;
44
+ }
45
+
46
+ document.title = seoData.TITLE;
47
+ };
48
+ getSeodata();
data/assets/js/frame.js CHANGED
@@ -1,264 +1,264 @@
1
- ---
2
- ---
3
-
4
- const getScript = document.currentScript
5
- const pageTool = getScript.dataset.tool
6
- const downloadName = "{{site.downloadName}}"
7
- const lang = getScript.dataset.lang
8
- const inputBox = document.querySelector('#Inputbox')
9
- const fileDropBox = document.querySelector('.custom-box')
10
- const cropModal = document.querySelector('.crop-image-modal-container')
11
- const exampleModal = document.querySelector('.example-images-modal-container')
12
- const workspace = document.getElementById('workspace')
13
- const canvasPanel = document.getElementById('canvas-panel')
14
- const download = document.querySelector('#download-button')
15
- const form = document.querySelector('#effect-form')
16
- let files = []
17
- let cropWidth = null
18
- let cropHeight = null
19
- let cropper = null
20
- let cropInputWidth = null
21
- let index = 0
22
- let cropInputHeight = null
23
- let image = null
24
- const showLoader = () => {
25
- showLoading()
26
- }
27
- const closeLoader = () => { }
28
- const clickInput = (e) => {
29
- console.log(`#file-${e.dataset.index}`)
30
- document.querySelector(`#file-${e.dataset.index}`).click()
31
- }
32
- let featureData = null
33
- fetch('/assets/js/photo-effects.json')
34
- .then((response) => response.json())
35
- .then((data) => {
36
- featureData = data.find((i) => i.name === form.dataset.featureName)
37
- console.log(featureData)
38
- })
39
- const fileOnChange = (e) => {
40
- index = Number(e.dataset.index)
41
- let reader = new FileReader()
42
- reader.onload = (event) => {
43
- cropModal.style.display = 'flex'
44
- if (cropper === null) {
45
- cropImage(event.target.result, e.id)
46
- } else {
47
- updateCropper(event.target.result, e.id)
48
- }
49
- }
50
- reader.readAsDataURL(e.files[0])
51
- }
52
- const closeModal = () => {
53
- cropModal.style.display = 'none'
54
- document.body.style.overflow = "auto"
55
- }
56
- const closeExamplesModal = () => {
57
- exampleModal.style.display = 'none'
58
- }
59
- form.addEventListener('submit', (e) => {
60
- e.preventDefault()
61
- drawImage()
62
- })
63
- const drawInputImage = (ctx, item, indexValue) => {
64
- return new Promise((resolve, reject) => {
65
- let image = document.createElement('img')
66
- image.src = files[indexValue]
67
- image.onload = () => {
68
- ctx.save()
69
- image.width = Number(item.width)
70
- image.height = Number(item.height)
71
- if (item.filter) {
72
- ctx.filter = item.filter
73
- }
74
- if (item.rotate) {
75
- ctx.rotate((item.rotate * Math.PI) / 180)
76
- }
77
- let perspectiveKey = 'perspective' in item
78
- if (!perspectiveKey) {
79
- ctx.drawImage(
80
- image,
81
- Number(item.x),
82
- Number(item.y),
83
- image.width,
84
- image.height
85
- )
86
- }
87
- if (item.translate) {
88
- ctx.translate(item.translate.x, item.translate.y)
89
- }
90
- if (perspectiveKey) {
91
- let p = new Perspective(ctx, image)
92
- p.draw([
93
- [item.perspective.topLeft.x, item.perspective.topLeft.y],
94
- [item.perspective.topRight.x, item.perspective.topRight.y],
95
- [item.perspective.bottomRight.x, item.perspective.bottomRight.y],
96
- [item.perspective.bottomLeft.x, item.perspective.bottomLeft.y],
97
- ])
98
- }
99
- if (item.skew) {
100
- ctx.setTransform(1, item.skew.x, item.skew.y, 1, 0, 0)
101
- }
102
- ctx.restore()
103
- resolve()
104
- }
105
- })
106
- }
107
- const drawImage = () => {
108
- workspace.style.display = 'block'
109
- document.querySelector('#upper-panel').style.display = 'none'
110
- document.querySelector('#saving-data').style.display = 'flex'
111
- let img = new Image()
112
- img.src = featureData.effectImagePath
113
- var canvas = document.createElement('canvas')
114
- var ctx = canvas.getContext('2d')
115
- img.onload = () => {
116
- canvas.width = img.width
117
- canvas.height = img.height
118
- Promise.all(
119
- featureData.elements.map((item, indexValue) => {
120
- if (item.type === 'image') {
121
- return new Promise((resolve, reject) => {
122
- drawInputImage(ctx, item, indexValue, canvas).then(() => {
123
- resolve()
124
- })
125
- })
126
- }
127
- })
128
- ).then(() => {
129
- ctx.filter = 'none'
130
- ctx.drawImage(img, 0, 0, canvas.width, canvas.height)
131
- featureData.elements.map((item, indexValue) => {
132
- if (item.type === 'text') {
133
- let myFont = new FontFace(item.font, `url(${item.fontPath})`)
134
- myFont.load().then(function (font) {
135
- ctx.save()
136
- document.fonts.add(font)
137
- let textValue = document.querySelector(`#${item.id}`).value
138
- if (textValue.length > 10 && item.fontSizeOption1) {
139
- item.fontSize = item.fontSizeOption1
140
- }
141
- if (textValue.length > 12 && item.fontSizeOption2) {
142
- item.fontSize = item.fontSizeOption2
143
- }
144
- if (textValue.length > 15 && item.fontSizeOption3) {
145
- item.fontSize = item.fontSizeOption3
146
- }
147
- if (textValue.length > 20 && item.fontSizeOption4) {
148
- item.fontSize = item.fontSizeOption4
149
- }
150
- ctx.font = `${item.fontSize}px ${item.font}`
151
- if (item.shadowColor) {
152
- ctx.shadowColor = `${item.shadowColor}`
153
- }
154
- if (item.shadowOffsetX) {
155
- ctx.shadowOffsetX = 3
156
- }
157
- if (item.shadowOffsetY) {
158
- ctx.shadowOffsetY = 3
159
- }
160
- if (item.shadowBlur) {
161
- ctx.shadowBlur = 2
162
- }
163
- if (item.rotate) {
164
- ctx.rotate((item.rotate * Math.PI) / 180)
165
- }
166
- ctx.textAlign = 'center'
167
- ctx.fillStyle = `${item.color}`
168
- ctx.fillText(textValue, item.x, item.y)
169
- ctx.restore()
170
- })
171
- }
172
- if (item.type === 'rectangle') {
173
- }
174
- })
175
- canvasPanel.innerHTML = ''
176
- document.querySelector('#saving-data').style.display = 'none'
177
- canvasPanel.appendChild(canvas)
178
- })
179
- }
180
- }
181
- const cropImage = (result, id) => {
182
- document.body.style.overflow = "hidden"
183
- let image = new Image()
184
- image.onload = () => {
185
- let img = document.createElement('img')
186
- img.src = result
187
- img.id = 'image'
188
- document.querySelector('.crop-image-modal-body').appendChild(img)
189
- cropper = new Cropper(img, {
190
- viewMode: 3,
191
- ready() {
192
- let find = featureData.elements.find((i) => i.id === id)
193
- console.log(find)
194
- cropper.setAspectRatio(Number(find.width) / Number(find.height))
195
- cropModal.style.display = 'flex'
196
- this.cropper.crop()
197
- },
198
- crop(event) {
199
- cropWidth = Math.round(event.detail.width)
200
- cropHeight = Math.round(event.detail.height)
201
- },
202
- })
203
- }
204
- image.src = result
205
- }
206
- const updateCropper = (result, id) => {
207
- cropper.destroy()
208
- document.querySelector('.crop-image-modal-body').innerHTML = ''
209
- cropImage(result, id)
210
- }
211
- document.querySelector('#crop').addEventListener('click', () => {
212
- let cropperImg = cropper
213
- .getCroppedCanvas({
214
- width: cropWidth,
215
- height: cropHeight,
216
- })
217
- .toDataURL()
218
- files[index - 1] = cropperImg
219
- document.querySelector(`#image-pre-${index}`).src = cropperImg
220
- document.querySelector(`#image-pre-${index}`).style.display = 'block'
221
- document.querySelector(`#cam-${index}`).style.display = 'none'
222
- cropModal.style.display = 'none'
223
- document.body.style.overflow = "auto"
224
- })
225
- const openExamplesModal = () => {
226
- exampleModal.style.display = 'flex'
227
- }
228
- let inputFile = ''
229
- const handleFile = (file) => {
230
- cropModal.style.display = 'flex'
231
- document.querySelector('#file-loader').style.display = 'flex'
232
- document.querySelector('.file-input').style.display = 'none'
233
- inputFile = file
234
- if (file) {
235
- const reader = new FileReader()
236
- reader.onload = (e) => {
237
- if (e.target.result) {
238
- cropImage(e.target.result)
239
- }
240
- }
241
- reader.readAsDataURL(file)
242
- }
243
- }
244
- const showLoading = () => {
245
- document.querySelector('#file-loader').style.display = 'flex'
246
- document.querySelector('.file-input').style.display = 'none'
247
- }
248
- const stopLoading = () => {
249
- fileDropBox.style.display = 'none'
250
- }
251
- download.addEventListener('click', () => {
252
- let canvas = document.querySelector('canvas')
253
- let url = canvas.toDataURL(`image/png`)
254
- let a = document.createElement('a')
255
- a.href = url
256
- a.download = `${downloadName}-image.png`
257
- document.body.appendChild(a)
258
- a.click()
259
- if (lang === 'en') {
260
- window.location.href = `/download?tool=${pageTool}`
261
- } else {
262
- window.location.href = `/${lang}/download?tool=${pageTool}`
263
- }
1
+ ---
2
+ ---
3
+
4
+ const getScript = document.currentScript
5
+ const pageTool = getScript.dataset.tool
6
+ const downloadName = "{{site.downloadName}}"
7
+ const lang = getScript.dataset.lang
8
+ const inputBox = document.querySelector('#Inputbox')
9
+ const fileDropBox = document.querySelector('.custom-box')
10
+ const cropModal = document.querySelector('.crop-image-modal-container')
11
+ const exampleModal = document.querySelector('.example-images-modal-container')
12
+ const workspace = document.getElementById('workspace')
13
+ const canvasPanel = document.getElementById('canvas-panel')
14
+ const download = document.querySelector('#download-button')
15
+ const form = document.querySelector('#effect-form')
16
+ let files = []
17
+ let cropWidth = null
18
+ let cropHeight = null
19
+ let cropper = null
20
+ let cropInputWidth = null
21
+ let index = 0
22
+ let cropInputHeight = null
23
+ let image = null
24
+ const showLoader = () => {
25
+ showLoading()
26
+ }
27
+ const closeLoader = () => { }
28
+ const clickInput = (e) => {
29
+ console.log(`#file-${e.dataset.index}`)
30
+ document.querySelector(`#file-${e.dataset.index}`).click()
31
+ }
32
+ let featureData = null
33
+ fetch('/assets/js/photo-effects.json')
34
+ .then((response) => response.json())
35
+ .then((data) => {
36
+ featureData = data.find((i) => i.name === form.dataset.featureName)
37
+ console.log(featureData)
38
+ })
39
+ const fileOnChange = (e) => {
40
+ index = Number(e.dataset.index)
41
+ let reader = new FileReader()
42
+ reader.onload = (event) => {
43
+ cropModal.style.display = 'flex'
44
+ if (cropper === null) {
45
+ cropImage(event.target.result, e.id)
46
+ } else {
47
+ updateCropper(event.target.result, e.id)
48
+ }
49
+ }
50
+ reader.readAsDataURL(e.files[0])
51
+ }
52
+ const closeModal = () => {
53
+ cropModal.style.display = 'none'
54
+ document.body.style.overflow = "auto"
55
+ }
56
+ const closeExamplesModal = () => {
57
+ exampleModal.style.display = 'none'
58
+ }
59
+ form.addEventListener('submit', (e) => {
60
+ e.preventDefault()
61
+ drawImage()
62
+ })
63
+ const drawInputImage = (ctx, item, indexValue) => {
64
+ return new Promise((resolve, reject) => {
65
+ let image = document.createElement('img')
66
+ image.src = files[indexValue]
67
+ image.onload = () => {
68
+ ctx.save()
69
+ image.width = Number(item.width)
70
+ image.height = Number(item.height)
71
+ if (item.filter) {
72
+ ctx.filter = item.filter
73
+ }
74
+ if (item.rotate) {
75
+ ctx.rotate((item.rotate * Math.PI) / 180)
76
+ }
77
+ let perspectiveKey = 'perspective' in item
78
+ if (!perspectiveKey) {
79
+ ctx.drawImage(
80
+ image,
81
+ Number(item.x),
82
+ Number(item.y),
83
+ image.width,
84
+ image.height
85
+ )
86
+ }
87
+ if (item.translate) {
88
+ ctx.translate(item.translate.x, item.translate.y)
89
+ }
90
+ if (perspectiveKey) {
91
+ let p = new Perspective(ctx, image)
92
+ p.draw([
93
+ [item.perspective.topLeft.x, item.perspective.topLeft.y],
94
+ [item.perspective.topRight.x, item.perspective.topRight.y],
95
+ [item.perspective.bottomRight.x, item.perspective.bottomRight.y],
96
+ [item.perspective.bottomLeft.x, item.perspective.bottomLeft.y],
97
+ ])
98
+ }
99
+ if (item.skew) {
100
+ ctx.setTransform(1, item.skew.x, item.skew.y, 1, 0, 0)
101
+ }
102
+ ctx.restore()
103
+ resolve()
104
+ }
105
+ })
106
+ }
107
+ const drawImage = () => {
108
+ workspace.style.display = 'block'
109
+ document.querySelector('#upper-panel').style.display = 'none'
110
+ document.querySelector('#saving-data').style.display = 'flex'
111
+ let img = new Image()
112
+ img.src = featureData.effectImagePath
113
+ var canvas = document.createElement('canvas')
114
+ var ctx = canvas.getContext('2d')
115
+ img.onload = () => {
116
+ canvas.width = img.width
117
+ canvas.height = img.height
118
+ Promise.all(
119
+ featureData.elements.map((item, indexValue) => {
120
+ if (item.type === 'image') {
121
+ return new Promise((resolve, reject) => {
122
+ drawInputImage(ctx, item, indexValue, canvas).then(() => {
123
+ resolve()
124
+ })
125
+ })
126
+ }
127
+ })
128
+ ).then(() => {
129
+ ctx.filter = 'none'
130
+ ctx.drawImage(img, 0, 0, canvas.width, canvas.height)
131
+ featureData.elements.map((item, indexValue) => {
132
+ if (item.type === 'text') {
133
+ let myFont = new FontFace(item.font, `url(${item.fontPath})`)
134
+ myFont.load().then(function (font) {
135
+ ctx.save()
136
+ document.fonts.add(font)
137
+ let textValue = document.querySelector(`#${item.id}`).value
138
+ if (textValue.length > 10 && item.fontSizeOption1) {
139
+ item.fontSize = item.fontSizeOption1
140
+ }
141
+ if (textValue.length > 12 && item.fontSizeOption2) {
142
+ item.fontSize = item.fontSizeOption2
143
+ }
144
+ if (textValue.length > 15 && item.fontSizeOption3) {
145
+ item.fontSize = item.fontSizeOption3
146
+ }
147
+ if (textValue.length > 20 && item.fontSizeOption4) {
148
+ item.fontSize = item.fontSizeOption4
149
+ }
150
+ ctx.font = `${item.fontSize}px ${item.font}`
151
+ if (item.shadowColor) {
152
+ ctx.shadowColor = `${item.shadowColor}`
153
+ }
154
+ if (item.shadowOffsetX) {
155
+ ctx.shadowOffsetX = 3
156
+ }
157
+ if (item.shadowOffsetY) {
158
+ ctx.shadowOffsetY = 3
159
+ }
160
+ if (item.shadowBlur) {
161
+ ctx.shadowBlur = 2
162
+ }
163
+ if (item.rotate) {
164
+ ctx.rotate((item.rotate * Math.PI) / 180)
165
+ }
166
+ ctx.textAlign = 'center'
167
+ ctx.fillStyle = `${item.color}`
168
+ ctx.fillText(textValue, item.x, item.y)
169
+ ctx.restore()
170
+ })
171
+ }
172
+ if (item.type === 'rectangle') {
173
+ }
174
+ })
175
+ canvasPanel.innerHTML = ''
176
+ document.querySelector('#saving-data').style.display = 'none'
177
+ canvasPanel.appendChild(canvas)
178
+ })
179
+ }
180
+ }
181
+ const cropImage = (result, id) => {
182
+ document.body.style.overflow = "hidden"
183
+ let image = new Image()
184
+ image.onload = () => {
185
+ let img = document.createElement('img')
186
+ img.src = result
187
+ img.id = 'image'
188
+ document.querySelector('.crop-image-modal-body').appendChild(img)
189
+ cropper = new Cropper(img, {
190
+ viewMode: 3,
191
+ ready() {
192
+ let find = featureData.elements.find((i) => i.id === id)
193
+ console.log(find)
194
+ cropper.setAspectRatio(Number(find.width) / Number(find.height))
195
+ cropModal.style.display = 'flex'
196
+ this.cropper.crop()
197
+ },
198
+ crop(event) {
199
+ cropWidth = Math.round(event.detail.width)
200
+ cropHeight = Math.round(event.detail.height)
201
+ },
202
+ })
203
+ }
204
+ image.src = result
205
+ }
206
+ const updateCropper = (result, id) => {
207
+ cropper.destroy()
208
+ document.querySelector('.crop-image-modal-body').innerHTML = ''
209
+ cropImage(result, id)
210
+ }
211
+ document.querySelector('#crop').addEventListener('click', () => {
212
+ let cropperImg = cropper
213
+ .getCroppedCanvas({
214
+ width: cropWidth,
215
+ height: cropHeight,
216
+ })
217
+ .toDataURL()
218
+ files[index - 1] = cropperImg
219
+ document.querySelector(`#image-pre-${index}`).src = cropperImg
220
+ document.querySelector(`#image-pre-${index}`).style.display = 'block'
221
+ document.querySelector(`#cam-${index}`).style.display = 'none'
222
+ cropModal.style.display = 'none'
223
+ document.body.style.overflow = "auto"
224
+ })
225
+ const openExamplesModal = () => {
226
+ exampleModal.style.display = 'flex'
227
+ }
228
+ let inputFile = ''
229
+ const handleFile = (file) => {
230
+ cropModal.style.display = 'flex'
231
+ document.querySelector('#file-loader').style.display = 'flex'
232
+ document.querySelector('.file-input').style.display = 'none'
233
+ inputFile = file
234
+ if (file) {
235
+ const reader = new FileReader()
236
+ reader.onload = (e) => {
237
+ if (e.target.result) {
238
+ cropImage(e.target.result)
239
+ }
240
+ }
241
+ reader.readAsDataURL(file)
242
+ }
243
+ }
244
+ const showLoading = () => {
245
+ document.querySelector('#file-loader').style.display = 'flex'
246
+ document.querySelector('.file-input').style.display = 'none'
247
+ }
248
+ const stopLoading = () => {
249
+ fileDropBox.style.display = 'none'
250
+ }
251
+ download.addEventListener('click', () => {
252
+ let canvas = document.querySelector('canvas')
253
+ let url = canvas.toDataURL(`image/png`)
254
+ let a = document.createElement('a')
255
+ a.href = url
256
+ a.download = `${downloadName}-image.png`
257
+ document.body.appendChild(a)
258
+ a.click()
259
+ if (lang === 'en') {
260
+ window.location.href = `/download?tool=${pageTool}`
261
+ } else {
262
+ window.location.href = `/${lang}/download?tool=${pageTool}`
263
+ }
264
264
  })