diff --git a/TODO.md b/TODO.md deleted file mode 100644 index 6fdca10..0000000 --- a/TODO.md +++ /dev/null @@ -1,6 +0,0 @@ -# TODO - -- Download doesn't work -- Add icon -- Mobile compatibility -- Formula to change font size and image ratio \ No newline at end of file diff --git a/dist/css/app.38c4bed1.css b/dist/css/app.38c4bed1.css new file mode 100644 index 0000000..1f6cdfa --- /dev/null +++ b/dist/css/app.38c4bed1.css @@ -0,0 +1 @@ +pre[data-v-9f19376e]{font-family:Courier New,Courier,monospace;line-height:3px;font-size:5px;background-color:#fff;color:#000}h1[data-v-9f19376e]{text-align:center;font-size:5vw}#inputCss[data-v-9f19376e]{justify-content:start;border-radius:15px;background-color:#101010}#inputCss[data-v-9f19376e],label[data-v-9f19376e]{width:-moz-fit-content;width:fit-content;display:flex;flex-direction:row;align-items:center;height:5vh}label[data-v-9f19376e]{cursor:pointer;justify-content:center;gap:2vw}#download[data-v-9f19376e]{background-color:#00d0ff}#download[data-v-9f19376e]:hover{background-color:#008aa9}#fileName[data-v-9f19376e]{padding-left:10vw;padding-right:10vw}#btns[data-v-9f19376e],#fileName[data-v-9f19376e]{height:100%;display:flex;flex-direction:row;align-items:center;justify-content:center;width:-moz-fit-content;width:fit-content}#btns[data-v-9f19376e]{gap:1vw}#fakeBtn[data-v-9f19376e]{background-color:#e6b052;color:#000;height:100%;border-radius:15px;font-size:1.1rem;font-weight:700;width:7rem;display:flex;flex-direction:row;align-items:center;justify-content:center}#fakeBtn[data-v-9f19376e]:hover{background-color:#ba8a48}input[data-v-9f19376e]{display:none}button[data-v-9f19376e]{height:100%;width:6rem;border-radius:15px;border:none;background-color:#52e652;font-size:1.1rem;font-weight:700}button[data-v-9f19376e]:hover{background-color:#389b38}#main[data-v-9f19376e]{flex-wrap:wrap;width:100%;display:flex;flex-direction:row;align-items:center;justify-content:center;height:5vh;gap:2vw}#art[data-v-9f19376e]{width:-moz-fit-content;width:fit-content;display:flex;flex-direction:column;align-items:center;justify-content:start;height:-moz-fit-content;height:fit-content;width:100%} \ No newline at end of file diff --git a/dist/css/app.78170879.css b/dist/css/app.78170879.css deleted file mode 100644 index 68fbad3..0000000 --- a/dist/css/app.78170879.css +++ /dev/null @@ -1 +0,0 @@ -pre[data-v-24554722]{font-family:Courier New,Courier,monospace;line-height:1pt;font-size:2pt;background-color:#fff;color:#000}h1[data-v-24554722]{text-align:center;font-size:5vw}#inputCss[data-v-24554722]{height:100%;justify-content:start;border-radius:15px;background-color:#101010}#inputCss[data-v-24554722],label[data-v-24554722]{width:-moz-fit-content;width:fit-content;display:flex;flex-direction:row;align-items:center;height:5vh}label[data-v-24554722]{cursor:pointer;justify-content:center;gap:2vw}#download[data-v-24554722]{background-color:#00d0ff}#download[data-v-24554722]:hover{background-color:#008aa9}#fileName[data-v-24554722]{width:25rem}#fakeBtn[data-v-24554722],#fileName[data-v-24554722]{height:100%;display:flex;flex-direction:row;align-items:center;justify-content:center}#fakeBtn[data-v-24554722]{background-color:#e6b052;color:#000;border-radius:15px;font-size:1.1rem;font-weight:700;width:7rem}#fakeBtn[data-v-24554722]:hover{background-color:#ba8a48}input[data-v-24554722]{display:none}button[data-v-24554722]{height:100%;width:6rem;border-radius:15px;border:none;background-color:#52e652;font-size:1.1rem;font-weight:700}button[data-v-24554722]:hover{background-color:#389b38}#main[data-v-24554722]{width:100%;display:flex;flex-direction:row;align-items:center;justify-content:center;height:5vh;gap:2vw}#art[data-v-24554722]{width:-moz-fit-content;width:fit-content;display:flex;flex-direction:column;align-items:center;justify-content:start;height:-moz-fit-content;height:fit-content;width:100%} \ No newline at end of file diff --git a/dist/icon.png b/dist/icon.png new file mode 100644 index 0000000..df2128b Binary files /dev/null and b/dist/icon.png differ diff --git a/dist/index.html b/dist/index.html index 670216d..2c05510 100644 --- a/dist/index.html +++ b/dist/index.html @@ -1,10 +1,10 @@ -Image to ASCII Converter
\ No newline at end of file + }
\ No newline at end of file diff --git a/dist/js/app.3d97e1dd.js b/dist/js/app.3d97e1dd.js deleted file mode 100644 index 8a04731..0000000 --- a/dist/js/app.3d97e1dd.js +++ /dev/null @@ -1,2 +0,0 @@ -(function(){"use strict";var t={8271:function(t,n,e){var i=e(9242),o=e(3396),r=e(7139);const a=t=>((0,o.dD)("data-v-24554722"),t=t(),(0,o.Cn)(),t),l=a((()=>(0,o._)("br",null,null,-1))),u=a((()=>(0,o._)("br",null,null,-1))),d=a((()=>(0,o._)("h1",null,"Image to ASCII Converter",-1))),c={id:"main"},s={id:"inputCss"},f={for:"input"},h=a((()=>(0,o._)("div",{id:"fakeBtn"},"Upload File",-1))),p={id:"fileName"},v=a((()=>(0,o._)("br",null,null,-1))),w=a((()=>(0,o._)("br",null,null,-1))),b=a((()=>(0,o._)("br",null,null,-1))),m={id:"art"},g=a((()=>(0,o._)("br",null,null,-1))),_=a((()=>(0,o._)("br",null,null,-1))),y=a((()=>(0,o._)("br",null,null,-1)));function C(t,n,e,i,a,C){return(0,o.wg)(),(0,o.iD)(o.HY,null,[l,u,d,(0,o._)("div",c,[(0,o._)("div",s,[(0,o._)("label",f,[(0,o._)("input",{id:"input",type:"file",name:"file",accept:"image/*",onChange:n[0]||(n[0]=(...n)=>t.fileUploaded&&t.fileUploaded(...n))},null,32),h]),(0,o._)("span",p,(0,r.zw)(t.fileName),1)]),(0,o._)("button",{onClick:n[1]||(n[1]=n=>t.convert())},"Convert"),(0,o._)("button",{onClick:n[2]||(n[2]=n=>t.download()),id:"download"},"Download")]),v,w,b,(0,o._)("div",m,[(0,o._)("pre",null,(0,r.zw)(t.art),1)]),g,_,y],64)}var O=e(3170),k=(0,o.aZ)({data(){return{art:"",image:"",fileName:"No File Selected"}},methods:{async fileUploaded(t){const n=t.target;if(null==n.files)return;const e=n.files[0];this.fileName=e.name;const i=new FileReader;let o="asduhasiduh";i.onload=async()=>{void 0!=i.result&&(o=i.result)},i.readAsDataURL(e),setTimeout((()=>{this.image=o}),500)},async convert(){if(this.art="",""==this.image)return window.alert("Please upload an image to convert");const t="$@B%8&WM#*oahkbdpqwmZO0QLCJUYXzcvunxrjft/\\|()1{}[]?-_+~<>i!lI;:,\"^`'. ".split(""),n=await O.loadImage(this.image),e=O.createCanvas(n.width,n.height),i=e.getContext("2d");i.drawImage(n,0,0);const o=i.getImageData(0,0,n.width,n.height).data;for(let r=0;r=r)&&Object.keys(e.O).every((function(t){return e.O[t](i[u])}))?i.splice(u--,1):(l=!1,r0&&t[c-1][2]>r;c--)t[c]=t[c-1];t[c]=[i,o,r]}}(),function(){e.n=function(t){var n=t&&t.__esModule?function(){return t["default"]}:function(){return t};return e.d(n,{a:n}),n}}(),function(){e.d=function(t,n){for(var i in n)e.o(n,i)&&!e.o(t,i)&&Object.defineProperty(t,i,{enumerable:!0,get:n[i]})}}(),function(){e.g=function(){if("object"===typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(t){if("object"===typeof window)return window}}()}(),function(){e.o=function(t,n){return Object.prototype.hasOwnProperty.call(t,n)}}(),function(){var t={143:0};e.O.j=function(n){return 0===t[n]};var n=function(n,i){var o,r,a=i[0],l=i[1],u=i[2],d=0;if(a.some((function(n){return 0!==t[n]}))){for(o in l)e.o(l,o)&&(e.m[o]=l[o]);if(u)var c=u(e)}for(n&&n(i);d (_pushScopeId(\"data-v-24554722\"),n=n(),_popScopeId(),n)\nconst _hoisted_1 = /*#__PURE__*/ _withScopeId(() => /*#__PURE__*/_createElementVNode(\"br\", null, null, -1))\nconst _hoisted_2 = /*#__PURE__*/ _withScopeId(() => /*#__PURE__*/_createElementVNode(\"br\", null, null, -1))\nconst _hoisted_3 = /*#__PURE__*/ _withScopeId(() => /*#__PURE__*/_createElementVNode(\"h1\", null, \"Image to ASCII Converter\", -1))\nconst _hoisted_4 = { id: \"main\" }\nconst _hoisted_5 = { id: \"inputCss\" }\nconst _hoisted_6 = { for: \"input\" }\nconst _hoisted_7 = /*#__PURE__*/ _withScopeId(() => /*#__PURE__*/_createElementVNode(\"div\", { id: \"fakeBtn\" }, \"Upload File\", -1))\nconst _hoisted_8 = { id: \"fileName\" }\nconst _hoisted_9 = /*#__PURE__*/ _withScopeId(() => /*#__PURE__*/_createElementVNode(\"br\", null, null, -1))\nconst _hoisted_10 = /*#__PURE__*/ _withScopeId(() => /*#__PURE__*/_createElementVNode(\"br\", null, null, -1))\nconst _hoisted_11 = /*#__PURE__*/ _withScopeId(() => /*#__PURE__*/_createElementVNode(\"br\", null, null, -1))\nconst _hoisted_12 = { id: \"art\" }\nconst _hoisted_13 = /*#__PURE__*/ _withScopeId(() => /*#__PURE__*/_createElementVNode(\"br\", null, null, -1))\nconst _hoisted_14 = /*#__PURE__*/ _withScopeId(() => /*#__PURE__*/_createElementVNode(\"br\", null, null, -1))\nconst _hoisted_15 = /*#__PURE__*/ _withScopeId(() => /*#__PURE__*/_createElementVNode(\"br\", null, null, -1))\n\nexport function render(_ctx: any,_cache: any,$props: any,$setup: any,$data: any,$options: any) {\n return (_openBlock(), _createElementBlock(_Fragment, null, [\n _hoisted_1,\n _hoisted_2,\n _hoisted_3,\n _createElementVNode(\"div\", _hoisted_4, [\n _createElementVNode(\"div\", _hoisted_5, [\n _createElementVNode(\"label\", _hoisted_6, [\n _createElementVNode(\"input\", {\n id: \"input\",\n type: \"file\",\n name: \"file\",\n accept: \"image/*\",\n onChange: _cache[0] || (_cache[0] = \n//@ts-ignore\n(...args) => (_ctx.fileUploaded && _ctx.fileUploaded(...args)))\n }, null, 32),\n _hoisted_7\n ]),\n _createElementVNode(\"span\", _hoisted_8, _toDisplayString(_ctx.fileName), 1)\n ]),\n _createElementVNode(\"button\", {\n onClick: _cache[1] || (_cache[1] = ($event: any) => (_ctx.convert()))\n }, \"Convert\"),\n _createElementVNode(\"button\", {\n onClick: _cache[2] || (_cache[2] = ($event: any) => (_ctx.download())),\n id: \"download\"\n }, \"Download\")\n ]),\n _hoisted_9,\n _hoisted_10,\n _hoisted_11,\n _createElementVNode(\"div\", _hoisted_12, [\n _createElementVNode(\"pre\", null, _toDisplayString(_ctx.art), 1)\n ]),\n _hoisted_13,\n _hoisted_14,\n _hoisted_15\n ], 64))\n}","\r\nimport { defineComponent } from 'vue'\r\nimport Canvas from 'canvas'\r\n\r\nexport default defineComponent({\r\n data() {\r\n return {\r\n art: '',\r\n image: '',\r\n fileName: 'No File Selected'\r\n }\r\n },\r\n\r\n methods: {\r\n async fileUploaded(event: Event) {\r\n const target = event.target as HTMLInputElement\r\n if(target.files == null) return\r\n const file = target.files[0]\r\n this.fileName = file.name\r\n\r\n const reader = new FileReader()\r\n let image: ArrayBuffer | string | undefined | null = 'asduhasiduh'\r\n\r\n reader.onload = async () => { \r\n if (reader.result != undefined) {\r\n image = reader.result\r\n }\r\n }\r\n\r\n reader.readAsDataURL(file)\r\n\r\n setTimeout(() => {\r\n this.image = image as string\r\n }, 500);\r\n\r\n },\r\n \r\n async convert() {\r\n this.art = ''\r\n\r\n if(this.image == '') return window.alert('Please upload an image to convert')\r\n const density = '$@B%8&WM#*oahkbdpqwmZO0QLCJUYXzcvunxrjft/\\\\|()1{}[]?-_+~<>i!lI;:,\"^`\\'. '.split('')\r\n\r\n const img = await Canvas.loadImage(this.image)\r\n const canvas = Canvas.createCanvas(img.width, img.height)\r\n const ctx = canvas.getContext('2d')\r\n ctx.drawImage(img, 0, 0)\r\n const imgData = ctx.getImageData(0, 0, img.width, img. height).data\r\n\r\n for(let i = 0; i < imgData.length; i+=4) {\r\n const r = imgData[i]\r\n const g = imgData[i + 1]\r\n const b = imgData[i + 2]\r\n const a = imgData[i + 3]\r\n\r\n let brightness = Math.floor((r + g + b) / 3)\r\n if(a == 0) brightness = 255\r\n\r\n const char = density[Math.floor(density.length / 256 * brightness)]\r\n\r\n if(( (i / 4) % img.width ) == 0) this.art += '\\n'\r\n this.art += ( char == ' ' ? '\\xa0' : char )\r\n }\r\n },\r\n\r\n async download() {\r\n if(this.art == '') return window.alert('There is no art to be downloaded')\r\n const blob = new Blob([this.art], { type: 'text/plain' })\r\n const url = window.URL.createObjectURL(blob)\r\n window.URL.revokeObjectURL(url)\r\n console.log(url)\r\n var link = document.createElement('a');\r\n link.href = url;\r\n link.setAttribute('download', `${this.fileName}-ascii.txt`);\r\n document.body.appendChild(link);\r\n link.click();\r\n }\r\n }\r\n})\r\n","import { render } from \"./App.vue?vue&type=template&id=24554722&scoped=true&ts=true\"\nimport script from \"./App.vue?vue&type=script&lang=ts\"\nexport * from \"./App.vue?vue&type=script&lang=ts\"\n\nimport \"./App.vue?vue&type=style&index=0&id=24554722&scoped=true&lang=css\"\n\nimport exportComponent from \"C:\\\\Users\\\\Gonzalo\\\\Documents\\\\GitHub\\\\image-to-ascii\\\\node_modules\\\\vue-loader\\\\dist\\\\exportHelper.js\"\nconst __exports__ = /*#__PURE__*/exportComponent(script, [['render',render],['__scopeId',\"data-v-24554722\"]])\n\nexport default __exports__","import { createApp } from 'vue'\nimport App from './App.vue'\n\ncreateApp(App).mount('#app')\n","// The module cache\nvar __webpack_module_cache__ = {};\n\n// The require function\nfunction __webpack_require__(moduleId) {\n\t// Check if module is in cache\n\tvar cachedModule = __webpack_module_cache__[moduleId];\n\tif (cachedModule !== undefined) {\n\t\treturn cachedModule.exports;\n\t}\n\t// Create a new module (and put it into the cache)\n\tvar module = __webpack_module_cache__[moduleId] = {\n\t\t// no module.id needed\n\t\t// no module.loaded needed\n\t\texports: {}\n\t};\n\n\t// Execute the module function\n\t__webpack_modules__[moduleId](module, module.exports, __webpack_require__);\n\n\t// Return the exports of the module\n\treturn module.exports;\n}\n\n// expose the modules object (__webpack_modules__)\n__webpack_require__.m = __webpack_modules__;\n\n","var deferred = [];\n__webpack_require__.O = function(result, chunkIds, fn, priority) {\n\tif(chunkIds) {\n\t\tpriority = priority || 0;\n\t\tfor(var i = deferred.length; i > 0 && deferred[i - 1][2] > priority; i--) deferred[i] = deferred[i - 1];\n\t\tdeferred[i] = [chunkIds, fn, priority];\n\t\treturn;\n\t}\n\tvar notFulfilled = Infinity;\n\tfor (var i = 0; i < deferred.length; i++) {\n\t\tvar chunkIds = deferred[i][0];\n\t\tvar fn = deferred[i][1];\n\t\tvar priority = deferred[i][2];\n\t\tvar fulfilled = true;\n\t\tfor (var j = 0; j < chunkIds.length; j++) {\n\t\t\tif ((priority & 1 === 0 || notFulfilled >= priority) && Object.keys(__webpack_require__.O).every(function(key) { return __webpack_require__.O[key](chunkIds[j]); })) {\n\t\t\t\tchunkIds.splice(j--, 1);\n\t\t\t} else {\n\t\t\t\tfulfilled = false;\n\t\t\t\tif(priority < notFulfilled) notFulfilled = priority;\n\t\t\t}\n\t\t}\n\t\tif(fulfilled) {\n\t\t\tdeferred.splice(i--, 1)\n\t\t\tvar r = fn();\n\t\t\tif (r !== undefined) result = r;\n\t\t}\n\t}\n\treturn result;\n};","// getDefaultExport function for compatibility with non-harmony modules\n__webpack_require__.n = function(module) {\n\tvar getter = module && module.__esModule ?\n\t\tfunction() { return module['default']; } :\n\t\tfunction() { return module; };\n\t__webpack_require__.d(getter, { a: getter });\n\treturn getter;\n};","// define getter functions for harmony exports\n__webpack_require__.d = function(exports, definition) {\n\tfor(var key in definition) {\n\t\tif(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {\n\t\t\tObject.defineProperty(exports, key, { enumerable: true, get: definition[key] });\n\t\t}\n\t}\n};","__webpack_require__.g = (function() {\n\tif (typeof globalThis === 'object') return globalThis;\n\ttry {\n\t\treturn this || new Function('return this')();\n\t} catch (e) {\n\t\tif (typeof window === 'object') return window;\n\t}\n})();","__webpack_require__.o = function(obj, prop) { return Object.prototype.hasOwnProperty.call(obj, prop); }","// no baseURI\n\n// object to store loaded and loading chunks\n// undefined = chunk not loaded, null = chunk preloaded/prefetched\n// [resolve, reject, Promise] = chunk loading, 0 = chunk loaded\nvar installedChunks = {\n\t143: 0\n};\n\n// no chunk on demand loading\n\n// no prefetching\n\n// no preloaded\n\n// no HMR\n\n// no HMR manifest\n\n__webpack_require__.O.j = function(chunkId) { return installedChunks[chunkId] === 0; };\n\n// install a JSONP callback for chunk loading\nvar webpackJsonpCallback = function(parentChunkLoadingFunction, data) {\n\tvar chunkIds = data[0];\n\tvar moreModules = data[1];\n\tvar runtime = data[2];\n\t// add \"moreModules\" to the modules object,\n\t// then flag all \"chunkIds\" as loaded and fire callback\n\tvar moduleId, chunkId, i = 0;\n\tif(chunkIds.some(function(id) { return installedChunks[id] !== 0; })) {\n\t\tfor(moduleId in moreModules) {\n\t\t\tif(__webpack_require__.o(moreModules, moduleId)) {\n\t\t\t\t__webpack_require__.m[moduleId] = moreModules[moduleId];\n\t\t\t}\n\t\t}\n\t\tif(runtime) var result = runtime(__webpack_require__);\n\t}\n\tif(parentChunkLoadingFunction) parentChunkLoadingFunction(data);\n\tfor(;i < chunkIds.length; i++) {\n\t\tchunkId = chunkIds[i];\n\t\tif(__webpack_require__.o(installedChunks, chunkId) && installedChunks[chunkId]) {\n\t\t\tinstalledChunks[chunkId][0]();\n\t\t}\n\t\tinstalledChunks[chunkId] = 0;\n\t}\n\treturn __webpack_require__.O(result);\n}\n\nvar chunkLoadingGlobal = self[\"webpackChunkimage_to_ascii\"] = self[\"webpackChunkimage_to_ascii\"] || [];\nchunkLoadingGlobal.forEach(webpackJsonpCallback.bind(null, 0));\nchunkLoadingGlobal.push = webpackJsonpCallback.bind(null, chunkLoadingGlobal.push.bind(chunkLoadingGlobal));","// startup\n// Load entry module and return exports\n// This entry module depends on other loaded chunks and execution need to be delayed\nvar __webpack_exports__ = __webpack_require__.O(undefined, [998], function() { return __webpack_require__(8271); })\n__webpack_exports__ = __webpack_require__.O(__webpack_exports__);\n"],"names":["_withScopeId","n","_pushScopeId","_popScopeId","_hoisted_1","_createElementVNode","_hoisted_2","_hoisted_3","_hoisted_4","id","_hoisted_5","_hoisted_6","for","_hoisted_7","_hoisted_8","_hoisted_9","_hoisted_10","_hoisted_11","_hoisted_12","_hoisted_13","_hoisted_14","_hoisted_15","render","_ctx","_cache","$props","$setup","$data","$options","_openBlock","_createElementBlock","_Fragment","type","name","accept","onChange","args","fileUploaded","_toDisplayString","fileName","onClick","$event","convert","download","art","defineComponent","data","image","methods","async","event","target","files","file","this","reader","FileReader","onload","undefined","result","readAsDataURL","setTimeout","window","alert","density","split","img","Canvas","canvas","width","height","ctx","getContext","drawImage","imgData","getImageData","i","length","r","g","b","a","brightness","Math","floor","char","blob","Blob","url","URL","createObjectURL","revokeObjectURL","console","log","link","document","createElement","href","setAttribute","body","appendChild","click","__exports__","createApp","App","mount","__webpack_module_cache__","__webpack_require__","moduleId","cachedModule","exports","module","__webpack_modules__","m","deferred","O","chunkIds","fn","priority","notFulfilled","Infinity","fulfilled","j","Object","keys","every","key","splice","getter","__esModule","d","definition","o","defineProperty","enumerable","get","globalThis","Function","e","obj","prop","prototype","hasOwnProperty","call","installedChunks","chunkId","webpackJsonpCallback","parentChunkLoadingFunction","moreModules","runtime","some","chunkLoadingGlobal","self","forEach","bind","push","__webpack_exports__"],"sourceRoot":""} \ No newline at end of file diff --git a/dist/js/app.9082c5b9.js b/dist/js/app.9082c5b9.js new file mode 100644 index 0000000..92dcbc4 --- /dev/null +++ b/dist/js/app.9082c5b9.js @@ -0,0 +1,2 @@ +(function(){"use strict";var t={1120:function(t,n,e){var i=e(9242),o=e(3396),a=e(7139);const r=t=>((0,o.dD)("data-v-9f19376e"),t=t(),(0,o.Cn)(),t),l=r((()=>(0,o._)("br",null,null,-1))),d=r((()=>(0,o._)("br",null,null,-1))),u=r((()=>(0,o._)("h1",null,"Image to ASCII Converter",-1))),c={id:"main"},s={id:"inputCss"},h={for:"input"},f=r((()=>(0,o._)("div",{id:"fakeBtn"},"Upload File",-1))),w={id:"fileName"},g={id:"btns"},m=r((()=>(0,o._)("br",null,null,-1))),v=r((()=>(0,o._)("br",null,null,-1))),b=r((()=>(0,o._)("br",null,null,-1))),p=r((()=>(0,o._)("br",null,null,-1))),_=r((()=>(0,o._)("br",null,null,-1))),y={id:"art"},C=r((()=>(0,o._)("br",null,null,-1))),O=r((()=>(0,o._)("br",null,null,-1))),I=r((()=>(0,o._)("br",null,null,-1)));function k(t,n,e,i,r,k){return(0,o.wg)(),(0,o.iD)(o.HY,null,[l,d,u,(0,o._)("div",c,[(0,o._)("div",s,[(0,o._)("label",h,[(0,o._)("input",{id:"input",type:"file",name:"file",accept:"image/*",onChange:n[0]||(n[0]=(...n)=>t.fileUploaded&&t.fileUploaded(...n))},null,32),f]),(0,o._)("span",w,(0,a.zw)(t.fileName),1)]),(0,o._)("div",g,[(0,o._)("button",{onClick:n[1]||(n[1]=n=>t.convert())},"Convert"),(0,o._)("button",{onClick:n[2]||(n[2]=n=>t.download()),id:"download"},"Download")])]),m,v,b,p,_,(0,o._)("div",y,[(0,o._)("pre",null,(0,a.zw)(t.art),1)]),C,O,I],64)}var U=e(3170),j=(0,o.aZ)({data(){return{art:"",image:"",fileName:"No File Selected"}},methods:{async fileUploaded(t){const n=t.target;if(null==n.files)return;const e=n.files[0];this.fileName=e.name;const i=new FileReader;let o="asduhasiduh";i.onload=async()=>{void 0!=i.result&&(o=i.result)},i.readAsDataURL(e),setTimeout((()=>{this.image=o}),500)},async convert(){if(this.art="",""==this.image)return window.alert("Please upload an image to convert");const t="$@B%8&WM#*oahkbdpqwmZO0QLCJUYXzcvunxrjft/\\|()1{}[]?-_+~<>i!lI;:,\"^`'. ".split("");let n=await U.loadImage(this.image);const e=U.createCanvas(n.width,n.height),i=e.getContext("2d");i.drawImage(n,0,0);let o=i.getImageData(0,0,n.width,n.height).data;n.width>document.body.clientWidth/3-50&&(o=await this.resizeImage(),n.height=Math.floor(Math.floor(n.width/(n.width/(document.body.clientWidth/3-50)))*n.height/n.width),n.width=Math.floor(n.width/(n.width/(document.body.clientWidth/3-50))),console.log("Condition:",n.width,n.height));for(let a=0;a=a)&&Object.keys(e.O).every((function(t){return e.O[t](i[d])}))?i.splice(d--,1):(l=!1,a0&&t[c-1][2]>a;c--)t[c]=t[c-1];t[c]=[i,o,a]}}(),function(){e.n=function(t){var n=t&&t.__esModule?function(){return t["default"]}:function(){return t};return e.d(n,{a:n}),n}}(),function(){e.d=function(t,n){for(var i in n)e.o(n,i)&&!e.o(t,i)&&Object.defineProperty(t,i,{enumerable:!0,get:n[i]})}}(),function(){e.g=function(){if("object"===typeof globalThis)return globalThis;try{return this||new Function("return this")()}catch(t){if("object"===typeof window)return window}}()}(),function(){e.o=function(t,n){return Object.prototype.hasOwnProperty.call(t,n)}}(),function(){var t={143:0};e.O.j=function(n){return 0===t[n]};var n=function(n,i){var o,a,r=i[0],l=i[1],d=i[2],u=0;if(r.some((function(n){return 0!==t[n]}))){for(o in l)e.o(l,o)&&(e.m[o]=l[o]);if(d)var c=d(e)}for(n&&n(i);u (_pushScopeId(\"data-v-9f19376e\"),n=n(),_popScopeId(),n)\nconst _hoisted_1 = /*#__PURE__*/ _withScopeId(() => /*#__PURE__*/_createElementVNode(\"br\", null, null, -1))\nconst _hoisted_2 = /*#__PURE__*/ _withScopeId(() => /*#__PURE__*/_createElementVNode(\"br\", null, null, -1))\nconst _hoisted_3 = /*#__PURE__*/ _withScopeId(() => /*#__PURE__*/_createElementVNode(\"h1\", null, \"Image to ASCII Converter\", -1))\nconst _hoisted_4 = { id: \"main\" }\nconst _hoisted_5 = { id: \"inputCss\" }\nconst _hoisted_6 = { for: \"input\" }\nconst _hoisted_7 = /*#__PURE__*/ _withScopeId(() => /*#__PURE__*/_createElementVNode(\"div\", { id: \"fakeBtn\" }, \"Upload File\", -1))\nconst _hoisted_8 = { id: \"fileName\" }\nconst _hoisted_9 = { id: \"btns\" }\nconst _hoisted_10 = /*#__PURE__*/ _withScopeId(() => /*#__PURE__*/_createElementVNode(\"br\", null, null, -1))\nconst _hoisted_11 = /*#__PURE__*/ _withScopeId(() => /*#__PURE__*/_createElementVNode(\"br\", null, null, -1))\nconst _hoisted_12 = /*#__PURE__*/ _withScopeId(() => /*#__PURE__*/_createElementVNode(\"br\", null, null, -1))\nconst _hoisted_13 = /*#__PURE__*/ _withScopeId(() => /*#__PURE__*/_createElementVNode(\"br\", null, null, -1))\nconst _hoisted_14 = /*#__PURE__*/ _withScopeId(() => /*#__PURE__*/_createElementVNode(\"br\", null, null, -1))\nconst _hoisted_15 = { id: \"art\" }\nconst _hoisted_16 = /*#__PURE__*/ _withScopeId(() => /*#__PURE__*/_createElementVNode(\"br\", null, null, -1))\nconst _hoisted_17 = /*#__PURE__*/ _withScopeId(() => /*#__PURE__*/_createElementVNode(\"br\", null, null, -1))\nconst _hoisted_18 = /*#__PURE__*/ _withScopeId(() => /*#__PURE__*/_createElementVNode(\"br\", null, null, -1))\n\nexport function render(_ctx: any,_cache: any,$props: any,$setup: any,$data: any,$options: any) {\n return (_openBlock(), _createElementBlock(_Fragment, null, [\n _hoisted_1,\n _hoisted_2,\n _hoisted_3,\n _createElementVNode(\"div\", _hoisted_4, [\n _createElementVNode(\"div\", _hoisted_5, [\n _createElementVNode(\"label\", _hoisted_6, [\n _createElementVNode(\"input\", {\n id: \"input\",\n type: \"file\",\n name: \"file\",\n accept: \"image/*\",\n onChange: _cache[0] || (_cache[0] = \n//@ts-ignore\n(...args) => (_ctx.fileUploaded && _ctx.fileUploaded(...args)))\n }, null, 32),\n _hoisted_7\n ]),\n _createElementVNode(\"span\", _hoisted_8, _toDisplayString(_ctx.fileName), 1)\n ]),\n _createElementVNode(\"div\", _hoisted_9, [\n _createElementVNode(\"button\", {\n onClick: _cache[1] || (_cache[1] = ($event: any) => (_ctx.convert()))\n }, \"Convert\"),\n _createElementVNode(\"button\", {\n onClick: _cache[2] || (_cache[2] = ($event: any) => (_ctx.download())),\n id: \"download\"\n }, \"Download\")\n ])\n ]),\n _hoisted_10,\n _hoisted_11,\n _hoisted_12,\n _hoisted_13,\n _hoisted_14,\n _createElementVNode(\"div\", _hoisted_15, [\n _createElementVNode(\"pre\", null, _toDisplayString(_ctx.art), 1)\n ]),\n _hoisted_16,\n _hoisted_17,\n _hoisted_18\n ], 64))\n}","\r\nimport { defineComponent } from 'vue'\r\nimport Canvas from 'canvas'\r\n\r\nexport default defineComponent({\r\n data() {\r\n return {\r\n art: '',\r\n image: '',\r\n fileName: 'No File Selected'\r\n }\r\n },\r\n\r\n // Sets the file's data to a variable\r\n methods: {\r\n async fileUploaded(event: Event) {\r\n const target = event.target as HTMLInputElement\r\n if(target.files == null) return\r\n const file = target.files[0]\r\n this.fileName = file.name\r\n\r\n const reader = new FileReader()\r\n let image: ArrayBuffer | string | undefined | null = 'asduhasiduh'\r\n\r\n reader.onload = async () => { \r\n if (reader.result != undefined) {\r\n image = reader.result\r\n }\r\n }\r\n\r\n reader.readAsDataURL(file)\r\n\r\n setTimeout(() => {\r\n this.image = image as string\r\n }, 500);\r\n\r\n },\r\n\r\n /**\r\n * @method convert: Converts the image to the ASCII characters\r\n */\r\n async convert() {\r\n this.art = ''\r\n\r\n if(this.image == '') return window.alert('Please upload an image to convert')\r\n\r\n // This is the density sequence, which will determine the brightness of the art. We split it to have them as an array\r\n // The first characters have more density and look darker, the last ones have less density and look brighter\r\n const density = '$@B%8&WM#*oahkbdpqwmZO0QLCJUYXzcvunxrjft/\\\\|()1{}[]?-_+~<>i!lI;:,\"^`\\'. '.split('')\r\n\r\n let img = await Canvas.loadImage(this.image)\r\n const canvas = Canvas.createCanvas(img.width, img.height)\r\n const ctx = canvas.getContext('2d')\r\n ctx.drawImage(img, 0, 0)\r\n let imgData = ctx.getImageData(0, 0, img.width, img.height).data\r\n\r\n if(img.width > document.body.clientWidth / 3 - 50) {\r\n imgData = await this.resizeImage()\r\n img.height = Math.floor((Math.floor(img.width / (img.width / ( document.body.clientWidth / 3 - 50))) * img.height) / img.width)\r\n img.width = Math.floor(img.width / (img.width / ( document.body.clientWidth / 3 - 50)))\r\n console.log('Condition:', img.width, img.height)\r\n }\r\n\r\n for(let i = 0; i < imgData.length; i+=4) {\r\n const r = imgData[i]\r\n const g = imgData[i + 1]\r\n const b = imgData[i + 2]\r\n const a = imgData[i + 3]\r\n\r\n let brightness = Math.floor((r + g + b) / 3)\r\n if(a == 0) brightness = 255\r\n const char = density[Math.floor(density.length / 256 * brightness)]\r\n\r\n // Converts the pixel to a character and adds it to the \"art\" string\r\n this.art += ( char == ' ' ? '\\xa0' : char )\r\n // If it's the last pixel of the row, create a new line\r\n if(( (i / 4) % img.width ) == 0) this.art += '\\n'\r\n }\r\n },\r\n\r\n async resizeImage(): Promise {\r\n const img = await Canvas.loadImage(this.image)\r\n const width = Math.floor(img.width / (img.width / ( document.body.clientWidth / 3 - 50)))\r\n const height = Math.floor((width * img.height) / img.width)\r\n console.log('Function: ', width, height)\r\n const canvas = Canvas.createCanvas(width, height)\r\n const ctx = canvas.getContext('2d')\r\n ctx.drawImage(img, 0, 0, width, height)\r\n return ctx.getImageData(0, 0, width, height).data\r\n },\r\n\r\n /**\r\n * @method download: Downloads the ASCII art as a .txt file\r\n */\r\n async download() {\r\n if(this.art == '') return window.alert('There is no art to be downloaded')\r\n const blob = new Blob([this.art])\r\n const url = window.URL.createObjectURL(blob)\r\n var link = document.createElement('a')\r\n link.href = url\r\n link.setAttribute('download', 'ascii-art.txt')\r\n document.body.appendChild(link)\r\n link.click()\r\n window.URL.revokeObjectURL(url)\r\n }\r\n }\r\n})\r\n","import { render } from \"./App.vue?vue&type=template&id=9f19376e&scoped=true&ts=true\"\nimport script from \"./App.vue?vue&type=script&lang=ts\"\nexport * from \"./App.vue?vue&type=script&lang=ts\"\n\nimport \"./App.vue?vue&type=style&index=0&id=9f19376e&scoped=true&lang=css\"\n\nimport exportComponent from \"C:\\\\Users\\\\Gonzalo\\\\Documents\\\\GitHub\\\\image-to-ascii\\\\node_modules\\\\vue-loader\\\\dist\\\\exportHelper.js\"\nconst __exports__ = /*#__PURE__*/exportComponent(script, [['render',render],['__scopeId',\"data-v-9f19376e\"]])\n\nexport default __exports__","import { createApp } from 'vue'\nimport App from './App.vue'\n\ncreateApp(App).mount('#app')\n","// The module cache\nvar __webpack_module_cache__ = {};\n\n// The require function\nfunction __webpack_require__(moduleId) {\n\t// Check if module is in cache\n\tvar cachedModule = __webpack_module_cache__[moduleId];\n\tif (cachedModule !== undefined) {\n\t\treturn cachedModule.exports;\n\t}\n\t// Create a new module (and put it into the cache)\n\tvar module = __webpack_module_cache__[moduleId] = {\n\t\t// no module.id needed\n\t\t// no module.loaded needed\n\t\texports: {}\n\t};\n\n\t// Execute the module function\n\t__webpack_modules__[moduleId](module, module.exports, __webpack_require__);\n\n\t// Return the exports of the module\n\treturn module.exports;\n}\n\n// expose the modules object (__webpack_modules__)\n__webpack_require__.m = __webpack_modules__;\n\n","var deferred = [];\n__webpack_require__.O = function(result, chunkIds, fn, priority) {\n\tif(chunkIds) {\n\t\tpriority = priority || 0;\n\t\tfor(var i = deferred.length; i > 0 && deferred[i - 1][2] > priority; i--) deferred[i] = deferred[i - 1];\n\t\tdeferred[i] = [chunkIds, fn, priority];\n\t\treturn;\n\t}\n\tvar notFulfilled = Infinity;\n\tfor (var i = 0; i < deferred.length; i++) {\n\t\tvar chunkIds = deferred[i][0];\n\t\tvar fn = deferred[i][1];\n\t\tvar priority = deferred[i][2];\n\t\tvar fulfilled = true;\n\t\tfor (var j = 0; j < chunkIds.length; j++) {\n\t\t\tif ((priority & 1 === 0 || notFulfilled >= priority) && Object.keys(__webpack_require__.O).every(function(key) { return __webpack_require__.O[key](chunkIds[j]); })) {\n\t\t\t\tchunkIds.splice(j--, 1);\n\t\t\t} else {\n\t\t\t\tfulfilled = false;\n\t\t\t\tif(priority < notFulfilled) notFulfilled = priority;\n\t\t\t}\n\t\t}\n\t\tif(fulfilled) {\n\t\t\tdeferred.splice(i--, 1)\n\t\t\tvar r = fn();\n\t\t\tif (r !== undefined) result = r;\n\t\t}\n\t}\n\treturn result;\n};","// getDefaultExport function for compatibility with non-harmony modules\n__webpack_require__.n = function(module) {\n\tvar getter = module && module.__esModule ?\n\t\tfunction() { return module['default']; } :\n\t\tfunction() { return module; };\n\t__webpack_require__.d(getter, { a: getter });\n\treturn getter;\n};","// define getter functions for harmony exports\n__webpack_require__.d = function(exports, definition) {\n\tfor(var key in definition) {\n\t\tif(__webpack_require__.o(definition, key) && !__webpack_require__.o(exports, key)) {\n\t\t\tObject.defineProperty(exports, key, { enumerable: true, get: definition[key] });\n\t\t}\n\t}\n};","__webpack_require__.g = (function() {\n\tif (typeof globalThis === 'object') return globalThis;\n\ttry {\n\t\treturn this || new Function('return this')();\n\t} catch (e) {\n\t\tif (typeof window === 'object') return window;\n\t}\n})();","__webpack_require__.o = function(obj, prop) { return Object.prototype.hasOwnProperty.call(obj, prop); }","// no baseURI\n\n// object to store loaded and loading chunks\n// undefined = chunk not loaded, null = chunk preloaded/prefetched\n// [resolve, reject, Promise] = chunk loading, 0 = chunk loaded\nvar installedChunks = {\n\t143: 0\n};\n\n// no chunk on demand loading\n\n// no prefetching\n\n// no preloaded\n\n// no HMR\n\n// no HMR manifest\n\n__webpack_require__.O.j = function(chunkId) { return installedChunks[chunkId] === 0; };\n\n// install a JSONP callback for chunk loading\nvar webpackJsonpCallback = function(parentChunkLoadingFunction, data) {\n\tvar chunkIds = data[0];\n\tvar moreModules = data[1];\n\tvar runtime = data[2];\n\t// add \"moreModules\" to the modules object,\n\t// then flag all \"chunkIds\" as loaded and fire callback\n\tvar moduleId, chunkId, i = 0;\n\tif(chunkIds.some(function(id) { return installedChunks[id] !== 0; })) {\n\t\tfor(moduleId in moreModules) {\n\t\t\tif(__webpack_require__.o(moreModules, moduleId)) {\n\t\t\t\t__webpack_require__.m[moduleId] = moreModules[moduleId];\n\t\t\t}\n\t\t}\n\t\tif(runtime) var result = runtime(__webpack_require__);\n\t}\n\tif(parentChunkLoadingFunction) parentChunkLoadingFunction(data);\n\tfor(;i < chunkIds.length; i++) {\n\t\tchunkId = chunkIds[i];\n\t\tif(__webpack_require__.o(installedChunks, chunkId) && installedChunks[chunkId]) {\n\t\t\tinstalledChunks[chunkId][0]();\n\t\t}\n\t\tinstalledChunks[chunkId] = 0;\n\t}\n\treturn __webpack_require__.O(result);\n}\n\nvar chunkLoadingGlobal = self[\"webpackChunkimage_to_ascii\"] = self[\"webpackChunkimage_to_ascii\"] || [];\nchunkLoadingGlobal.forEach(webpackJsonpCallback.bind(null, 0));\nchunkLoadingGlobal.push = webpackJsonpCallback.bind(null, chunkLoadingGlobal.push.bind(chunkLoadingGlobal));","// startup\n// Load entry module and return exports\n// This entry module depends on other loaded chunks and execution need to be delayed\nvar __webpack_exports__ = __webpack_require__.O(undefined, [998], function() { return __webpack_require__(1120); })\n__webpack_exports__ = __webpack_require__.O(__webpack_exports__);\n"],"names":["_withScopeId","n","_pushScopeId","_popScopeId","_hoisted_1","_createElementVNode","_hoisted_2","_hoisted_3","_hoisted_4","id","_hoisted_5","_hoisted_6","for","_hoisted_7","_hoisted_8","_hoisted_9","_hoisted_10","_hoisted_11","_hoisted_12","_hoisted_13","_hoisted_14","_hoisted_15","_hoisted_16","_hoisted_17","_hoisted_18","render","_ctx","_cache","$props","$setup","$data","$options","_openBlock","_createElementBlock","_Fragment","type","name","accept","onChange","args","fileUploaded","_toDisplayString","fileName","onClick","$event","convert","download","art","defineComponent","data","image","methods","async","event","target","files","file","this","reader","FileReader","onload","undefined","result","readAsDataURL","setTimeout","window","alert","density","split","img","Canvas","canvas","width","height","ctx","getContext","drawImage","imgData","getImageData","document","body","clientWidth","resizeImage","Math","floor","console","log","i","length","r","g","b","a","brightness","char","blob","Blob","url","URL","createObjectURL","link","createElement","href","setAttribute","appendChild","click","revokeObjectURL","__exports__","createApp","App","mount","__webpack_module_cache__","__webpack_require__","moduleId","cachedModule","exports","module","__webpack_modules__","m","deferred","O","chunkIds","fn","priority","notFulfilled","Infinity","fulfilled","j","Object","keys","every","key","splice","getter","__esModule","d","definition","o","defineProperty","enumerable","get","globalThis","Function","e","obj","prop","prototype","hasOwnProperty","call","installedChunks","chunkId","webpackJsonpCallback","parentChunkLoadingFunction","moreModules","runtime","some","chunkLoadingGlobal","self","forEach","bind","push","__webpack_exports__"],"sourceRoot":""} \ No newline at end of file diff --git a/public/icon.png b/public/icon.png new file mode 100644 index 0000000..df2128b Binary files /dev/null and b/public/icon.png differ diff --git a/public/index.html b/public/index.html index d0268d6..5fb6f81 100644 --- a/public/index.html +++ b/public/index.html @@ -5,13 +5,14 @@ Image to ASCII Converter +