appscms-tools-theme 2.2.0 → 2.2.3

data/assets/js/frame.js

@@ -1,228 +1,251 @@
-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.readAsDataURL(e.files[0])
-  reader.onload = (event) => {
-    if (cropper === null) {
-      cropImage(event.target.result, e.id)
-    } else {
-      updateCropper(event.target.result, e.id)
-    }
-  }
-}
-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)
-      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.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.fontWeight} ${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.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}`
+            }
+            console.log(item)
+            console.log((item.rotate * Math.PI) / 180)
+            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.textAlign = 'center'
+            ctx.fillStyle = `${item.color}`
+            ctx.save()
+            ctx.fillText(
+              document.querySelector(`#${item.id}`).value,
+              item.x,
+              item.y
+            )
+            ctx.restore()
+          })
+        }
+        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

@@ -1,56 +1,56 @@
-[
-    {
-        "name": "together_forever",
-        "effectImagePath": "/assets/images/together_forever.png",
-        "elements": [
-            {
-                "type": "image",
-                "imagePath": "",
-                "filter": "",
-                "perspective": "",
-                "rotate": 45,
-                "height": 300,
-                "width": 300,
-                "x": 200,
-                "y": 200,
-                "id": "file-1"
-            },
-            {
-                "label": "",
-                "id": "text-1",
-                "type": "text",
-                "x": "100",
-                "y": "100",
-                "color": "red",
-                "fontFamily": "Calligraphy",
-                "fontPath": "/assets/fonts/Calligraphy.ttf",
-                "fontWeight": "bold",
-                "fontSize": 50
-            },
-            {
-                "type": "image",
-                "imagePath": "",
-                "filter": "",
-                "perspective": "",
-                "rotate": "",
-                "height": 300,
-                "width": 300,
-                "x": 100,
-                "y": 200,
-                "id": "file-3"
-            },
-            {
-                "id": "text-2",
-                "label": "",
-                "type": "text",
-                "x": 100,
-                "y": 100,
-                "color": "red",
-                "fontFamily": "Calligraphy",
-                "fontPath": "/assets/fonts/Calligraphy.ttf",
-                "fontWeight": "bold",
-                "fontSize": 50
-            }
-        ]
-    }
+[
+    {
+        "name": "together_forever",
+        "effectImagePath": "/assets/images/together_forever.png",
+        "elements": [
+            {
+                "type": "image",
+                "filter": "",
+                "perspective": "",
+                "height": 300,
+                "width": 300,
+                "x": 200,
+                "y": 200,
+                "id": "file-1"
+            },
+            {
+                "label": "",
+                "id": "text-1",
+                "type": "text",
+                "x": "100",
+                "rotate": 0,
+                "y": "100",
+                "color": "red",
+                "fontFamily": "Calligraphy",
+                "fontPath": "/assets/fonts/Calligraphy.ttf",
+                "fontWeight": "bold",
+                "fontSize": 50
+            },
+            {
+                "type": "image",
+                "imagePath": "",
+                "filter": "grayscale(100%)",
+                "perspective": "",
+                "rotate": 40,
+                "height": 300,
+                "width": 300,
+                "x": 100,
+                "y": 200,
+                "id": "file-3"
+            },
+            {
+                "label": "",
+                "id": "text-2",
+                "type": "text",
+                "x": "200",
+                "y": "200",
+                "rotate": 40,
+                "color": "red",
+                "fontFamily": "Calligraphy",
+                "fontPath": "/assets/fonts/Calligraphy.ttf",
+                "fontWeight": "bold",
+                "fontSize": 50
+            }
+        ]
+    }
 ]

data/assets/js/testing-batch.js

@@ -0,0 +1,36 @@
+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
+                        // counter.innerHTML = e.target.value + "%"
+                        let filters = document.querySelector('#applyFilter')
+                        if (filters.getAttribute('data-filter') === "opacity") {
+                            ctx.globalAlpha = filters.value
+                            ctx.drawImage(image, 0, 0, canvas.width, canvas.height)
+                            resolve([indexValue, canvas.toDataURL('image/png'), "image"])
+                        } else {
+                            ctx.filter = filters.getAttribute('data-filter') + '(' + filters.value + filters.getAttribute('data-scale') + ') '
+                            ctx.drawImage(image, 0, 0, canvas.width, canvas.height)
+                            resolve([indexValue, canvas.toDataURL('image/png'), "image"])
+                        }
+
+                    }
+                    image.src = e.target.result
+                }
+            }
+        }
+    })
+}
+
+
+

data/assets/js/theme.js

@@ -1,11 +1,11 @@
-$(document).ready(function () {
-  var safuiAlert = $('#safeui-alert')
-  if (safuiAlert) {
-    safuiAlert
-      .first()
-      .delay(10000)
-      .slideUp(1000, function () {
-        $(this).remove()
-      })
-  }
-})
+$(document).ready(function () {
+  var safuiAlert = $('#safeui-alert')
+  if (safuiAlert) {
+    safuiAlert
+      .first()
+      .delay(10000)
+      .slideUp(1000, function () {
+        $(this).remove()
+      })
+  }
+})