assets/js/frame.js in appscms-tools-theme-2.2.2 vs assets/js/frame.js in appscms-tools-theme-2.2.3
- old
+ new
@@ -1,251 +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.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
+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