appscms-tools-theme 2.2.1 → 2.2.4

data/assets/js/frame.js

@@ -1,237 +1,245 @@
-const getScript = document.currentScript
-const pageTool = getScript.dataset.tool
-const lang = getScript.dataset.lang
-const inputBox = document.querySelector('#Inputbox')
-const fileDropBox = document.querySelector('.custom-box')
-const cropModal = document.querySelector('.crop-image-modal-container')
-const workspace = document.getElementById('workspace')
-const canvasPanel = document.getElementById('canvas-panel')
-const download = document.querySelector('#download-button')
-const form = document.querySelector('#effect-form')
-let files = []
-let cropWidth = null
-let cropHeight = null
-let cropper = null
-let cropInputWidth = null
-let index = 0
-let cropInputHeight = null
-let image = null
-const showLoader = () => {
-  showLoading()
-}
-const closeLoader = () => {}
-const clickInput = (e) => {
-  console.log(`#file-${e.dataset.index}`)
-  document.querySelector(`#file-${e.dataset.index}`).click()
-}
-let featureData = null
-
-fetch('/assets/js/photo-effects.json')
-  .then((response) => response.json())
-  .then((data) => {
-    featureData = data.find((i) => i.name === form.dataset.featureName)
-    console.log(featureData)
-  })
-const fileOnChange = (e) => {
-  index = Number(e.dataset.index)
-  let reader = new FileReader()
-  reader.onload = (event) => {
-    cropModal.style.display = 'flex'
-    if (cropper === null) {
-      cropImage(event.target.result, e.id)
-    } else {
-      updateCropper(event.target.result, e.id)
-    }
-  }
-  reader.readAsDataURL(e.files[0])
-}
-const closeModal = () => {
-  cropModal.style.display = 'none'
-}
-form.addEventListener('submit', (e) => {
-  e.preventDefault()
-  drawImage()
-})
-const drawInputImage = (ctx, item, indexValue, canvas, image) => {
-  console.log(ctx)
-  return new Promise((resolve, reject) => {
-    let image = document.createElement('img')
-    image.src = files[indexValue]
-    image.onload = () => {
-      image.width = Number(item.width)
-      image.height = Number(item.height)
-      if (item.filter) {
-        ctx.filter = item.filter
-      }
-      ctx.drawImage(
-        image,
-        Number(item.x),
-        Number(item.y),
-        image.width,
-        image.height
-      )
-
-      if (item.rotate) {
-        drawRotated(item.rotate, ctx, canvas, image)
-      }
-      resolve()
-    }
-  })
-}
-const drawRotated = (degrees, ctx, canvas, image) => {
-  console.log(image)
-  ctx.clearRect(0, 0, canvas.width, canvas.height)
-
-  // save the unrotatedctx of the canvas so we can restore it later
-  // the alternative is to untranslate & unrotate after drawing
-  ctx.save()
-
-  // move to the center of the canvas
-  // ctx.translate(canvas.width / 2, canvas.height / 2)
-
-  // rotate the canvas to the specified degrees
-  ctx.rotate((degrees * Math.PI) / 180)
-
-  // draw the image
-  // since thectx is rotated, the image will be rotated also
-  ctx.drawImage(image, -image.width / 2, -image.width / 2)
-
-  // we’re done with the rotating so restore the unrotatedctx
-  ctx.restore()
-}
-const drawImage = () => {
-  let img = new Image()
-  img.src = featureData.effectImagePath
-  var canvas = document.createElement('canvas')
-  var ctx = canvas.getContext('2d')
-  img.onload = () => {
-    canvas.width = img.width
-    canvas.height = img.height
-    Promise.all(
-      featureData.elements.map((item, indexValue) => {
-        if (item.type === 'image') {
-          return new Promise((resolve, reject) => {
-            drawInputImage(ctx, item, indexValue, canvas).then(() => {
-              resolve()
-            })
-          })
-        }
-      })
-    ).then(() => {
-      ctx.filter = 'none'
-      ctx.drawImage(img, 0, 0, canvas.width, canvas.height)
-      featureData.elements.map((item, indexValue) => {
-        if (item.type === 'text') {
-          let myFont = new FontFace(item.font, `url(${item.fontPath})`)
-          myFont.load().then(function (font) {
-            document.fonts.add(font)
-            ctx.font = `${item.fontSize}px ${item.font}`
-            if (item.shadowColor) {
-              ctx.shadowColor = `${item.shadowColor}`
-            }
-            if (item.rotate) {
-              ctx.rotate((item.rotate * Math.PI) / 180)
-            }
-            if (item.shadowOffsetX) {
-              ctx.shadowOffsetX = 3
-            }
-            if (item.shadowOffsetY) {
-              ctx.shadowOffsetY = 3
-            }
-            if (item.shadowBlur) {
-              ctx.shadowBlur = 2
-            }
-            ctx.fillStyle = `${item.color}`
-            ctx.fillText(
-              document.querySelector(`#${item.id}`).value,
-              item.x,
-              item.y
-            )
-          })
-        }
-        if (item.type === 'rectangle') {
-        }
-      })
-      canvasPanel.innerHTML = ''
-      canvasPanel.appendChild(canvas)
-      workspace.style.display = 'block'
-    })
-  }
-}
-const cropImage = (result, id) => {
-  let image = new Image()
-  image.onload = () => {
-    let img = document.createElement('img')
-    img.src = result
-    img.id = 'image'
-    document.querySelector('.crop-image-modal-body').appendChild(img)
-    cropper = new Cropper(img, {
-      viewMode: 3,
-      ready() {
-        console.log(id)
-        let find = featureData.elements.find((i) => i.id === id)
-        console.log(find)
-        cropper.setAspectRatio(Number(find.width) / Number(find.height))
-        cropModal.style.display = 'flex'
-        this.cropper.crop()
-      },
-      crop(event) {
-        cropWidth = Math.round(event.detail.width)
-        cropHeight = Math.round(event.detail.height)
-      },
-    })
-  }
-  image.src = result
-}
-const updateCropper = (result, id) => {
-  cropper.destroy()
-  document.querySelector('.crop-image-modal-body').innerHTML = ''
-  cropImage(result, id)
-}
-document.querySelector('#crop').addEventListener('click', () => {
-  let cropperImg = cropper
-    .getCroppedCanvas({
-      width: cropWidth,
-      height: cropHeight,
-    })
-    .toDataURL()
-  files[index - 1] = cropperImg
-  cropModal.style.display = 'none'
-})
-let inputFile = ''
-const handleFile = (file) => {
-  cropModal.style.display = 'flex'
-  document.querySelector('#file-loader').style.display = 'flex'
-  document.querySelector('.file-input').style.display = 'none'
-  inputFile = file
-  if (file) {
-    const reader = new FileReader()
-    reader.onload = (e) => {
-      if (e.target.result) {
-        cropImage(e.target.result)
-      }
-    }
-    reader.readAsDataURL(file)
-  }
-}
-const showLoading = () => {
-  document.querySelector('#file-loader').style.display = 'flex'
-  document.querySelector('.file-input').style.display = 'none'
-}
-const stopLoading = () => {
-  fileDropBox.style.display = 'none'
-}
-download.addEventListener('click', () => {
-  let canvas = document.querySelector('canvas')
-  let url = canvas.toDataURL(`image/png`)
-  let a = document.createElement('a')
-  a.href = url
-  a.download = `safeimagekit-border-image.${inputFile.type.split('/')[1]}`
-  document.body.appendChild(a)
-  a.click()
-  if (lang === 'en') {
-    window.location.href = `/download?tool=${pageTool}`
-  } else {
-    window.location.href = `/${lang}/download?tool=${pageTool}`
-  }
-})
+const getScript = document.currentScript
+const pageTool = getScript.dataset.tool
+const lang = getScript.dataset.lang
+const inputBox = document.querySelector('#Inputbox')
+const fileDropBox = document.querySelector('.custom-box')
+const cropModal = document.querySelector('.crop-image-modal-container')
+const workspace = document.getElementById('workspace')
+const canvasPanel = document.getElementById('canvas-panel')
+const download = document.querySelector('#download-button')
+const form = document.querySelector('#effect-form')
+let files = []
+let cropWidth = null
+let cropHeight = null
+let cropper = null
+let cropInputWidth = null
+let index = 0
+let cropInputHeight = null
+let image = null
+const showLoader = () => {
+  showLoading()
+}
+const closeLoader = () => {}
+const clickInput = (e) => {
+  console.log(`#file-${e.dataset.index}`)
+  document.querySelector(`#file-${e.dataset.index}`).click()
+}
+let featureData = null
+
+fetch('/assets/js/photo-effects.json')
+  .then((response) => response.json())
+  .then((data) => {
+    featureData = data.find((i) => i.name === form.dataset.featureName)
+    console.log(featureData)
+  })
+const fileOnChange = (e) => {
+  index = Number(e.dataset.index)
+  let reader = new FileReader()
+  reader.onload = (event) => {
+    cropModal.style.display = 'flex'
+    if (cropper === null) {
+      cropImage(event.target.result, e.id)
+    } else {
+      updateCropper(event.target.result, e.id)
+    }
+  }
+  reader.readAsDataURL(e.files[0])
+}
+const closeModal = () => {
+  cropModal.style.display = 'none'
+}
+form.addEventListener('submit', (e) => {
+  e.preventDefault()
+  drawImage()
+})
+const drawInputImage = (ctx, item, indexValue, canvas, image) => {
+  return new Promise((resolve, reject) => {
+    let image = document.createElement('img')
+    image.src = files[indexValue]
+    image.onload = () => {
+      image.width = Number(item.width)
+      image.height = Number(item.height)
+      if (item.filter) {
+        ctx.filter = item.filter
+      }
+      ctx.drawImage(
+        image,
+        Number(item.x),
+        Number(item.y),
+        image.width,
+        image.height
+      )
+      if (item.rotate) {
+        drawRotated(item.rotate, ctx, canvas, image, item)
+      }
+      resolve()
+    }
+  })
+}
+
+const drawRotated = (degrees, ctx, canvas, image, item) => {
+  console.log(image)
+  ctx.clearRect(0, 0, canvas.width, canvas.height)
+
+  // save the unrotatedctx of the canvas so we can restore it later
+  // the alternative is to untranslate & unrotate after drawing
+  ctx.save()
+
+  // move to the center of the canvas
+  ctx.translate(item.x, item.y)
+
+  // rotate the canvas to the specified degrees
+  ctx.rotate((degrees * Math.PI) / 180)
+
+  // draw the image
+  // since thectx is rotated, the image will be rotated also
+  ctx.drawImage(image, -image.width / 2, -image.width / 2)
+
+  // we’re done with the rotating so restore the unrotatedctx
+  ctx.restore()
+}
+const drawImage = () => {
+  let img = new Image()
+  img.src = featureData.effectImagePath
+  var canvas = document.createElement('canvas')
+  var ctx = canvas.getContext('2d')
+  img.onload = () => {
+    canvas.width = img.width
+    canvas.height = img.height
+    Promise.all(
+      featureData.elements.map((item, indexValue) => {
+        if (item.type === 'image') {
+          return new Promise((resolve, reject) => {
+            drawInputImage(ctx, item, indexValue, canvas).then(() => {
+              resolve()
+            })
+          })
+        }
+      })
+    ).then(() => {
+      ctx.filter = 'none'
+      ctx.drawImage(img, 0, 0, canvas.width, canvas.height)
+      featureData.elements.map((item, indexValue) => {
+        if (item.type === 'text') {
+          let myFont = new FontFace(item.font, `url(${item.fontPath})`)
+          myFont.load().then(function (font) {
+            document.fonts.add(font)
+            ctx.font = `${item.fontSize}px ${item.font}`
+            if (item.shadowColor) {
+              ctx.shadowColor = `${item.shadowColor}`
+            }
+            if (item.shadowOffsetX) {
+              ctx.shadowOffsetX = 3
+            }
+            if (item.shadowOffsetY) {
+              ctx.shadowOffsetY = 3
+            }
+            if (item.shadowBlur) {
+              ctx.shadowBlur = 2
+            }
+            ctx.rotate(-Math.PI / 2)
+            ctx.textAlign = 'center'
+            ctx.fillStyle = `${item.color}`
+            ctx.fillText(
+              document.querySelector(`#${item.id}`).value,
+              item.x,
+              item.y
+            )
+          })
+        }
+        if (item.type === 'rectangle') {
+        }
+      })
+      canvasPanel.innerHTML = ''
+      canvasPanel.appendChild(canvas)
+      workspace.style.display = 'block'
+    })
+  }
+}
+const cropImage = (result, id) => {
+  let image = new Image()
+  image.onload = () => {
+    let img = document.createElement('img')
+    img.src = result
+    img.id = 'image'
+    document.querySelector('.crop-image-modal-body').appendChild(img)
+    cropper = new Cropper(img, {
+      viewMode: 3,
+      ready() {
+        console.log(id)
+        let find = featureData.elements.find((i) => i.id === id)
+        console.log(find)
+        cropper.setAspectRatio(Number(find.width) / Number(find.height))
+        cropModal.style.display = 'flex'
+        this.cropper.crop()
+      },
+      crop(event) {
+        cropWidth = Math.round(event.detail.width)
+        cropHeight = Math.round(event.detail.height)
+      },
+    })
+  }
+  image.src = result
+}
+const updateCropper = (result, id) => {
+  cropper.destroy()
+  document.querySelector('.crop-image-modal-body').innerHTML = ''
+  cropImage(result, id)
+}
+document.querySelector('#crop').addEventListener('click', () => {
+  let cropperImg = cropper
+    .getCroppedCanvas({
+      width: cropWidth,
+      height: cropHeight,
+    })
+    .toDataURL()
+  files[index - 1] = cropperImg
+  cropModal.style.display = 'none'
+})
+let inputFile = ''
+const handleFile = (file) => {
+  cropModal.style.display = 'flex'
+  document.querySelector('#file-loader').style.display = 'flex'
+  document.querySelector('.file-input').style.display = 'none'
+  inputFile = file
+  if (file) {
+    const reader = new FileReader()
+    reader.onload = (e) => {
+      if (e.target.result) {
+        cropImage(e.target.result)
+      }
+    }
+    reader.readAsDataURL(file)
+  }
+}
+const showLoading = () => {
+  document.querySelector('#file-loader').style.display = 'flex'
+  document.querySelector('.file-input').style.display = 'none'
+}
+const stopLoading = () => {
+  fileDropBox.style.display = 'none'
+}
+download.addEventListener('click', () => {
+  let canvas = document.querySelector('canvas')
+  let url = canvas.toDataURL(`image/png`)
+  let a = document.createElement('a')
+  a.href = url
+  a.download = `safeimagekit-border-image.${inputFile.type.split('/')[1]}`
+  document.body.appendChild(a)
+  a.click()
+  if (lang === 'en') {
+    window.location.href = `/download?tool=${pageTool}`
+  } else {
+    window.location.href = `/${lang}/download?tool=${pageTool}`
+  }
+})
+
+//
+// fonts
+// font rotation
+// font position
+// font transform
+
+//images
+//image rotation
+// image rectangle with text

data/assets/js/photo-effects.json

@@ -19,8 +19,8 @@
                 "type": "text",
                 "x": "100",
                 "y": "100",
-                "rotate": 10,
                 "color": "red",
+                "rotate": 40,
                 "fontFamily": "Calligraphy",
                 "fontPath": "/assets/fonts/Calligraphy.ttf",
                 "fontWeight": "bold",
@@ -31,7 +31,6 @@
                 "imagePath": "",
                 "filter": "grayscale(100%)",
                 "perspective": "",
-                "rotate": 40,
                 "height": 300,
                 "width": 300,
                 "x": 100,
@@ -39,16 +38,16 @@
                 "id": "file-3"
             },
             {
-                "id": "text-2",
                 "label": "",
+                "id": "text-2",
                 "type": "text",
-                "x": 100,
-                "y": 100,
+                "x": "200",
+                "y": "200",
                 "color": "red",
                 "fontFamily": "Calligraphy",
                 "fontPath": "/assets/fonts/Calligraphy.ttf",
                 "fontWeight": "bold",
-                "fontSize": 0
+                "fontSize": 50
             }
         ]
     }

data/assets/js/testing-batch.js

@@ -0,0 +1,28 @@
+const opacity = document.querySelector("#opacity")
+const batchConversion = async (file, indexValue) => {
+    return new Promise((resolve, reject) => {
+        if (file) {
+            const reader = new FileReader()
+            reader.readAsDataURL(file)
+            reader.onload = (e) => {
+                if (e.target.result) {
+                    let image = new Image()
+                    let canvas = document.createElement('canvas')
+                    canvas.setAttribute('id', 'canvas-img')
+                    let ctx = canvas.getContext('2d')
+                    image.onload = () => {
+                        canvas.width = image.width
+                        canvas.height = image.height
+                        ctx.globalAlpha = opacity.value
+                        ctx.drawImage(image, 0, 0, canvas.width, canvas.height)
+                        resolve([indexValue, canvas.toDataURL('image/png'), "image"])
+                    }
+                    image.src = e.target.result
+                }
+            }
+        }
+    })
+}
+
+
+

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: appscms-tools-theme
 version: !ruby/object:Gem::Version
-  version: 2.2.1
+  version: 2.2.4
 platform: ruby
 authors:
 - vivek-appscms
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2022-08-13 00:00:00.000000000 Z
+date: 2022-08-23 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: jekyll
@@ -2359,6 +2359,7 @@ files:
 - _data/disclaimer/en/disclaimer.json
 - _data/download/en/download.json
 - _data/feature/en/allele-frequency.json
+- _data/feature/en/batch-conversion.json
 - _data/feature/en/compress-pdf.json
 - _data/feature/en/split-pdf.json
 - _data/feature/en/theframe.json
@@ -2388,6 +2389,7 @@ files:
 - _includes/alternates/alternates.html
 - _includes/author_bio.html
 - _includes/authors/authors.html
+- _includes/batch-conversion.html
 - _includes/cssfile/links.html
 - _includes/custom-head.html
 - _includes/customblog/recentposts.html
@@ -2421,6 +2423,7 @@ files:
 - _includes/share/socialshare.html
 - _includes/staticfooter.html
 - _layouts/aboutUs.html
+- _layouts/batch.html
 - _layouts/blog.html
 - _layouts/calculator.html
 - _layouts/categories.html
@@ -2444,6 +2447,7 @@ files:
 - assets/cloud.svg
 - assets/cross.svg
 - assets/css/adblocker.css
+- assets/css/batch.css
 - assets/css/blog.css
 - assets/css/bootstrap.min.css
 - assets/css/calculators.css
@@ -2573,9 +2577,15 @@ files:
 - assets/images/Nikita.webp
 - assets/images/abp.svg
 - assets/images/adblock.svg
+- assets/images/add-image.png
+- assets/images/add.png
 - assets/images/alka.webp
 - assets/images/avatar.png
 - assets/images/balark.jpeg
+- assets/images/cloud-computing.png
+- assets/images/convert.png
+- assets/images/download.png
+- assets/images/file.png
 - assets/images/fileformat.webp
 - assets/images/gallary.png
 - assets/images/keshav.webp
@@ -2583,19 +2593,27 @@ files:
 - assets/images/logo.png
 - assets/images/paavan.webp
 - assets/images/rating.png
+- assets/images/safeimagekit. (2).png
+- assets/images/safeimagekit. (3).png
+- assets/images/safeimagekit..png
+- assets/images/safeimagekit.png
 - assets/images/safevideoconverter.svg
 - assets/images/siddhika.jpeg
 - assets/images/sona.jpeg
+- assets/images/spinner.gif
 - assets/images/together_forever.png
+- assets/images/trust.svg
 - assets/images/udit.jpeg
 - assets/images/udit.jpg
 - assets/images/udit.png
 - assets/images/uo.svg
+- assets/images/vectorpaint.svg
 - assets/instagram.svg
 - assets/js/TopScroll.js
 - assets/js/adBlocker.js
 - assets/js/ads.js
 - assets/js/append-div.js
+- assets/js/batch.js
 - assets/js/featureResult.js
 - assets/js/frame.js
 - assets/js/googledrive.js
@@ -2604,6 +2622,7 @@ files:
 - assets/js/multiselect.js
 - assets/js/photo-effects.json
 - assets/js/redirectResult.js
+- assets/js/testing-batch.js
 - assets/js/theme.js
 - assets/linkdin.svg
 - assets/noserverupload.svg