리사이드 함수 조정

Author: redgoose-dev

src/ImageResize/ImageResize.js

@@ -107,10 +107,10 @@ class ImageResize {
    * Play convert
    * 이미지 변환 실행
    * 이미지 주소로 캔버스로 변환 -> 캔버스를 리사이즈 -> 이미지로 컨버트
-   * @param {string|HTMLInputElement|File|Blob} src
+   * @param {string|HTMLInputElement|File|Blob|HTMLCanvasElement} src
    * @return {Promise<string>}
    */
-  async play (src)
+  async play(src)
   {
     let res = await this.get(src)
     res = await this.resize(res)
@@ -125,7 +125,7 @@ class ImageResize {
    * @param {object} options
    * @return {Promise<HTMLCanvasElement>}
    */
-  async get (src, options = undefined)
+  async get(src, options = undefined)
   {
     options = !!options ? this.#checkOptions(this.options, options) : this.options
     if (typeof src === 'string')
@@ -153,7 +153,7 @@ class ImageResize {
    * @param {object} options
    * @return {Promise<HTMLCanvasElement>}
    */
-  async resize (canvas, options = undefined)
+  async resize(canvas, options = undefined)
   {
     options = !!options ? this.#checkOptions(this.options, options) : this.options
     // get size
@@ -182,7 +182,7 @@ class ImageResize {
    * @param {HTMLCanvasElement} canvas
    * @param {number} amount
    */
-  sharpen (canvas, amount = undefined)
+  sharpen(canvas, amount = undefined)
   {
     amount = (!isNaN(amount)) ? amount : this.options.sharpen
     return filterSharpen(canvas, amount)
@@ -194,7 +194,7 @@ class ImageResize {
    * @param {object} options
    * @return {Promise}
    */
-  async output (canvas, options = undefined)
+  async output(canvas, options = undefined)
   {
     options = !!options ? this.#checkOptions(this.options, options) : this.options
     switch (options.outputType)
@@ -214,7 +214,7 @@ class ImageResize {
    * @param {object} value
    * @return {ImageResize}
    */
-  updateOptions (value)
+  updateOptions(value)
   {
     this.options = this.#checkOptions(this.options, {
       ...value,

src/ImageResize/index.js

@@ -5,8 +5,23 @@ export const ImageResize = ImageResizeModule
 /**
  * resize
  * 한번에 리사이즈 실행하는 함수
+ * @param {string|HTMLInputElement|File|Blob|HTMLCanvasElement} [src]
+ * @param {object} options
+ * @param {number} [options.width]
+ * @param {number} [options.height]
+ * @param {'png'|'jpg'|'webp'} [options.format]
+ * @param {'base64'|'canvas'|'blob'} [options.outputType]
+ * @param {number} [options.quality]
+ * @param {number} [options.reSample]
+ * @param {number} [options.sharpen]
+ * @param {string} [options.bgColor]
+ * @return {Promise<any>}
  */
-export function resize()
+export async function resize(src, options)
 {
-  console.log('resize func')
+  const imageResize = new ImageResize(options)
+  let canvas = await imageResize.get(src)
+  canvas = await imageResize.resize(canvas)
+  canvas = await imageResize.sharpen(canvas)
+  return await imageResize.output(canvas)
 }

src/ImageResize/local.js

@@ -1,8 +1,7 @@
-import { ImageResize } from '../ImageResize'
+import { ImageResize, resize } from '../ImageResize'
 import { sleep } from './libs'
 import './index.css'
 
-const imageResize = new ImageResize()
 const $form = document.getElementById('form')
 const $result = document.getElementById('result')
 const values = new Proxy({}, {
@@ -51,22 +50,34 @@ async function onSubmitForm(e)
     alert('not found source')
     return false
   }
+  delete values.url
+  delete values.upload
 
   // empty result
   $result.innerHTML = ''
 
   try
   {
-    // basic resize
-    let res = await imageResize.updateOptions(values).play(src)
-    completeResizeImage(res)
-    // advanced resize
-    // let res = await imageResize.updateOptions(values).get(src)
-    // res = await imageResize.resize(res)
-    // res = imageResize.sharpen(res)
-    // res = await ready(res)
-    // res = await imageResize.output(res)
-    // completeResizeImage(res)
+    // set values
+    const pureValues = { ...values }
+
+    // method: function
+    // let res = await resize(src, pureValues)
+
+    // method: class instance
+    // let imageResize = new ImageResize(pureValues)
+    // let res = await imageResize.play(src)
+
+    // method: advanced
+    let imageResize = new ImageResize(pureValues)
+    let canvas = await imageResize.get(src)
+    canvas = await imageResize.resize(canvas)
+    canvas = imageResize.sharpen(canvas)
+    canvas = await ready(canvas)
+    let res = await imageResize.output(canvas)
+
+    // to result output image
+    completeResizeImage(pureValues.outputType, res)
   }
   catch(e)
   {
@@ -78,13 +89,13 @@ async function onSubmitForm(e)
 async function ready(canvas)
 {
   await sleep(1000)
-  console.warn('ready:', imageResize.options)
+  console.warn('ready canvas', canvas)
   return canvas
 }
 
-function completeResizeImage(res)
+function completeResizeImage(outputType, res)
 {
-  switch(imageResize.options.outputType)
+  switch(outputType)
   {
     case 'base64':
       const image = new Image()

src/demo/index.js

@@ -3,20 +3,20 @@ declare module 'image-resize' {
   // types
   type typeOptions = {
     bgColor?: string
-    format?: string
+    width?: number
     height?: number
-    outputType?: string
+    format?: 'png'|'jpg'|'webp'
+    outputType?: 'base64'|'canvas'|'blob'
     quality?: number
     reSample?: number
-    width?: number
     sharpen?: number
   }
   type typeSource = string|HTMLInputElement|File|Blob
   type typePromiseCanvas = Promise<HTMLCanvasElement>
   type typeOutput = Promise<string|Blob|HTMLCanvasElement>
 
   // class
-  class ImageResize {
+  export class ImageResize {
     // assets
     options: typeOptions
     // class units
@@ -29,5 +29,6 @@ declare module 'image-resize' {
     updateOptions(value: typeOptions): ImageResize
   }
 
-  export default ImageResize
+  // TODO: resize 함수
+
 }