├── .github └── workflows │ └── nodejs.yml ├── .gitignore ├── LICENSE ├── README.md ├── babel.config.js ├── docs ├── css │ ├── app.7159a25c.css │ └── chunk-vendors.d9890480.css ├── favicon.ico ├── fonts │ ├── element-icons.535877f5.woff │ └── element-icons.732389de.ttf ├── index.html └── js │ ├── app.28307a75.js │ ├── app.28307a75.js.map │ ├── chunk-vendors.d90ce16d.js │ └── chunk-vendors.d90ce16d.js.map ├── package-lock.json ├── package.json ├── public ├── favicon.ico └── index.html ├── src ├── App.vue ├── assets │ └── logo.png ├── components │ ├── AppInfoDrawer.vue │ └── GrapeBgDownloader.vue ├── locale │ ├── en_US.json │ └── zh_CN.json └── main.js └── vue.config.js /.github/workflows/nodejs.yml: -------------------------------------------------------------------------------- 1 | name: Node CI 2 | 3 | on: [push] 4 | 5 | jobs: 6 | build: 7 | 8 | runs-on: ubuntu-latest 9 | 10 | strategy: 11 | matrix: 12 | node-version: [8.x, 10.x, 12.x] 13 | 14 | steps: 15 | - uses: actions/checkout@v1 16 | - name: Use Node.js ${{ matrix.node-version }} 17 | uses: actions/setup-node@v1 18 | with: 19 | node-version: ${{ matrix.node-version }} 20 | - name: npm install, build, and test 21 | run: | 22 | npm install -g @vue/cli 23 | npm install 24 | npm run build --if-present 25 | npm test 26 | env: 27 | CI: true 28 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | 8 | # Runtime data 9 | pids 10 | *.pid 11 | *.seed 12 | *.pid.lock 13 | 14 | # Directory for instrumented libs generated by jscoverage/JSCover 15 | lib-cov 16 | 17 | # Coverage directory used by tools like istanbul 18 | coverage 19 | 20 | # nyc test coverage 21 | .nyc_output 22 | 23 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 24 | .grunt 25 | 26 | # Bower dependency directory (https://bower.io/) 27 | bower_components 28 | 29 | # node-waf configuration 30 | .lock-wscript 31 | 32 | # Compiled binary addons (https://nodejs.org/api/addons.html) 33 | build/Release 34 | 35 | # Dependency directories 36 | node_modules/ 37 | jspm_packages/ 38 | 39 | # TypeScript v1 declaration files 40 | typings/ 41 | 42 | # Optional npm cache directory 43 | .npm 44 | 45 | # Optional eslint cache 46 | .eslintcache 47 | 48 | # Optional REPL history 49 | .node_repl_history 50 | 51 | # Output of 'npm pack' 52 | *.tgz 53 | 54 | # Yarn Integrity file 55 | .yarn-integrity 56 | 57 | # dotenv environment variables file 58 | .env 59 | 60 | # next.js build output 61 | .next 62 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019 Jiang Wenjian 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # gradex 2 | An online tool to generate gradients background from given image so you can preview and download it. 3 | 4 | # Screenshots 5 | ![screenshot_20190825095131](https://user-images.githubusercontent.com/25657798/63644579-ce8ffd00-c71e-11e9-888f-f5d52c044f5f.png) 6 | ![screenshot_20190825095341](https://user-images.githubusercontent.com/25657798/63644581-d2238400-c71e-11e9-8981-fde68f18f205.png) 7 | 8 | # Dependencies 9 | - [vue.js](https://github.com/vuejs/vue) 10 | - [vue-cli v3](https://github.com/vuejs/vue-cli) 11 | - [element-ui](https://github.com/ElemeFE/element) 12 | - [grade-js](https://github.com/benhowdle89/grade) 13 | 14 | # Run local 15 | 1. Clone the repo 16 | 2. Install vue-cli: `npm install -g @vue/cli` 17 | 3. Install dependencies: `npm install` 18 | 4. Start dev server: `npm run serve` 19 | 20 | # License 21 | MIT License 22 | 23 | Copyright (c) 2019 Jiang Wenjian 24 | -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/app' 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /docs/css/app.7159a25c.css: -------------------------------------------------------------------------------- 1 | .avatar-uploader .el-upload{border:1px dashed #d9d9d9;border-radius:6px;cursor:pointer;position:relative;overflow:hidden;height:300px;width:300px;margin-top:10%}.avatar-uploader .el-upload:hover{border-color:#409eff}.avatar-uploader-icon{font-size:28px;color:#8c939d;width:178px;height:178px;line-height:178px;text-align:center}.avatar{width:300px;height:300px;display:block}.gradient-wrap{height:100%;text-align:center}.lang-icon{margin-left:.5em}.dropdown-title{-webkit-text-decoration-line:underline;text-decoration-line:underline;cursor:pointer;color:#409eff;font-weight:700}.locale-dropdown{margin-left:2em}i.drawer-btn{position:absolute;right:40px;bottom:40px;cursor:pointer;font-size:40px}.drawer-style{max-height:50%;min-height:40%;text-align:center}.el-drawer.btt{overflow:auto}.copyright{text-align:right;color:grey;margin-right:2em}body,html{padding:0;margin:0;height:100%}#app{font-family:Avenir,Helvetica,Arial,sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-align:center;color:#2c3e50;height:100%} -------------------------------------------------------------------------------- /docs/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jwenjian/gradex/5eee47b708dbc2b0816fb105702792f1c8c1104c/docs/favicon.ico -------------------------------------------------------------------------------- /docs/fonts/element-icons.535877f5.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jwenjian/gradex/5eee47b708dbc2b0816fb105702792f1c8c1104c/docs/fonts/element-icons.535877f5.woff -------------------------------------------------------------------------------- /docs/fonts/element-icons.732389de.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jwenjian/gradex/5eee47b708dbc2b0816fb105702792f1c8c1104c/docs/fonts/element-icons.732389de.ttf -------------------------------------------------------------------------------- /docs/index.html: -------------------------------------------------------------------------------- 1 | Grade X
-------------------------------------------------------------------------------- /docs/js/app.28307a75.js: -------------------------------------------------------------------------------- 1 | (function(e){function t(t){for(var n,i,s=t[0],l=t[1],c=t[2],p=0,u=[];p'),"HTML "+this.$t("message.code"),{confirmButtonText:this.$t("button.confirm"),callback:function(e){}})}else this.$message.error(this.$t("message.process-error"))},downloadBg:function(){var e=this.$refs["container"].style.backgroundImage;if(e){e=e.replace("linear-gradient","");var t=e.substring(e.indexOf("rgb("),e.indexOf("0%")),a=e.substring(e.lastIndexOf("rgb("),e.indexOf("75%")),n=screen.width<=screen.height?screen.width:screen.height,o=document.createElement("canvas");o.width=n,o.height=n,o.style.display="none";var r=o.getContext("2d"),i=r.createRadialGradient(0,0,0,n/16,n/16,n);i.addColorStop(0,t),i.addColorStop(1,a),r.fillStyle=i,r.fillRect(0,0,n,n),this.saveAsImg(this.filename+"_bg.png",o.toDataURL())}else this.$message.error(this.$t("message.process-error"))},saveAsImg:function(e,t){var a=document.createElement("a");a.download=e,a.href=t;var n=navigator.userAgent,o=n.match(/MSIE\s([\d.]+)/)||n.match(/Trident\/.+?rv:(([\d.]+))/),r=n.match(/Edge\/([\d.]+)/);if("function"!==typeof MouseEvent||o||r)if(window.navigator.msSaveOrOpenBlob){var i=atob(t.split(",")[1]),s=i.length,l=new Uint8Array(s);while(s--)l[s]=i.charCodeAt(s);var c=new Blob([l]);window.navigator.msSaveOrOpenBlob(c,e)}else{var d='',p=window.open();p.document.write(d)}else{var u=new MouseEvent("click",{view:window,bubbles:!0,cancelable:!1});a.dispatchEvent(u)}}}}),c=l,d=(a("9726"),a("2877")),p=Object(d["a"])(c,i,s,!1,null,null,null),u=p.exports,f=function(){var e=this,t=e.$createElement,a=e._self._c||t;return a("div",[a("i",{staticClass:"el-icon-info drawer-btn",on:{click:e.showDrawer}}),a("el-drawer",{attrs:{"custom-class":"drawer-style",visible:e.drawer,direction:"btt","show-close":!1},on:{"update:visible":function(t){e.drawer=t}}},[a("div",{attrs:{slot:"title"},slot:"title"},[a("span",[e._v(e._s(e.$t("drawer.title")))]),a("el-dropdown",{staticClass:"locale-dropdown",on:{command:e.setAppLocale}},[a("span",{staticClass:"dropdown-title"},[a("span",[e._v(e._s(e.$t("locale.name")))]),a("font-awesome-icon",{staticClass:"lang-icon",attrs:{icon:"language"}})],1),a("el-dropdown-menu",{attrs:{slot:"dropdown"},slot:"dropdown"},[a("el-dropdown-item",{attrs:{command:"zh"}},[e._v("简体中文")]),a("el-dropdown-item",{attrs:{command:"en"}},[e._v("English")])],1)],1)],1),a("h4",[e._v(e._s(e.$t("drawer.how-to-use.title")))]),a("p",[e._v(e._s(e.$t("drawer.how-to-use.p1")))]),a("p",[e._v(e._s(e.$t("drawer.how-to-use.p2")))]),a("p",[e._v(e._s(e.$t("drawer.how-to-use.p3")))]),a("p",{staticClass:"copyright"},[e._v("\n Github:\n "),a("a",{attrs:{href:"https://github.com/jwenjian/gradex",target:"_blank"}},[e._v("jwenjian/gradex")])])])],1)},h=[],w={data:function(){return{drawer:!0}},methods:{setAppLocale:function(e){this.$i18n.locale=e},showDrawer:function(){this.drawer=!0}}},g=w,m=(a("cb41"),Object(d["a"])(g,f,h,!1,null,null,null)),v=m.exports,b={name:"app",components:{AppInfoDrawer:v,GrapeBgDownloader:u}},y=b,_=(a("034f"),Object(d["a"])(y,o,r,!1,null,null,null)),x=_.exports,O=a("5c96"),$=a.n(O),C=(a("0fae"),a("512a")),j=a.n(C),k=a("a925"),S=a("ecee"),M=a("c074"),A=a("ad3d");S["c"].add(M["a"]),n["default"].component("font-awesome-icon",A["a"]),n["default"].use(k["a"]),n["default"].use($.a),n["default"].config.productionTip=!1,window.Grade=j.a;var E={en:a("84d8"),zh:a("d3a4")},T=new k["a"]({locale:"en",messages:E});new n["default"]({i18n:T,render:function(e){return e(x)}}).$mount("#app")},"64a9":function(e,t,a){},"84d8":function(e){e.exports=JSON.parse('{"locale":{"name":"English"},"upload":{"tip":"Drag and drop your image here or click to upload","supported-files":"Support only: .jpg / .png / .bmp / .gif"},"drawer":{"title":"About / Help","how-to-use":{"title":"How to use?","p1":"Drap and drop an image file, the app will read 2 majar color of the image then set the background color automatically.","p2":"You can click the download button to download the background image file.","p3":"Also can click to copy the corresponding html code."}},"button":{"download":"Download","copy-html-code":"Show HTML code","confirm":"Okay"},"message":{"process-error":"Can\'t process, refresh then try again.","code":"code"}}')},9726:function(e,t,a){"use strict";var n=a("ccb7"),o=a.n(n);o.a},b147:function(e,t,a){},cb41:function(e,t,a){"use strict";var n=a("b147"),o=a.n(n);o.a},ccb7:function(e,t,a){},d3a4:function(e){e.exports=JSON.parse('{"locale":{"name":"简体中文"},"upload":{"tip":"将图片拖到此处， 或点击上传","supported-files":"支持： .jpg / .png / .bmp / .gif 文件"},"drawer":{"title":"关于 / 帮助","how-to-use":{"title":"如何使用？","p1":"拖拽 / 上传一张图片，程序会自动读取图片的两个主色并将其设置为背景。","p2":"你可以点击下载按钮，下载背景图片","p3":"也可以点击复制该背景颜色对应的HTML代码。"}},"button":{"download":"下载","copy-html-code":"查看HTML代码","confirm":"确定"},"message":{"process-error":"处理失败, 刷新页面再试一次吧。","code":"代码"}}')}}); 2 | //# sourceMappingURL=app.28307a75.js.map -------------------------------------------------------------------------------- /docs/js/app.28307a75.js.map: -------------------------------------------------------------------------------- 1 | {"version":3,"sources":["webpack:///webpack/bootstrap","webpack:///./src/App.vue?4241","webpack:///./src/App.vue?216b","webpack:///./src/components/GrapeBgDownloader.vue?a9ba","webpack:///src/components/GrapeBgDownloader.vue","webpack:///./src/components/GrapeBgDownloader.vue?4cd8","webpack:///./src/components/GrapeBgDownloader.vue?30ac","webpack:///./src/components/AppInfoDrawer.vue?c014","webpack:///src/components/AppInfoDrawer.vue","webpack:///./src/components/AppInfoDrawer.vue?05e4","webpack:///./src/components/AppInfoDrawer.vue","webpack:///src/App.vue","webpack:///./src/App.vue?c53a","webpack:///./src/App.vue?bff9","webpack:///./src/main.js","webpack:///./src/components/GrapeBgDownloader.vue?8b63","webpack:///./src/components/AppInfoDrawer.vue?d83b"],"names":["webpackJsonpCallback","data","moduleId","chunkId","chunkIds","moreModules","executeModules","i","resolves","length","Object","prototype","hasOwnProperty","call","installedChunks","push","modules","parentJsonpFunction","shift","deferredModules","apply","checkDeferredModules","result","deferredModule","fulfilled","j","depId","splice","__webpack_require__","s","installedModules","exports","module","l","m","c","d","name","getter","o","defineProperty","enumerable","get","r","Symbol","toStringTag","value","t","mode","__esModule","ns","create","key","bind","n","object","property","p","jsonpArray","window","oldJsonpFunction","slice","_vm","this","_h","$createElement","_c","_self","attrs","staticRenderFns","ref","staticClass","onFileChange","imageUrl","_v","_s","$t","slot","directives","rawName","expression","on","downloadBg","showHTMLCode","filename","methods","substring","lastIndexOf","URL","createObjectURL","file","raw","setTimeout","Grade","document","querySelectorAll","bg","$alert","$message","error","replace","width","height","style","display","grd","addColorStop","startColor","endColor","ctx","fillStyle","fillRect","saveAsImg","toDataURL","a","download","fileName","href","url","MouseEvent","isIE","isEdge","navigator","msSaveOrOpenBlob","bstr","atob","split","u8arr","Uint8Array","charCodeAt","blob","Blob","html","tab","open","write","evt","view","bubbles","cancelable","dispatchEvent","component","showDrawer","drawer","$event","setAppLocale","$i18n","locale","lang","components","AppInfoDrawer","GrapeBgDownloader","library","add","faLanguage","Vue","FontAwesomeIcon","use","VueI18n","ElementUI","config","productionTip","messages","require","i18n","render","h","App","$mount"],"mappings":"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","file":"js/app.28307a75.js","sourcesContent":[" \t// install a JSONP callback for chunk loading\n \tfunction webpackJsonpCallback(data) {\n \t\tvar chunkIds = data[0];\n \t\tvar moreModules = data[1];\n \t\tvar executeModules = data[2];\n\n \t\t// add \"moreModules\" to the modules object,\n \t\t// then flag all \"chunkIds\" as loaded and fire callback\n \t\tvar moduleId, chunkId, i = 0, resolves = [];\n \t\tfor(;i < chunkIds.length; i++) {\n \t\t\tchunkId = chunkIds[i];\n \t\t\tif(Object.prototype.hasOwnProperty.call(installedChunks, chunkId) && installedChunks[chunkId]) {\n \t\t\t\tresolves.push(installedChunks[chunkId][0]);\n \t\t\t}\n \t\t\tinstalledChunks[chunkId] = 0;\n \t\t}\n \t\tfor(moduleId in moreModules) {\n \t\t\tif(Object.prototype.hasOwnProperty.call(moreModules, moduleId)) {\n \t\t\t\tmodules[moduleId] = moreModules[moduleId];\n \t\t\t}\n \t\t}\n \t\tif(parentJsonpFunction) parentJsonpFunction(data);\n\n \t\twhile(resolves.length) {\n \t\t\tresolves.shift()();\n \t\t}\n\n \t\t// add entry modules from loaded chunk to deferred list\n \t\tdeferredModules.push.apply(deferredModules, executeModules || []);\n\n \t\t// run deferred modules when all chunks ready\n \t\treturn checkDeferredModules();\n \t};\n \tfunction checkDeferredModules() {\n \t\tvar result;\n \t\tfor(var i = 0; i < deferredModules.length; i++) {\n \t\t\tvar deferredModule = deferredModules[i];\n \t\t\tvar fulfilled = true;\n \t\t\tfor(var j = 1; j < deferredModule.length; j++) {\n \t\t\t\tvar depId = deferredModule[j];\n \t\t\t\tif(installedChunks[depId] !== 0) fulfilled = false;\n \t\t\t}\n \t\t\tif(fulfilled) {\n \t\t\t\tdeferredModules.splice(i--, 1);\n \t\t\t\tresult = __webpack_require__(__webpack_require__.s = deferredModule[0]);\n \t\t\t}\n \t\t}\n\n \t\treturn result;\n \t}\n\n \t// The module cache\n \tvar installedModules = {};\n\n \t// object to store loaded and loading chunks\n \t// undefined = chunk not loaded, null = chunk preloaded/prefetched\n \t// Promise = chunk loading, 0 = chunk loaded\n \tvar installedChunks = {\n \t\t\"app\": 0\n \t};\n\n \tvar deferredModules = [];\n\n \t// The require function\n \tfunction __webpack_require__(moduleId) {\n\n \t\t// Check if module is in cache\n \t\tif(installedModules[moduleId]) {\n \t\t\treturn installedModules[moduleId].exports;\n \t\t}\n \t\t// Create a new module (and put it into the cache)\n \t\tvar module = installedModules[moduleId] = {\n \t\t\ti: moduleId,\n \t\t\tl: false,\n \t\t\texports: {}\n \t\t};\n\n \t\t// Execute the module function\n \t\tmodules[moduleId].call(module.exports, module, module.exports, __webpack_require__);\n\n \t\t// Flag the module as loaded\n \t\tmodule.l = true;\n\n \t\t// Return the exports of the module\n \t\treturn module.exports;\n \t}\n\n\n \t// expose the modules object (__webpack_modules__)\n \t__webpack_require__.m = modules;\n\n \t// expose the module cache\n \t__webpack_require__.c = installedModules;\n\n \t// define getter function for harmony exports\n \t__webpack_require__.d = function(exports, name, getter) {\n \t\tif(!__webpack_require__.o(exports, name)) {\n \t\t\tObject.defineProperty(exports, name, { enumerable: true, get: getter });\n \t\t}\n \t};\n\n \t// define __esModule on exports\n \t__webpack_require__.r = function(exports) {\n \t\tif(typeof Symbol !== 'undefined' && Symbol.toStringTag) {\n \t\t\tObject.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });\n \t\t}\n \t\tObject.defineProperty(exports, '__esModule', { value: true });\n \t};\n\n \t// create a fake namespace object\n \t// mode & 1: value is a module id, require it\n \t// mode & 2: merge all properties of value into the ns\n \t// mode & 4: return value when already ns object\n \t// mode & 8|1: behave like require\n \t__webpack_require__.t = function(value, mode) {\n \t\tif(mode & 1) value = __webpack_require__(value);\n \t\tif(mode & 8) return value;\n \t\tif((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;\n \t\tvar ns = Object.create(null);\n \t\t__webpack_require__.r(ns);\n \t\tObject.defineProperty(ns, 'default', { enumerable: true, value: value });\n \t\tif(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));\n \t\treturn ns;\n \t};\n\n \t// getDefaultExport function for compatibility with non-harmony modules\n \t__webpack_require__.n = function(module) {\n \t\tvar getter = module && module.__esModule ?\n \t\t\tfunction getDefault() { return module['default']; } :\n \t\t\tfunction getModuleExports() { return module; };\n \t\t__webpack_require__.d(getter, 'a', getter);\n \t\treturn getter;\n \t};\n\n \t// Object.prototype.hasOwnProperty.call\n \t__webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };\n\n \t// __webpack_public_path__\n \t__webpack_require__.p = \"/gradex/\";\n\n \tvar jsonpArray = window[\"webpackJsonp\"] = window[\"webpackJsonp\"] || [];\n \tvar oldJsonpFunction = jsonpArray.push.bind(jsonpArray);\n \tjsonpArray.push = webpackJsonpCallback;\n \tjsonpArray = jsonpArray.slice();\n \tfor(var i = 0; i < jsonpArray.length; i++) webpackJsonpCallback(jsonpArray[i]);\n \tvar parentJsonpFunction = oldJsonpFunction;\n\n\n \t// add entry module to deferred list\n \tdeferredModules.push([0,\"chunk-vendors\"]);\n \t// run deferred modules when ready\n \treturn checkDeferredModules();\n","import mod from \"-!../node_modules/mini-css-extract-plugin/dist/loader.js??ref--6-oneOf-1-0!../node_modules/css-loader/index.js??ref--6-oneOf-1-1!../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../node_modules/postcss-loader/src/index.js??ref--6-oneOf-1-2!../node_modules/cache-loader/dist/cjs.js??ref--0-0!../node_modules/vue-loader/lib/index.js??vue-loader-options!./App.vue?vue&type=style&index=0&lang=css&\"; export default mod; export * from \"-!../node_modules/mini-css-extract-plugin/dist/loader.js??ref--6-oneOf-1-0!../node_modules/css-loader/index.js??ref--6-oneOf-1-1!../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../node_modules/postcss-loader/src/index.js??ref--6-oneOf-1-2!../node_modules/cache-loader/dist/cjs.js??ref--0-0!../node_modules/vue-loader/lib/index.js??vue-loader-options!./App.vue?vue&type=style&index=0&lang=css&\"","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{attrs:{\"id\":\"app\"}},[_c('AppInfoDrawer'),_c('GrapeBgDownloader')],1)}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',{ref:\"container\",staticClass:\"gradient-wrap\"},[_c('el-upload',{staticClass:\"avatar-uploader\",attrs:{\"drap\":\"\",\"action\":\"\",\"show-file-list\":false,\"on-change\":_vm.onFileChange,\"auto-upload\":false,\"accept\":\"image/jpeg,image/png,application/x-bmp,image/gif\"}},[(_vm.imageUrl)?[_c('img',{staticClass:\"avatar\",attrs:{\"src\":_vm.imageUrl}})]:[_c('i',{staticClass:\"el-icon-upload\"}),_c('div',{staticClass:\"el-upload__text\"},[_vm._v(\"\\n \"+_vm._s(_vm.$t('upload.tip'))+\"\\n \")]),_c('div',{staticClass:\"el-upload__tip\",attrs:{\"slot\":\"tip\"},slot:\"tip\"},[_vm._v(_vm._s(_vm.$t('upload.supported-files')))])]],2),_c('el-button',{directives:[{name:\"show\",rawName:\"v-show\",value:(_vm.imageUrl),expression:\"imageUrl\"}],staticClass:\"download-btn\",attrs:{\"size\":\"mini\",\"type\":\"success\"},on:{\"click\":_vm.downloadBg}},[_c('i',{staticClass:\"el-icon-download\"}),_vm._v(\" \"+_vm._s(_vm.$t('button.download')))]),_c('el-button',{directives:[{name:\"show\",rawName:\"v-show\",value:(_vm.imageUrl),expression:\"imageUrl\"}],staticClass:\"download-btn\",attrs:{\"size\":\"mini\",\"type\":\"text\"},on:{\"click\":_vm.showHTMLCode}},[_vm._v(_vm._s(_vm.$t('button.copy-html-code')))])],1)}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","\n\n\n\n","import mod from \"-!../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../node_modules/babel-loader/lib/index.js!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./GrapeBgDownloader.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../node_modules/babel-loader/lib/index.js!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./GrapeBgDownloader.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./GrapeBgDownloader.vue?vue&type=template&id=b3b99b3c&\"\nimport script from \"./GrapeBgDownloader.vue?vue&type=script&lang=js&\"\nexport * from \"./GrapeBgDownloader.vue?vue&type=script&lang=js&\"\nimport style0 from \"./GrapeBgDownloader.vue?vue&type=style&index=0&lang=css&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n script,\n render,\n staticRenderFns,\n false,\n null,\n null,\n null\n \n)\n\nexport default component.exports","var render = function () {var _vm=this;var _h=_vm.$createElement;var _c=_vm._self._c||_h;return _c('div',[_c('i',{staticClass:\"el-icon-info drawer-btn\",on:{\"click\":_vm.showDrawer}}),_c('el-drawer',{attrs:{\"custom-class\":\"drawer-style\",\"visible\":_vm.drawer,\"direction\":\"btt\",\"show-close\":false},on:{\"update:visible\":function($event){_vm.drawer=$event}}},[_c('div',{attrs:{\"slot\":\"title\"},slot:\"title\"},[_c('span',[_vm._v(_vm._s(_vm.$t('drawer.title')))]),_c('el-dropdown',{staticClass:\"locale-dropdown\",on:{\"command\":_vm.setAppLocale}},[_c('span',{staticClass:\"dropdown-title\"},[_c('span',[_vm._v(_vm._s(_vm.$t('locale.name')))]),_c('font-awesome-icon',{staticClass:\"lang-icon\",attrs:{\"icon\":\"language\"}})],1),_c('el-dropdown-menu',{attrs:{\"slot\":\"dropdown\"},slot:\"dropdown\"},[_c('el-dropdown-item',{attrs:{\"command\":\"zh\"}},[_vm._v(\"简体中文\")]),_c('el-dropdown-item',{attrs:{\"command\":\"en\"}},[_vm._v(\"English\")])],1)],1)],1),_c('h4',[_vm._v(_vm._s(_vm.$t('drawer.how-to-use.title')))]),_c('p',[_vm._v(_vm._s(_vm.$t('drawer.how-to-use.p1')))]),_c('p',[_vm._v(_vm._s(_vm.$t('drawer.how-to-use.p2')))]),_c('p',[_vm._v(_vm._s(_vm.$t('drawer.how-to-use.p3')))]),_c('p',{staticClass:\"copyright\"},[_vm._v(\"\\n Github:\\n \"),_c('a',{attrs:{\"href\":\"https://github.com/jwenjian/gradex\",\"target\":\"_blank\"}},[_vm._v(\"jwenjian/gradex\")])])])],1)}\nvar staticRenderFns = []\n\nexport { render, staticRenderFns }","\n\n\n\n","import mod from \"-!../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../node_modules/babel-loader/lib/index.js!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./AppInfoDrawer.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../../node_modules/cache-loader/dist/cjs.js??ref--12-0!../../node_modules/babel-loader/lib/index.js!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./AppInfoDrawer.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./AppInfoDrawer.vue?vue&type=template&id=4f260084&\"\nimport script from \"./AppInfoDrawer.vue?vue&type=script&lang=js&\"\nexport * from \"./AppInfoDrawer.vue?vue&type=script&lang=js&\"\nimport style0 from \"./AppInfoDrawer.vue?vue&type=style&index=0&lang=css&\"\n\n\n/* normalize component */\nimport normalizer from \"!../../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n script,\n render,\n staticRenderFns,\n false,\n null,\n null,\n null\n \n)\n\nexport default component.exports","\n\n\n\n\n","import mod from \"-!../node_modules/cache-loader/dist/cjs.js??ref--12-0!../node_modules/babel-loader/lib/index.js!../node_modules/cache-loader/dist/cjs.js??ref--0-0!../node_modules/vue-loader/lib/index.js??vue-loader-options!./App.vue?vue&type=script&lang=js&\"; export default mod; export * from \"-!../node_modules/cache-loader/dist/cjs.js??ref--12-0!../node_modules/babel-loader/lib/index.js!../node_modules/cache-loader/dist/cjs.js??ref--0-0!../node_modules/vue-loader/lib/index.js??vue-loader-options!./App.vue?vue&type=script&lang=js&\"","import { render, staticRenderFns } from \"./App.vue?vue&type=template&id=62633cbe&\"\nimport script from \"./App.vue?vue&type=script&lang=js&\"\nexport * from \"./App.vue?vue&type=script&lang=js&\"\nimport style0 from \"./App.vue?vue&type=style&index=0&lang=css&\"\n\n\n/* normalize component */\nimport normalizer from \"!../node_modules/vue-loader/lib/runtime/componentNormalizer.js\"\nvar component = normalizer(\n script,\n render,\n staticRenderFns,\n false,\n null,\n null,\n null\n \n)\n\nexport default component.exports","import Vue from 'vue'\nimport App from './App.vue'\nimport ElementUI from 'element-ui'\nimport 'element-ui/lib/theme-chalk/index.css'\nimport Grade from 'grade-js'\nimport VueI18n from 'vue-i18n'\nimport { library } from '@fortawesome/fontawesome-svg-core'\nimport { faLanguage } from '@fortawesome/free-solid-svg-icons'\nimport { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'\n\nlibrary.add(faLanguage)\n\nVue.component('font-awesome-icon', FontAwesomeIcon)\nVue.use(VueI18n)\nVue.use(ElementUI)\nVue.config.productionTip = false\n\nwindow.Grade = Grade\n\nconst messages = {\n \"en\": require('./locale/en_US.json'),\n \"zh\": require('./locale/zh_CN.json')\n}\n\nconst i18n = new VueI18n({\n locale: \"en\",\n messages\n})\n\nnew Vue({\n i18n,\n render: h => h(App),\n}).$mount('#app')\n","import mod from \"-!../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--6-oneOf-1-0!../../node_modules/css-loader/index.js??ref--6-oneOf-1-1!../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../node_modules/postcss-loader/src/index.js??ref--6-oneOf-1-2!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./GrapeBgDownloader.vue?vue&type=style&index=0&lang=css&\"; export default mod; export * from \"-!../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--6-oneOf-1-0!../../node_modules/css-loader/index.js??ref--6-oneOf-1-1!../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../node_modules/postcss-loader/src/index.js??ref--6-oneOf-1-2!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./GrapeBgDownloader.vue?vue&type=style&index=0&lang=css&\"","import mod from \"-!../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--6-oneOf-1-0!../../node_modules/css-loader/index.js??ref--6-oneOf-1-1!../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../node_modules/postcss-loader/src/index.js??ref--6-oneOf-1-2!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./AppInfoDrawer.vue?vue&type=style&index=0&lang=css&\"; export default mod; export * from \"-!../../node_modules/mini-css-extract-plugin/dist/loader.js??ref--6-oneOf-1-0!../../node_modules/css-loader/index.js??ref--6-oneOf-1-1!../../node_modules/vue-loader/lib/loaders/stylePostLoader.js!../../node_modules/postcss-loader/src/index.js??ref--6-oneOf-1-2!../../node_modules/cache-loader/dist/cjs.js??ref--0-0!../../node_modules/vue-loader/lib/index.js??vue-loader-options!./AppInfoDrawer.vue?vue&type=style&index=0&lang=css&\""],"sourceRoot":""} -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "gradex", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "serve": "vue-cli-service serve", 7 | "build": "vue-cli-service build", 8 | "lint": "vue-cli-service lint" 9 | }, 10 | "dependencies": { 11 | "@fortawesome/fontawesome-svg-core": "^1.2.22", 12 | "@fortawesome/free-solid-svg-icons": "^5.10.2", 13 | "@fortawesome/vue-fontawesome": "^0.1.6", 14 | "core-js": "^2.6.5", 15 | "element-ui": "^2.11.1", 16 | "grade-js": "^1.0.10", 17 | "vue": "^2.6.10", 18 | "vue-i18n": "^8.14.0" 19 | }, 20 | "devDependencies": { 21 | "@vue/cli-plugin-babel": "^3.11.0", 22 | "@vue/cli-plugin-eslint": "^3.11.0", 23 | "@vue/cli-service": "^3.11.0", 24 | "babel-eslint": "^10.0.1", 25 | "eslint": "^5.16.0", 26 | "eslint-plugin-vue": "^5.0.0", 27 | "vue-template-compiler": "^2.6.10" 28 | }, 29 | "eslintConfig": { 30 | "root": true, 31 | "env": { 32 | "node": true 33 | }, 34 | "extends": [ 35 | "plugin:vue/essential", 36 | "eslint:recommended" 37 | ], 38 | "rules": {}, 39 | "parserOptions": { 40 | "parser": "babel-eslint" 41 | } 42 | }, 43 | "postcss": { 44 | "plugins": { 45 | "autoprefixer": {} 46 | } 47 | }, 48 | "browserslist": [ 49 | "> 1%", 50 | "last 2 versions" 51 | ] 52 | } 53 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jwenjian/gradex/5eee47b708dbc2b0816fb105702792f1c8c1104c/public/favicon.ico -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | Grade X 10 | 11 | 12 | 13 | 24 | 57 | 61 |
62 | 63 | 64 | 65 | -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 7 | 8 | 20 | 21 | 36 | -------------------------------------------------------------------------------- /src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/jwenjian/gradex/5eee47b708dbc2b0816fb105702792f1c8c1104c/src/assets/logo.png -------------------------------------------------------------------------------- /src/components/AppInfoDrawer.vue: -------------------------------------------------------------------------------- 1 | 34 | 35 | 52 | 53 | -------------------------------------------------------------------------------- /src/components/GrapeBgDownloader.vue: -------------------------------------------------------------------------------- 1 | 27 | 28 | 145 | 146 | -------------------------------------------------------------------------------- /src/locale/en_US.json: -------------------------------------------------------------------------------- 1 | { 2 | "locale": { 3 | "name": "English" 4 | }, 5 | "upload": { 6 | "tip": "Drag and drop your image here or click to upload", 7 | "supported-files": "Support only: .jpg / .png / .bmp / .gif" 8 | }, 9 | "drawer": { 10 | "title": "About / Help", 11 | "how-to-use": { 12 | "title": "How to use?", 13 | "p1": "Drap and drop an image file, the app will read 2 majar color of the image then set the background color automatically.", 14 | "p2": "You can click the download button to download the background image file.", 15 | "p3": "Also can click to copy the corresponding html code." 16 | } 17 | }, 18 | "button": { 19 | "download": "Download", 20 | "copy-html-code": "Show HTML code", 21 | "confirm": "Okay" 22 | }, 23 | "message": { 24 | "process-error": "Can't process, refresh then try again.", 25 | "code": "code" 26 | } 27 | } -------------------------------------------------------------------------------- /src/locale/zh_CN.json: -------------------------------------------------------------------------------- 1 | { 2 | "locale": { 3 | "name": "简体中文" 4 | }, 5 | "upload": { 6 | "tip": "将图片拖到此处， 或点击上传", 7 | "supported-files": "支持： .jpg / .png / .bmp / .gif 文件" 8 | }, 9 | "drawer": { 10 | "title": "关于 / 帮助", 11 | "how-to-use": { 12 | "title": "如何使用？", 13 | "p1": "拖拽 / 上传一张图片，程序会自动读取图片的两个主色并将其设置为背景。", 14 | "p2": "你可以点击下载按钮，下载背景图片", 15 | "p3": "也可以点击复制该背景颜色对应的HTML代码。" 16 | } 17 | }, 18 | "button": { 19 | "download": "下载", 20 | "copy-html-code": "查看HTML代码", 21 | "confirm": "确定" 22 | }, 23 | "message": { 24 | "process-error": "处理失败, 刷新页面再试一次吧。", 25 | "code": "代码" 26 | } 27 | } -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App.vue' 3 | import ElementUI from 'element-ui' 4 | import 'element-ui/lib/theme-chalk/index.css' 5 | import Grade from 'grade-js' 6 | import VueI18n from 'vue-i18n' 7 | import { library } from '@fortawesome/fontawesome-svg-core' 8 | import { faLanguage } from '@fortawesome/free-solid-svg-icons' 9 | import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome' 10 | 11 | library.add(faLanguage) 12 | 13 | Vue.component('font-awesome-icon', FontAwesomeIcon) 14 | Vue.use(VueI18n) 15 | Vue.use(ElementUI) 16 | Vue.config.productionTip = false 17 | 18 | window.Grade = Grade 19 | 20 | const messages = { 21 | "en": require('./locale/en_US.json'), 22 | "zh": require('./locale/zh_CN.json') 23 | } 24 | 25 | const i18n = new VueI18n({ 26 | locale: "en", 27 | messages 28 | }) 29 | 30 | new Vue({ 31 | i18n, 32 | render: h => h(App), 33 | }).$mount('#app') 34 | -------------------------------------------------------------------------------- /vue.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | publicPath: "/gradex/", 3 | // for github pages 4 | outputDir: "docs" 5 | } --------------------------------------------------------------------------------