From 73023044cf8b785fdfc64740ca6cd8da33508a61 Mon Sep 17 00:00:00 2001 From: redgoose Date: Fri, 7 Jun 2024 03:34:11 +0900 Subject: [PATCH] =?UTF-8?q?=EA=B0=9C=EB=B0=9C=EC=9A=A9=EC=9C=BC=EB=A1=9C?= =?UTF-8?q?=20=EC=93=B0=EB=8D=98=EC=BD=94=EB=93=9C=20=EC=82=AD=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/{index-DvDnafvy.js => index-DODGag-K.js} | 2 +- docs/index.html | 2 +- package.json | 2 +- src/demo/index.js | 6 +----- 4 files changed, 4 insertions(+), 8 deletions(-) rename docs/{index-DvDnafvy.js => index-DODGag-K.js} (91%) diff --git a/docs/index-DvDnafvy.js b/docs/index-DODGag-K.js similarity index 91% rename from docs/index-DvDnafvy.js rename to docs/index-DODGag-K.js index d0be922..47846bf 100644 --- a/docs/index-DvDnafvy.js +++ b/docs/index-DODGag-K.js @@ -1 +1 @@ -(function(){const e=document.createElement("link").relList;if(e&&e.supports&&e.supports("modulepreload"))return;for(const n of document.querySelectorAll('link[rel="modulepreload"]'))l(n);new MutationObserver(n=>{for(const d of n)if(d.type==="childList")for(const i of d.addedNodes)i.tagName==="LINK"&&i.rel==="modulepreload"&&l(i)}).observe(document,{childList:!0,subtree:!0});function t(n){const d={};return n.integrity&&(d.integrity=n.integrity),n.referrerPolicy&&(d.referrerPolicy=n.referrerPolicy),n.crossOrigin==="use-credentials"?d.credentials="include":n.crossOrigin==="anonymous"?d.credentials="omit":d.credentials="same-origin",d}function l(n){if(n.ep)return;n.ep=!0;const d=t(n);fetch(n.href,d)}})();const Y="KGZ1bmN0aW9uKCl7InVzZSBzdHJpY3QiO2NvbnN0IG89e1NUQVJUOiJTVEFSVCIsRU5EOiJFTkQiLE5FV19DQU5WQVM6Ik5FV19DQU5WQVMiLEVSUk9SOiJFUlJPUiJ9LFQ9e2NhbnZhczpudWxsLHJlU2FtcGxlOjIsd2lkdGg6MzIwLGhlaWdodDoyNDAsY3g6MCxjeTowLGN3OjAsY2g6MCxkeDowLGR5OjAsZHc6MCxkaDowLGJnQ29sb3I6InRyYW5zcGFyZW50In07YXN5bmMgZnVuY3Rpb24gRShlKXtyZXR1cm4gYXdhaXQoYXdhaXQgZmV0Y2goZSkpLmJsb2IoKX1mdW5jdGlvbiBrKGUpe3JldHVybiBuZXcgUHJvbWlzZSgodCxhKT0+e2NvbnN0IG49bmV3IEZpbGVSZWFkZXI7bi5vbmxvYWQ9cj0+e3ZhciBjO3JldHVybiB0KChjPXIudGFyZ2V0KT09bnVsbD92b2lkIDA6Yy5yZXN1bHQpfSxuLm9uZXJyb3I9YSxuLnJlYWRBc0RhdGFVUkwoZSl9KX1mdW5jdGlvbiBJKGUpe2NvbnN0IHQ9YXRvYihlLnNwbGl0KCIsIilbMV0pLGE9ZS5tYXRjaCgvW146XVx3K1wvW1x3LStcZC5dKyg/PTt8LCkvKVswXSxuPXQubGVuZ3RoLHI9bmV3IFVpbnQ4QXJyYXkobik7Zm9yKGxldCBjPTA7YzxuO2MrKylyW2NdPXQuY2hhckNvZGVBdChjKTtyZXR1cm4gbmV3IEJsb2IoW3IuYnVmZmVyXSx7dHlwZTphfSl9ZnVuY3Rpb24gRChlLHQsYSxuKXtsZXQgcj1lLGM9dDtyZXR1cm4gYSYmbiYmKGE+bj9uPXZvaWQgMDphPXZvaWQgMCksYT8ocj1hLGM9dCooYS9lKSk6biYmKHI9ZSoobi90KSxjPW4pLHt3aWR0aDpOdW1iZXIociksaGVpZ2h0Ok51bWJlcihjKX19ZnVuY3Rpb24gTyhlLHQ9MCxhKXtpZih0PD0wKXJldHVybiBlO2NvbnN0IG49YS5nZXRDb250ZXh0KCIyZCIpO24uZHJhd0ltYWdlKGUsMCwwKTtjb25zdCByPW4uZ2V0SW1hZ2VEYXRhKDAsMCxhLndpZHRoLGEuaGVpZ2h0KSxjPW4uY3JlYXRlSW1hZ2VEYXRhKGEud2lkdGgsYS5oZWlnaHQpLGk9QihyLGMsWzAsLTEsMCwtMSw1LC0xLDAsLTEsMF0pO24ucHV0SW1hZ2VEYXRhKGksMCwwKTtjb25zdCBzPWUuZ2V0Q29udGV4dCgiMmQiKTtyZXR1cm4gcy5nbG9iYWxBbHBoYT10fHwxLHMuZHJhd0ltYWdlKGEsMCwwKSxlfWZ1bmN0aW9uIEIoZSx0LGEpe2NvbnN0IG49ZS5kYXRhLHI9dC5kYXRhLGM9ZS53aWR0aCxpPWUuaGVpZ2h0LHM9TWF0aC5yb3VuZChNYXRoLnNxcnQoYS5sZW5ndGgpKSxsPU1hdGguZmxvb3Iocy8yKSx5PWMsSz1pO2ZvcihsZXQgZD0wO2Q8SztkKyspZm9yKGxldCBoPTA7aDx5O2grKyl7bGV0IHA9MCxBPTAsTj0wLE09MDtmb3IobGV0IGY9MDtmPHM7ZisrKWZvcihsZXQgZz0wO2c8cztnKyspe2NvbnN0IHg9ZCtmLWwsUz1oK2ctbDtpZih4Pj0wJiZ4PGkmJlM+PTAmJlM8Yyl7bGV0IGI9KHgqYytTKSo0LG09YVtmKnMrZ107cCs9bltiXSptLEErPW5bYisxXSptLE4rPW5bYisyXSptLE0rPW5bYiszXSptfX1jb25zdCB3PShkKnkraCkqNDtyW3ddPXAsclt3KzFdPUEsclt3KzJdPU4sclt3KzNdPU19cmV0dXJuIHR9ZnVuY3Rpb24geihlLHQ9ImltYWdlL2pwZWciLGE9Ljc1KXtyZXR1cm4gdD1SKHQpLG5ldyBQcm9taXNlKGFzeW5jKG4scik9Pnt0cnl7Y29uc3QgYz1hd2FpdCBqKGUsdCxhKTtuKGMpfWNhdGNoKGMpe3IoYyl9fSl9ZnVuY3Rpb24gUChlLHQ9ImltYWdlL2pwZWciLGE9Ljc1KXtyZXR1cm4gdD1SKHQpLG5ldyBQcm9taXNlKGFzeW5jKG4scik9Pnt0cnl7Y29uc3QgYz1hd2FpdCBlLmNvbnZlcnRUb0Jsb2Ioe3R5cGU6dCxxdWFsaXR5OmF9KTtuKGMpfWNhdGNoKGMpe3IoYyl9fSl9ZnVuY3Rpb24gUihlKXtsZXQgdDtzd2l0Y2goZSl7Y2FzZSJqcGciOmNhc2UianBlZyI6dD0iaW1hZ2UvanBlZyI7YnJlYWs7Y2FzZSJwbmciOnQ9ImltYWdlL3BuZyI7YnJlYWs7Y2FzZSJ3ZWJwIjp0PSJpbWFnZS93ZWJwIjticmVhaztkZWZhdWx0OnQ9ZTticmVha31yZXR1cm4gdH1hc3luYyBmdW5jdGlvbiBqKGUsdCxhKXtjb25zdCBuPWF3YWl0IGUuY29udmVydFRvQmxvYih7dHlwZTp0LHF1YWxpdHk6YX0pLHI9bmV3IEZpbGVSZWFkZXI7cmV0dXJuIG5ldyBQcm9taXNlKGM9PntyLm9ubG9hZGVuZD0oKT0+YyhyLnJlc3VsdCksci5yZWFkQXNEYXRhVVJMKG4pfSl9bGV0IF89MDtjb25zdCBDPW5ldyBNYXA7b25tZXNzYWdlPWFzeW5jIGZ1bmN0aW9uKGUpe2NvbnN0e2tleTp0LGlkOmEsc3JjOm4sb3B0aW9uczpyfT1lLmRhdGE7dHJ5e2lmKGEhPT12b2lkIDApe2NvbnN0IGM9Qy5nZXQoYSk7YyYmYyhlLmRhdGEpfWVsc2Ugc3dpdGNoKHQpe2Nhc2Ugby5TVEFSVDpsZXQgYz1hd2FpdCBxKG4scik7Yz1hd2FpdCBVKGMsciksYz1hd2FpdCB2KGMsciksYXdhaXQgRyhjLHIpO2JyZWFrO2Nhc2Ugby5ORVdfQ0FOVkFTOmJyZWFrfX1jYXRjaChjKXtwb3N0TWVzc2FnZSh7a2V5Om8uRVJST1IsZXJyb3I6Y30pfX07ZnVuY3Rpb24gRihlLHQpe3JldHVybiBuZXcgUHJvbWlzZShhPT57Y29uc3Qgbj1fKys7Qy5zZXQobixhKSxwb3N0TWVzc2FnZSh7aWQ6bixrZXk6ZSwuLi50fSl9KX1hc3luYyBmdW5jdGlvbiBxKGUsdCl7aWYodHlwZW9mIGU9PSJzdHJpbmciKXtjb25zdCBhPWF3YWl0IEUoZSksbj1hd2FpdCBjcmVhdGVJbWFnZUJpdG1hcChhKSxyPWF3YWl0IHUobi53aWR0aCxuLmhlaWdodCx0LmJnQ29sb3IpO3JldHVybiByLmdldENvbnRleHQoIjJkIikuZHJhd0ltYWdlKG4sMCwwKSxyfWVsc2UgaWYoZSBpbnN0YW5jZW9mIEZpbGV8fGUgaW5zdGFuY2VvZiBCbG9iKXtjb25zdCBhPWF3YWl0IGsoZSksbj1JKGEpLHI9YXdhaXQgY3JlYXRlSW1hZ2VCaXRtYXAobiksYz1hd2FpdCB1KHIud2lkdGgsci5oZWlnaHQsdC5iZ0NvbG9yKTtyZXR1cm4gYy5nZXRDb250ZXh0KCIyZCIpLmRyYXdJbWFnZShyLDAsMCksY319YXN5bmMgZnVuY3Rpb24gdShlPTMyMCx0PTI0MCxhPSJ0cmFuc3BhcmVudCIpe2NvbnN0IHI9KGF3YWl0IEYoby5ORVdfQ0FOVkFTLHt3aWR0aDplLGhlaWdodDp0fSkpLmNhbnZhcyxjPXIuZ2V0Q29udGV4dCgiMmQiKTtyZXR1cm4gYy5maWxsU3R5bGU9YSxjLmZpbGxSZWN0KDAsMCxlLHQpLHJ9YXN5bmMgZnVuY3Rpb24gVShlLHQpe2NvbnN0IGE9RChlLndpZHRoLGUuaGVpZ2h0LHQud2lkdGgsdC5oZWlnaHQpO3JldHVybiBhd2FpdCBWKHtjYW52YXM6ZSxyZVNhbXBsZTp0LnJlU2FtcGxlLHdpZHRoOmEud2lkdGgsaGVpZ2h0OmEuaGVpZ2h0LGN4OjAsY3k6MCxjdzplLndpZHRoLGNoOmUuaGVpZ2h0LGR4OjAsZHk6MCxkdzphLndpZHRoLGRoOmEuaGVpZ2h0LGJnQ29sb3I6dC5iZ0NvbG9yfSl9ZnVuY3Rpb24gVihlKXtlPU9iamVjdC5hc3NpZ24oe30sVCxlKSxlLnJlU2FtcGxlPU1hdGgubWluKDQsZS5yZVNhbXBsZSksZS5yZVNhbXBsZT1NYXRoLm1heCgwLGUucmVTYW1wbGUpO2NvbnN0IHQ9TWF0aC5wb3coMixlLnJlU2FtcGxlKTtyZXR1cm4gbmV3IFByb21pc2UoYXN5bmMoYSxuKT0+e3RyeXtjb25zdCByPWF3YWl0IHUoZS53aWR0aCp0LGUuaGVpZ2h0KnQsZS5iZ0NvbG9yKTtyLmdldENvbnRleHQoIjJkIikuZHJhd0ltYWdlKGUuY2FudmFzLGUuY3gsZS5jeSxlLmN3LGUuY2gsZS5keCp0LGUuZHkqdCxlLmR3KnQsZS5kaCp0KSxlLnJlU2FtcGxlPjA/TChlLGUucmVTYW1wbGUscikudGhlbihhKTphKHIpfWNhdGNoKHIpe24ocil9fSl9ZnVuY3Rpb24gTChlLHQsYSl7cmV0dXJuIG5ldyBQcm9taXNlKG49Pnthc3luYyBmdW5jdGlvbiByKGMsaSl7Y29uc3Qgcz1NYXRoLnBvdygyLGMpLGw9YXdhaXQgdShlLndpZHRoKnMsZS5oZWlnaHQqcyxlLmJnQ29sb3IpO2wuZ2V0Q29udGV4dCgiMmQiKS5kcmF3SW1hZ2UoaSwwLDAsaS53aWR0aCouNSxpLmhlaWdodCouNSksYz4wP3IoYy0xLGwpLnRoZW4oKTpuKGwpfXIodC0xLGEpLnRoZW4oKX0pfWFzeW5jIGZ1bmN0aW9uIHYoZSx0KXtjb25zdCBhPWlzTmFOKHQ9PW51bGw/dm9pZCAwOnQuc2hhcnBlbik/MDp0LnNoYXJwZW47aWYoYTw9MClyZXR1cm4gZTtjb25zdCBuPWF3YWl0IHUoZS53aWR0aCxlLmhlaWdodCx0LmJnQ29sb3IpO3JldHVybiBPKGUsYSxuKX1hc3luYyBmdW5jdGlvbiBHKGUsdCl7bGV0IGE7c3dpdGNoKHQub3V0cHV0VHlwZSl7Y2FzZSJiYXNlNjQiOmE9YXdhaXQgeihlLHQuZm9ybWF0LHQucXVhbGl0eSkscG9zdE1lc3NhZ2Uoe2tleTpvLkVORCxvdXRwdXQ6YX0pO2JyZWFrO2Nhc2UiYmxvYiI6YT1hd2FpdCBQKGUsdC5mb3JtYXQsdC5xdWFsaXR5KSxwb3N0TWVzc2FnZSh7a2V5Om8uRU5ELG91dHB1dDphfSk7YnJlYWs7Y2FzZSJjYW52YXMiOmRlZmF1bHQ6Y29uc3Qgbj1lLnRyYW5zZmVyVG9JbWFnZUJpdG1hcCgpO3Bvc3RNZXNzYWdlKHtrZXk6by5FTkQsb3V0cHV0Om59LFtuXSk7YnJlYWt9fX0pKCk7Cg==",f=e=>Uint8Array.from(atob(e),t=>t.charCodeAt(0)),p=typeof window<"u"&&window.Blob&&new Blob([f(Y)],{type:"text/javascript;charset=utf-8"});function S(e){let t;try{if(t=p&&(window.URL||window.webkitURL).createObjectURL(p),!t)throw"";const l=new Worker(t,{name:e==null?void 0:e.name});return l.addEventListener("error",()=>{(window.URL||window.webkitURL).revokeObjectURL(t)}),l}catch{return new Worker("data:text/javascript;base64,"+Y,{name:e==null?void 0:e.name})}finally{t&&(window.URL||window.webkitURL).revokeObjectURL(t)}}const o={START:"START",END:"END",NEW_CANVAS:"NEW_CANVAS",ERROR:"ERROR"},r={width:320,height:240,format:"jpg",outputType:"base64",quality:.75,reSample:2,sharpen:0,bgColor:"transparent"};function X(e={}){let t={};return Object.keys(r).forEach(l=>{t[l]=e[l]!==void 0?e[l]:r[l]}),e.width===void 0&&e.height===void 0?(t.width=r.width,t.height=void 0):e.width===void 0?(t.width=void 0,t.height=Number(t.height)||0):e.height===void 0?(t.width=Number(t.width)||0,t.height=void 0):(t.width=Number(t.width)||0,t.height=Number(t.height)||0),t.quality=Number(t.quality)||0,t.reSample=Number(t.reSample)||0,t}function g(e=void 0){if(typeof e!="string"){{if(e instanceof File||e instanceof Blob)return;if(e instanceof HTMLCanvasElement)return}throw new Error("Invalid image data.")}}function K(e){return new Promise((t,l)=>{e instanceof HTMLCanvasElement?e.toBlob(n=>t(n)):l(new Error("The provided element is not a Canvas."))})}function V(e,t=void 0){return new Promise(async(l,n)=>{const d=X(t),i=new S;i.onmessage=async u=>{const{id:W,key:y,output:c,error:L}=u.data;switch(y){case o.END:if(i&&i.terminate(),c instanceof ImageBitmap){const a=document.createElement("canvas"),h=a.getContext("2d");a.width=c.width,a.height=c.height,h.fillStyle=d.bgColor,h.fillRect(0,0,c.width,c.height),h.drawImage(c,0,0),l(a)}else l(c);i&&i.terminate();break;case o.ERROR:n(L),i&&i.terminate();break;case o.NEW_CANVAS:const Z=new OffscreenCanvas(u.data.width,u.data.height);i.postMessage({id:W,key:o.NEW_CANVAS,canvas:Z},[Z]);break}},g(e),e instanceof HTMLCanvasElement&&(e=await K(e)),i.postMessage({key:o.START,src:e,options:d})})}function R(e={}){return new Promise((t,l)=>{const n=document.createElement("input");n.type="file",e.accept&&(n.accept=e.accept),e.multiple===!0&&(n.multiple=!0),n.addEventListener("change",d=>{const i=Object.assign([],d.target.files);if(i.length<=0)return t([]);n.value=null,t(e.multiple===!0?i:i[0])}),n.addEventListener("cancel",()=>{t(e.multiple===!0?[]:null)}),n.click()})}function C(e){const t=["Bytes","KB","MB","GB","TB"];if(e===0)return"0 Byte";let l=Math.floor(Math.log(e)/Math.log(1024));return String(Math.round(e/Math.pow(1024,l)))+t[l]}const I=document.getElementById("form"),b=document.getElementById("result"),s=new Proxy({},{get:(e,t)=>e[t],set:(e,t,l)=>{switch(t){case"width":case"height":case"quality":case"reSample":case"sharpen":l=Number(l);break}return e[t]=l,!0}}),m={submit:document.querySelector(".form__submit > button[type=submit]"),fileUpload:document.getElementById("file-upload"),fileUploadInfo:document.getElementById("file-upload-info")};async function w(){const e=await R({accept:"image/*"});e&&(s.upload=e,m.fileUploadInfo.innerText=`${e.name} (${C(e.size)})`)}async function N(e){e.preventDefault(),G(!0);const l=e.target.querySelectorAll("[name]");for(const d of l)s[d.name]=d.value;let n;if(s.upload)n=s.upload;else if(s.url)n=s.url;else return alert("not found source"),!1;try{const d={...s};delete d.url,delete d.upload;let i=await V(n,{...d,width:0,height:500});H(d.outputType,i)}catch(d){Q(d)}finally{G(!1)}}function G(e){const t=m.submit;e?(t.setAttribute("disabled",""),t.innerText="처리중.."):(t.removeAttribute("disabled"),t.innerText="이미지 변환")}function H(e,t){switch(b.innerHTML="",e){case"base64":const l=new Image;l.src=t,b.appendChild(l);break;case"canvas":b.appendChild(t);break;case"blob":default:console.log("RESULT:",t);break}}function Q(e){console.error("[ERROR / IMAGE RESIZE]",e.message),alert(`Error resize: ${e.message}`)}I.addEventListener("submit",N);m.fileUpload.addEventListener("click",w); +(function(){const e=document.createElement("link").relList;if(e&&e.supports&&e.supports("modulepreload"))return;for(const n of document.querySelectorAll('link[rel="modulepreload"]'))l(n);new MutationObserver(n=>{for(const d of n)if(d.type==="childList")for(const i of d.addedNodes)i.tagName==="LINK"&&i.rel==="modulepreload"&&l(i)}).observe(document,{childList:!0,subtree:!0});function t(n){const d={};return n.integrity&&(d.integrity=n.integrity),n.referrerPolicy&&(d.referrerPolicy=n.referrerPolicy),n.crossOrigin==="use-credentials"?d.credentials="include":n.crossOrigin==="anonymous"?d.credentials="omit":d.credentials="same-origin",d}function l(n){if(n.ep)return;n.ep=!0;const d=t(n);fetch(n.href,d)}})();const Y="KGZ1bmN0aW9uKCl7InVzZSBzdHJpY3QiO2NvbnN0IG89e1NUQVJUOiJTVEFSVCIsRU5EOiJFTkQiLE5FV19DQU5WQVM6Ik5FV19DQU5WQVMiLEVSUk9SOiJFUlJPUiJ9LFQ9e2NhbnZhczpudWxsLHJlU2FtcGxlOjIsd2lkdGg6MzIwLGhlaWdodDoyNDAsY3g6MCxjeTowLGN3OjAsY2g6MCxkeDowLGR5OjAsZHc6MCxkaDowLGJnQ29sb3I6InRyYW5zcGFyZW50In07YXN5bmMgZnVuY3Rpb24gRShlKXtyZXR1cm4gYXdhaXQoYXdhaXQgZmV0Y2goZSkpLmJsb2IoKX1mdW5jdGlvbiBrKGUpe3JldHVybiBuZXcgUHJvbWlzZSgodCxhKT0+e2NvbnN0IG49bmV3IEZpbGVSZWFkZXI7bi5vbmxvYWQ9cj0+e3ZhciBjO3JldHVybiB0KChjPXIudGFyZ2V0KT09bnVsbD92b2lkIDA6Yy5yZXN1bHQpfSxuLm9uZXJyb3I9YSxuLnJlYWRBc0RhdGFVUkwoZSl9KX1mdW5jdGlvbiBJKGUpe2NvbnN0IHQ9YXRvYihlLnNwbGl0KCIsIilbMV0pLGE9ZS5tYXRjaCgvW146XVx3K1wvW1x3LStcZC5dKyg/PTt8LCkvKVswXSxuPXQubGVuZ3RoLHI9bmV3IFVpbnQ4QXJyYXkobik7Zm9yKGxldCBjPTA7YzxuO2MrKylyW2NdPXQuY2hhckNvZGVBdChjKTtyZXR1cm4gbmV3IEJsb2IoW3IuYnVmZmVyXSx7dHlwZTphfSl9ZnVuY3Rpb24gRChlLHQsYSxuKXtsZXQgcj1lLGM9dDtyZXR1cm4gYSYmbiYmKGE+bj9uPXZvaWQgMDphPXZvaWQgMCksYT8ocj1hLGM9dCooYS9lKSk6biYmKHI9ZSoobi90KSxjPW4pLHt3aWR0aDpOdW1iZXIociksaGVpZ2h0Ok51bWJlcihjKX19ZnVuY3Rpb24gTyhlLHQ9MCxhKXtpZih0PD0wKXJldHVybiBlO2NvbnN0IG49YS5nZXRDb250ZXh0KCIyZCIpO24uZHJhd0ltYWdlKGUsMCwwKTtjb25zdCByPW4uZ2V0SW1hZ2VEYXRhKDAsMCxhLndpZHRoLGEuaGVpZ2h0KSxjPW4uY3JlYXRlSW1hZ2VEYXRhKGEud2lkdGgsYS5oZWlnaHQpLGk9QihyLGMsWzAsLTEsMCwtMSw1LC0xLDAsLTEsMF0pO24ucHV0SW1hZ2VEYXRhKGksMCwwKTtjb25zdCBzPWUuZ2V0Q29udGV4dCgiMmQiKTtyZXR1cm4gcy5nbG9iYWxBbHBoYT10fHwxLHMuZHJhd0ltYWdlKGEsMCwwKSxlfWZ1bmN0aW9uIEIoZSx0LGEpe2NvbnN0IG49ZS5kYXRhLHI9dC5kYXRhLGM9ZS53aWR0aCxpPWUuaGVpZ2h0LHM9TWF0aC5yb3VuZChNYXRoLnNxcnQoYS5sZW5ndGgpKSxsPU1hdGguZmxvb3Iocy8yKSx5PWMsSz1pO2ZvcihsZXQgZD0wO2Q8SztkKyspZm9yKGxldCBoPTA7aDx5O2grKyl7bGV0IHA9MCxBPTAsTj0wLE09MDtmb3IobGV0IGY9MDtmPHM7ZisrKWZvcihsZXQgZz0wO2c8cztnKyspe2NvbnN0IHg9ZCtmLWwsUz1oK2ctbDtpZih4Pj0wJiZ4PGkmJlM+PTAmJlM8Yyl7bGV0IGI9KHgqYytTKSo0LG09YVtmKnMrZ107cCs9bltiXSptLEErPW5bYisxXSptLE4rPW5bYisyXSptLE0rPW5bYiszXSptfX1jb25zdCB3PShkKnkraCkqNDtyW3ddPXAsclt3KzFdPUEsclt3KzJdPU4sclt3KzNdPU19cmV0dXJuIHR9ZnVuY3Rpb24geihlLHQ9ImltYWdlL2pwZWciLGE9Ljc1KXtyZXR1cm4gdD1SKHQpLG5ldyBQcm9taXNlKGFzeW5jKG4scik9Pnt0cnl7Y29uc3QgYz1hd2FpdCBqKGUsdCxhKTtuKGMpfWNhdGNoKGMpe3IoYyl9fSl9ZnVuY3Rpb24gUChlLHQ9ImltYWdlL2pwZWciLGE9Ljc1KXtyZXR1cm4gdD1SKHQpLG5ldyBQcm9taXNlKGFzeW5jKG4scik9Pnt0cnl7Y29uc3QgYz1hd2FpdCBlLmNvbnZlcnRUb0Jsb2Ioe3R5cGU6dCxxdWFsaXR5OmF9KTtuKGMpfWNhdGNoKGMpe3IoYyl9fSl9ZnVuY3Rpb24gUihlKXtsZXQgdDtzd2l0Y2goZSl7Y2FzZSJqcGciOmNhc2UianBlZyI6dD0iaW1hZ2UvanBlZyI7YnJlYWs7Y2FzZSJwbmciOnQ9ImltYWdlL3BuZyI7YnJlYWs7Y2FzZSJ3ZWJwIjp0PSJpbWFnZS93ZWJwIjticmVhaztkZWZhdWx0OnQ9ZTticmVha31yZXR1cm4gdH1hc3luYyBmdW5jdGlvbiBqKGUsdCxhKXtjb25zdCBuPWF3YWl0IGUuY29udmVydFRvQmxvYih7dHlwZTp0LHF1YWxpdHk6YX0pLHI9bmV3IEZpbGVSZWFkZXI7cmV0dXJuIG5ldyBQcm9taXNlKGM9PntyLm9ubG9hZGVuZD0oKT0+YyhyLnJlc3VsdCksci5yZWFkQXNEYXRhVVJMKG4pfSl9bGV0IF89MDtjb25zdCBDPW5ldyBNYXA7b25tZXNzYWdlPWFzeW5jIGZ1bmN0aW9uKGUpe2NvbnN0e2tleTp0LGlkOmEsc3JjOm4sb3B0aW9uczpyfT1lLmRhdGE7dHJ5e2lmKGEhPT12b2lkIDApe2NvbnN0IGM9Qy5nZXQoYSk7YyYmYyhlLmRhdGEpfWVsc2Ugc3dpdGNoKHQpe2Nhc2Ugby5TVEFSVDpsZXQgYz1hd2FpdCBxKG4scik7Yz1hd2FpdCBVKGMsciksYz1hd2FpdCB2KGMsciksYXdhaXQgRyhjLHIpO2JyZWFrO2Nhc2Ugby5ORVdfQ0FOVkFTOmJyZWFrfX1jYXRjaChjKXtwb3N0TWVzc2FnZSh7a2V5Om8uRVJST1IsZXJyb3I6Y30pfX07ZnVuY3Rpb24gRihlLHQpe3JldHVybiBuZXcgUHJvbWlzZShhPT57Y29uc3Qgbj1fKys7Qy5zZXQobixhKSxwb3N0TWVzc2FnZSh7aWQ6bixrZXk6ZSwuLi50fSl9KX1hc3luYyBmdW5jdGlvbiBxKGUsdCl7aWYodHlwZW9mIGU9PSJzdHJpbmciKXtjb25zdCBhPWF3YWl0IEUoZSksbj1hd2FpdCBjcmVhdGVJbWFnZUJpdG1hcChhKSxyPWF3YWl0IHUobi53aWR0aCxuLmhlaWdodCx0LmJnQ29sb3IpO3JldHVybiByLmdldENvbnRleHQoIjJkIikuZHJhd0ltYWdlKG4sMCwwKSxyfWVsc2UgaWYoZSBpbnN0YW5jZW9mIEZpbGV8fGUgaW5zdGFuY2VvZiBCbG9iKXtjb25zdCBhPWF3YWl0IGsoZSksbj1JKGEpLHI9YXdhaXQgY3JlYXRlSW1hZ2VCaXRtYXAobiksYz1hd2FpdCB1KHIud2lkdGgsci5oZWlnaHQsdC5iZ0NvbG9yKTtyZXR1cm4gYy5nZXRDb250ZXh0KCIyZCIpLmRyYXdJbWFnZShyLDAsMCksY319YXN5bmMgZnVuY3Rpb24gdShlPTMyMCx0PTI0MCxhPSJ0cmFuc3BhcmVudCIpe2NvbnN0IHI9KGF3YWl0IEYoby5ORVdfQ0FOVkFTLHt3aWR0aDplLGhlaWdodDp0fSkpLmNhbnZhcyxjPXIuZ2V0Q29udGV4dCgiMmQiKTtyZXR1cm4gYy5maWxsU3R5bGU9YSxjLmZpbGxSZWN0KDAsMCxlLHQpLHJ9YXN5bmMgZnVuY3Rpb24gVShlLHQpe2NvbnN0IGE9RChlLndpZHRoLGUuaGVpZ2h0LHQud2lkdGgsdC5oZWlnaHQpO3JldHVybiBhd2FpdCBWKHtjYW52YXM6ZSxyZVNhbXBsZTp0LnJlU2FtcGxlLHdpZHRoOmEud2lkdGgsaGVpZ2h0OmEuaGVpZ2h0LGN4OjAsY3k6MCxjdzplLndpZHRoLGNoOmUuaGVpZ2h0LGR4OjAsZHk6MCxkdzphLndpZHRoLGRoOmEuaGVpZ2h0LGJnQ29sb3I6dC5iZ0NvbG9yfSl9ZnVuY3Rpb24gVihlKXtlPU9iamVjdC5hc3NpZ24oe30sVCxlKSxlLnJlU2FtcGxlPU1hdGgubWluKDQsZS5yZVNhbXBsZSksZS5yZVNhbXBsZT1NYXRoLm1heCgwLGUucmVTYW1wbGUpO2NvbnN0IHQ9TWF0aC5wb3coMixlLnJlU2FtcGxlKTtyZXR1cm4gbmV3IFByb21pc2UoYXN5bmMoYSxuKT0+e3RyeXtjb25zdCByPWF3YWl0IHUoZS53aWR0aCp0LGUuaGVpZ2h0KnQsZS5iZ0NvbG9yKTtyLmdldENvbnRleHQoIjJkIikuZHJhd0ltYWdlKGUuY2FudmFzLGUuY3gsZS5jeSxlLmN3LGUuY2gsZS5keCp0LGUuZHkqdCxlLmR3KnQsZS5kaCp0KSxlLnJlU2FtcGxlPjA/TChlLGUucmVTYW1wbGUscikudGhlbihhKTphKHIpfWNhdGNoKHIpe24ocil9fSl9ZnVuY3Rpb24gTChlLHQsYSl7cmV0dXJuIG5ldyBQcm9taXNlKG49Pnthc3luYyBmdW5jdGlvbiByKGMsaSl7Y29uc3Qgcz1NYXRoLnBvdygyLGMpLGw9YXdhaXQgdShlLndpZHRoKnMsZS5oZWlnaHQqcyxlLmJnQ29sb3IpO2wuZ2V0Q29udGV4dCgiMmQiKS5kcmF3SW1hZ2UoaSwwLDAsaS53aWR0aCouNSxpLmhlaWdodCouNSksYz4wP3IoYy0xLGwpLnRoZW4oKTpuKGwpfXIodC0xLGEpLnRoZW4oKX0pfWFzeW5jIGZ1bmN0aW9uIHYoZSx0KXtjb25zdCBhPWlzTmFOKHQ9PW51bGw/dm9pZCAwOnQuc2hhcnBlbik/MDp0LnNoYXJwZW47aWYoYTw9MClyZXR1cm4gZTtjb25zdCBuPWF3YWl0IHUoZS53aWR0aCxlLmhlaWdodCx0LmJnQ29sb3IpO3JldHVybiBPKGUsYSxuKX1hc3luYyBmdW5jdGlvbiBHKGUsdCl7bGV0IGE7c3dpdGNoKHQub3V0cHV0VHlwZSl7Y2FzZSJiYXNlNjQiOmE9YXdhaXQgeihlLHQuZm9ybWF0LHQucXVhbGl0eSkscG9zdE1lc3NhZ2Uoe2tleTpvLkVORCxvdXRwdXQ6YX0pO2JyZWFrO2Nhc2UiYmxvYiI6YT1hd2FpdCBQKGUsdC5mb3JtYXQsdC5xdWFsaXR5KSxwb3N0TWVzc2FnZSh7a2V5Om8uRU5ELG91dHB1dDphfSk7YnJlYWs7Y2FzZSJjYW52YXMiOmRlZmF1bHQ6Y29uc3Qgbj1lLnRyYW5zZmVyVG9JbWFnZUJpdG1hcCgpO3Bvc3RNZXNzYWdlKHtrZXk6by5FTkQsb3V0cHV0Om59LFtuXSk7YnJlYWt9fX0pKCk7Cg==",f=e=>Uint8Array.from(atob(e),t=>t.charCodeAt(0)),p=typeof window<"u"&&window.Blob&&new Blob([f(Y)],{type:"text/javascript;charset=utf-8"});function S(e){let t;try{if(t=p&&(window.URL||window.webkitURL).createObjectURL(p),!t)throw"";const l=new Worker(t,{name:e==null?void 0:e.name});return l.addEventListener("error",()=>{(window.URL||window.webkitURL).revokeObjectURL(t)}),l}catch{return new Worker("data:text/javascript;base64,"+Y,{name:e==null?void 0:e.name})}finally{t&&(window.URL||window.webkitURL).revokeObjectURL(t)}}const o={START:"START",END:"END",NEW_CANVAS:"NEW_CANVAS",ERROR:"ERROR"},r={width:320,height:240,format:"jpg",outputType:"base64",quality:.75,reSample:2,sharpen:0,bgColor:"transparent"};function X(e={}){let t={};return Object.keys(r).forEach(l=>{t[l]=e[l]!==void 0?e[l]:r[l]}),e.width===void 0&&e.height===void 0?(t.width=r.width,t.height=void 0):e.width===void 0?(t.width=void 0,t.height=Number(t.height)||0):e.height===void 0?(t.width=Number(t.width)||0,t.height=void 0):(t.width=Number(t.width)||0,t.height=Number(t.height)||0),t.quality=Number(t.quality)||0,t.reSample=Number(t.reSample)||0,t}function K(e=void 0){if(typeof e!="string"){{if(e instanceof File||e instanceof Blob)return;if(e instanceof HTMLCanvasElement)return}throw new Error("Invalid image data.")}}function g(e){return new Promise((t,l)=>{e instanceof HTMLCanvasElement?e.toBlob(n=>t(n)):l(new Error("The provided element is not a Canvas."))})}function V(e,t=void 0){return new Promise(async(l,n)=>{const d=X(t),i=new S;i.onmessage=async u=>{const{id:W,key:y,output:c,error:L}=u.data;switch(y){case o.END:if(i&&i.terminate(),c instanceof ImageBitmap){const a=document.createElement("canvas"),h=a.getContext("2d");a.width=c.width,a.height=c.height,h.fillStyle=d.bgColor,h.fillRect(0,0,c.width,c.height),h.drawImage(c,0,0),l(a)}else l(c);i&&i.terminate();break;case o.ERROR:n(L),i&&i.terminate();break;case o.NEW_CANVAS:const Z=new OffscreenCanvas(u.data.width,u.data.height);i.postMessage({id:W,key:o.NEW_CANVAS,canvas:Z},[Z]);break}},K(e),e instanceof HTMLCanvasElement&&(e=await g(e)),i.postMessage({key:o.START,src:e,options:d})})}function R(e={}){return new Promise((t,l)=>{const n=document.createElement("input");n.type="file",e.accept&&(n.accept=e.accept),e.multiple===!0&&(n.multiple=!0),n.addEventListener("change",d=>{const i=Object.assign([],d.target.files);if(i.length<=0)return t([]);n.value=null,t(e.multiple===!0?i:i[0])}),n.addEventListener("cancel",()=>{t(e.multiple===!0?[]:null)}),n.click()})}function C(e){const t=["Bytes","KB","MB","GB","TB"];if(e===0)return"0 Byte";let l=Math.floor(Math.log(e)/Math.log(1024));return String(Math.round(e/Math.pow(1024,l)))+t[l]}const I=document.getElementById("form"),b=document.getElementById("result"),s=new Proxy({},{get:(e,t)=>e[t],set:(e,t,l)=>{switch(t){case"width":case"height":case"quality":case"reSample":case"sharpen":l=Number(l);break}return e[t]=l,!0}}),m={submit:document.querySelector(".form__submit > button[type=submit]"),fileUpload:document.getElementById("file-upload"),fileUploadInfo:document.getElementById("file-upload-info")};async function w(){const e=await R({accept:"image/*"});e&&(s.upload=e,m.fileUploadInfo.innerText=`${e.name} (${C(e.size)})`)}async function N(e){e.preventDefault(),G(!0);const l=e.target.querySelectorAll("[name]");for(const d of l)s[d.name]=d.value;let n;if(s.upload)n=s.upload;else if(s.url)n=s.url;else return alert("not found source"),!1;try{const d={...s};delete d.url,delete d.upload;const i=await V(n,d);H(d.outputType,i)}catch(d){Q(d)}finally{G(!1)}}function G(e){const t=m.submit;e?(t.setAttribute("disabled",""),t.innerText="처리중.."):(t.removeAttribute("disabled"),t.innerText="이미지 변환")}function H(e,t){switch(b.innerHTML="",e){case"base64":const l=new Image;l.src=t,b.appendChild(l);break;case"canvas":b.appendChild(t);break;case"blob":default:console.log("RESULT:",t);break}}function Q(e){console.error("[ERROR / IMAGE RESIZE]",e.message),alert(`Error resize: ${e.message}`)}I.addEventListener("submit",N);m.fileUpload.addEventListener("click",w); diff --git a/docs/index.html b/docs/index.html index 53bf929..b51bb76 100644 --- a/docs/index.html +++ b/docs/index.html @@ -6,7 +6,7 @@ - + diff --git a/package.json b/package.json index 88339a8..1b096fc 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "image-resize", - "version": "1.4.0", + "version": "1.4.1", "description": "Resize image for javascript", "files": [ "libs" diff --git a/src/demo/index.js b/src/demo/index.js index 6c6ff33..15ccd7e 100644 --- a/src/demo/index.js +++ b/src/demo/index.js @@ -72,11 +72,7 @@ async function onSubmitForm(e) delete pureValues.url delete pureValues.upload // method: function - let res = await imageResize(src, { - ...pureValues, - width: 0, - height: 500, - }) + const res = await imageResize(src, pureValues) // to result output image completeResizeImage(pureValues.outputType, res) }