├── docs ├── select.png ├── generate.css ├── generate.js └── index.html ├── README.md ├── .gitignore └── LICENSE /docs/select.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/luffyZh/generate-effective-desktop/HEAD/docs/select.png -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # generate-effective-desktop 2 | 自定义配置颜色文本，生成所需的四格桌面背景图片～ 3 | 4 | ## Features 5 | - bulma 6 | - html2canvas 7 | - javascript-canvas-to-blob 8 | - FileSaver 9 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # See https://help.github.com/ignore-files/ for more about ignoring files. 2 | 3 | # Dependencies 4 | node_modules/ 5 | 6 | # Logs 7 | npm-debug.log* 8 | yarn-debug.log* 9 | yarn-error.log* 10 | logs/ 11 | 12 | # Editors and IDEs 13 | .idea 14 | .vscode/* 15 | 16 | # Misc 17 | .DS_Store 18 | */.DS_Store 19 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2019 luffyZhou 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 | -------------------------------------------------------------------------------- /docs/generate.css: -------------------------------------------------------------------------------- 1 | * { 2 | margin: 0; 3 | padding: 0; 4 | } 5 | 6 | input { 7 | text-align: center; 8 | } 9 | 10 | .checkbox { 11 | width: 20px; 12 | height: 20px; 13 | background-color: #fff; 14 | text-align: center 15 | } 16 | 17 | .checkbox-selected { 18 | background: url('./select.png'); 19 | background-color: #fff; 20 | } 21 | 22 | .generate:hover { 23 | cursor: pointer; 24 | } 25 | 26 | .four-table { 27 | display: flex; 28 | flex-wrap: wrap; 29 | } 30 | 31 | .table-content { 32 | width: 50%; 33 | border: 1px solid #fff; 34 | padding: 10px 20px; 35 | display: flex; 36 | flex-direction: column; 37 | justify-content: center; 38 | align-items: center; 39 | } 40 | 41 | .table-content input { 42 | width: 100%; 43 | margin: 10px 0 44 | } 45 | 46 | .four-row { 47 | display: flex; 48 | flex-wrap: wrap; 49 | } 50 | 51 | .row-content { 52 | width: 100%; 53 | border: 1px solid #fff; 54 | padding: 10px 20px; 55 | display: flex; 56 | align-items: center; 57 | justify-content: space-around 58 | } 59 | 60 | .row-content input { 61 | width: 40%; 62 | } 63 | 64 | .four-column { 65 | display: flex; 66 | } 67 | 68 | .column-content { 69 | width: 25%; 70 | padding: 20px 10px; 71 | border: 1px solid #fff; 72 | display: flex; 73 | flex-direction: column; 74 | align-items: center; 75 | justify-content: space-around; 76 | } 77 | 78 | .column-content input { 79 | width: 100%; 80 | } 81 | 82 | .column { 83 | min-width: 360px; 84 | max-width: 360px; 85 | } 86 | 87 | .message-body { 88 | min-height: 280px; 89 | max-height: 280px; 90 | } 91 | 92 | .table-desktop { 93 | position: absolute; 94 | top: 0; 95 | width: 100%; 96 | height: 100%; 97 | display: flex; 98 | flex-wrap: wrap; 99 | z-index: 99; 100 | } 101 | 102 | .row-desktop { 103 | position: absolute; 104 | top: 0; 105 | width: 100%; 106 | height: 100%; 107 | display: flex; 108 | flex-direction: column; 109 | z-index: 99; 110 | } 111 | 112 | .column-desktop { 113 | position: absolute; 114 | top: 0; 115 | width: 100%; 116 | height: 100%; 117 | display: flex; 118 | z-index: 99; 119 | } 120 | 121 | .download { 122 | z-index: -99; 123 | } -------------------------------------------------------------------------------- /docs/generate.js: -------------------------------------------------------------------------------- 1 | const finalObj = { 2 | screenWidth: window.screen.width * window.devicePixelRatio, 3 | screenHeight: window.screen.height * window.devicePixelRatio, 4 | selectType: 'table', 5 | tableArr: [ 6 | { 7 | text: '应用', 8 | color: '#ffc0cb' 9 | }, { 10 | text: '文档', 11 | color: '#00bfff' 12 | }, { 13 | text: '已完成', 14 | color: '#40e0d0' 15 | }, { 16 | text: '未完成', 17 | color: '#ffdd57' 18 | } 19 | ], 20 | rowArr: [ 21 | { 22 | text: '应用', 23 | color: '#ffc0cb' 24 | }, { 25 | text: '文档', 26 | color: '#00bfff' 27 | }, { 28 | text: '已完成', 29 | color: '#40e0d0' 30 | }, { 31 | text: '未完成', 32 | color: '#ffdd57' 33 | } 34 | ], 35 | columnArr: [ 36 | { 37 | text: '应用', 38 | color: '#ffc0cb' 39 | }, { 40 | text: '文档', 41 | color: '#00bfff' 42 | }, { 43 | text: '已完成', 44 | color: '#40e0d0' 45 | }, { 46 | text: '未完成', 47 | color: '#ffdd57' 48 | } 49 | ] 50 | } 51 | // 手动填写屏幕分辨率 52 | function getScreenParam(_this, type) { 53 | switch(type) { 54 | case 'width': { 55 | finalObj.screenWidth = parseInt(_this.value, 10); 56 | break; 57 | } 58 | case 'height': { 59 | finalObj.screenHeight = parseInt(_this.value, 10); 60 | break; 61 | } 62 | default: 63 | } 64 | } 65 | // 修改文本的变化 66 | function inputTextChange(_this, type, index) { 67 | switch(type) { 68 | case 'table': { 69 | finalObj.tableArr[index - 1].text = _this.value; 70 | break; 71 | } 72 | case 'row': { 73 | finalObj.rowArr[index - 1].text = _this.value; 74 | break; 75 | } 76 | case 'column': { 77 | finalObj.columnArr[index - 1].text = _this.value; 78 | break; 79 | } 80 | default: 81 | } 82 | } 83 | // 修改颜色值的变化 84 | function inputColorChange(_this, type, index) { 85 | switch(type) { 86 | case 'table': { 87 | finalObj.tableArr[index - 1].color = _this.value; 88 | break; 89 | } 90 | case 'row': { 91 | finalObj.rowArr[index - 1].color = _this.value; 92 | break; 93 | } 94 | case 'column': { 95 | finalObj.columnArr[index - 1].color = _this.value; 96 | break; 97 | } 98 | default: 99 | } 100 | } 101 | // 修改选择的类型 102 | function changeSelectType(type) { 103 | finalObj.selectType = type; 104 | const checkboxElems = Array.from(document.getElementsByClassName('checkbox')); 105 | checkboxElems.forEach(item => { 106 | item.className = 'checkbox'; 107 | if (item.getAttribute('name') === type) { 108 | item.className += ' checkbox-selected'; 109 | } 110 | }); 111 | } 112 | // 生成预览图片 113 | function previewDesktop() { 114 | const childElems = Array.from(document.getElementById(`preview-${finalObj.selectType}`).children); 115 | childElems.forEach((item, index) => { 116 | item.style.backgroundColor = finalObj[`${finalObj.selectType}Arr`][index].color; 117 | item.innerHTML = 118 | `
119 |

${finalObj[`${finalObj.selectType}Arr`][index].text}

120 |
` 121 | }); 122 | document.getElementById(`preview-${finalObj.selectType}`).style.display = 'flex'; 123 | } 124 | // 生成下载图片 125 | function generateDesktop() { 126 | const downloadDom = document.getElementById(`download-${finalObj.selectType}`); 127 | downloadDom.style.width = finalObj.screenWidth / 2 + 'px'; 128 | downloadDom.style.height = finalObj.screenHeight / 2 + 'px'; 129 | const childElems = Array.from(downloadDom.children); 130 | childElems.forEach((item, index) => { 131 | item.style.backgroundColor = finalObj[`${finalObj.selectType}Arr`][index].color; 132 | item.innerHTML = 133 | `
134 |

${finalObj[`${finalObj.selectType}Arr`][index].text}

135 |
` 136 | }); 137 | convert2canvas(downloadDom); 138 | } 139 | // 预览的时候点击消失 140 | Array.from(document.getElementsByClassName('preview')).forEach(item => { 141 | item.addEventListener('click', function(e) { 142 | e.target.parentNode.style.display = 'none'; 143 | }); 144 | }); 145 | // 将html转换成canvas 146 | function convert2canvas(targetDom) { 147 | const width = parseInt(targetDom.style.width, 10); //获取dom 宽度 148 | const height = parseInt(targetDom.style.height, 10); //获取dom 高度 149 | const canvas = document.createElement("canvas"); //创建一个canvas节点 150 | const scale = window.devicePixelRatio; //定义任意放大倍数 支持小数 151 | canvas.width = width * scale; //定义canvas 宽度 * 缩放 152 | canvas.height = height * scale; //定义canvas 高度 *缩放 153 | canvas.getContext("2d").scale(scale, scale); //获取context,设置scale 154 | const opts = { 155 | scale: scale, // 添加的scale 参数 156 | canvas: canvas, //自定义 canvas 157 | width: width, //dom 原始宽度 158 | height: height, 159 | useCORS: true // 【重要】开启跨域配置 160 | }; 161 | 162 | html2canvas(targetDom, opts).then(canvas => { 163 | targetDom.style.display = 'none'; 164 | var context = canvas.getContext('2d'); 165 | // 【重要】关闭抗锯齿 166 | context.mozImageSmoothingEnabled = false; 167 | context.webkitImageSmoothingEnabled = false; 168 | context.msImageSmoothingEnabled = false; 169 | context.imageSmoothingEnabled = false; 170 | /* ... your canvas manipulations ... */ 171 | if (canvas.toBlob) { 172 | canvas.toBlob( 173 | function (blob) { 174 | saveAs(blob, 'Effective-Desktop.png'); 175 | }, 176 | 'image/png' 177 | ); 178 | } 179 | }); 180 | } -------------------------------------------------------------------------------- /docs/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | Generate-Effective-Desktop 11 | 12 | 13 |
14 |
15 |
16 |

可配置生成效率桌面

17 |

[温馨提示]:为保证效果，请将浏览器窗口调整至最大化～

18 |
19 |
20 |
21 |
22 |
23 |
24 |
25 | 生成预览 26 | 点击下载 27 |
28 |
29 |
屏幕宽：px
30 |
屏幕高：px
31 |
32 |
33 | [提示]：如不填写，系统会按照浏览器最大化窗口为您自动匹配电脑屏幕分辨率～ 34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |

四格型

44 | 45 |
46 |
47 |
48 | 49 | 50 |
51 |
52 | 53 | 54 |
55 |
56 | 57 | 58 |
59 |
60 | 61 | 62 |
63 |
64 |
65 |
66 |
67 |
68 |
69 |

四行型

70 | 71 |
72 |
73 |
74 | 75 | 76 |
77 |
78 | 79 | 80 |
81 |
82 | 83 | 84 |
85 |
86 | 87 | 88 |
89 |
90 |
91 |
92 |
93 |
94 |
95 |

四列型

96 | 97 |
98 |
99 |
100 | 101 | 102 |
103 |
104 | 105 | 106 |
107 |
108 | 109 | 110 |
111 |
112 | 113 | 114 |
115 |
116 |
117 |
118 |
119 |
120 | 138 | 144 | 150 | 156 |
157 |
158 |
159 |
160 |
161 |
162 |
163 |
164 |
165 |
166 |
167 |
168 |
169 |
170 |
171 |
172 |
173 |
174 | 175 | 176 | 177 | 178 | 179 | 180 | 181 | --------------------------------------------------------------------------------