├── README.md ├── .github └── workflows │ └── static.yml ├── generate9.css ├── generate9text.css ├── lipu.css ├── generate9text.js ├── generate9.js ├── lipu.js ├── text.html ├── index.html └── lipu.html /README.md: -------------------------------------------------------------------------------- 1 | # 阵营九宫格（Alignment Chart）生成器 2 | 3 | HTML / JS / CSS 的练手项目... 4 | 5 | 代码很糟糕...还请见谅... 6 | 7 | ## 使用 8 | 9 | 输入文字 选择图片 点击生成即可 10 | 11 | ## 配置项 12 | 13 | - 阵营、文字、图片 14 | - 各个字体大小 15 | - 图片大小 16 | 17 | ## 更新历史 18 | 19 | * 2019/1/21 增加作者和水印选项 20 | 21 | * 2019/1/20 增加文字版本生成 22 | 23 | - 2019/1/15 初版上线 24 | 25 | -------------------------------------------------------------------------------- /.github/workflows/static.yml: -------------------------------------------------------------------------------- 1 | # Simple workflow for deploying static content to GitHub Pages 2 | name: Deploy static content to Pages 3 | 4 | on: 5 | # Runs on pushes targeting the default branch 6 | push: 7 | branches: ["master"] 8 | 9 | # Allows you to run this workflow manually from the Actions tab 10 | workflow_dispatch: 11 | 12 | # Sets permissions of the GITHUB_TOKEN to allow deployment to GitHub Pages 13 | permissions: 14 | contents: read 15 | pages: write 16 | id-token: write 17 | 18 | # Allow only one concurrent deployment, skipping runs queued between the run in-progress and latest queued. 19 | # However, do NOT cancel in-progress runs as we want to allow these production deployments to complete. 20 | concurrency: 21 | group: "pages" 22 | cancel-in-progress: false 23 | 24 | jobs: 25 | # Single deploy job since we're just deploying 26 | deploy: 27 | environment: 28 | name: github-pages 29 | url: ${{ steps.deployment.outputs.page_url }} 30 | runs-on: ubuntu-latest 31 | steps: 32 | - name: Checkout 33 | uses: actions/checkout@v4 34 | - name: Setup Pages 35 | uses: actions/configure-pages@v4 36 | - name: Upload artifact 37 | uses: actions/upload-pages-artifact@v3 38 | with: 39 | # Upload entire repository 40 | path: '.' 41 | - name: Deploy to GitHub Pages 42 | id: deployment 43 | uses: actions/deploy-pages@v4 44 | -------------------------------------------------------------------------------- /generate9.css: -------------------------------------------------------------------------------- 1 | /* table { 2 | border: 1px solid black; 3 | } */ 4 | 5 | /* td { 6 | border: 0.5px solid #000000; 7 | } */ 8 | 9 | #nine-by-nine{ 10 | table-layout: fixed; 11 | width: 900px; 12 | height: 900px; 13 | border: none; 14 | } 15 | 16 | #nine-by-nine > tbody > tr > td { 17 | width: 33%; 18 | height: 33%; 19 | padding: 1%; 20 | border: none; 21 | } 22 | 23 | #nine-by-nine > tbody > tr > td > table { 24 | height: 100%; 25 | width: 100%; 26 | } 27 | 28 | #nine-by-nine > tbody > tr > td > table > tbody { 29 | height: 100%; 30 | width: 100%; 31 | } 32 | 33 | #nine-by-nine > tbody > tr > td > table > tbody > .cell-img { 34 | height: 70%; 35 | } 36 | 37 | #nine-by-nine > tbody > tr > td > table > tbody > .cell-img > td { 38 | height: 70%; 39 | } 40 | 41 | .text { 42 | text-align: center; 43 | color: white; 44 | } 45 | 46 | .type { 47 | /* font-size: larger; */ 48 | font-weight: bolder; 49 | } 50 | 51 | .img_preview{ 52 | display: none; 53 | } 54 | 55 | #final-div{ 56 | background-color: black; 57 | } 58 | 59 | #final-title{ 60 | text-align: center; 61 | font-weight: bolder; 62 | color: white; 63 | } 64 | 65 | #final-watermark{ 66 | text-align: center; 67 | color:white; 68 | font-size: 16px; 69 | } 70 | 71 | #final-author{ 72 | text-align: right; 73 | color:white; 74 | } 75 | 76 | /* .cell-img > img { 77 | height: inherit; */ 78 | /* .img-repsonsive(); */ 79 | /* .center-block(); */ 80 | /* } */ 81 | 82 | /* #nine-by-nine > tbody > tr > td > .text{ 83 | text-align: center; 84 | } 85 | 86 | #nine-by-nine > tbody > tr > td > .text */ -------------------------------------------------------------------------------- /generate9text.css: -------------------------------------------------------------------------------- 1 | /* table { 2 | border: 1px solid black; 3 | } */ 4 | 5 | /* td { 6 | border: 0.5px solid #000000; 7 | } */ 8 | 9 | #nine-by-nine{ 10 | table-layout: fixed; 11 | width: 900px; 12 | height: 900px; 13 | border: none; 14 | } 15 | 16 | #nine-by-nine > tbody > tr > td { 17 | width: 33%; 18 | height: 33%; 19 | padding: 1%; 20 | border: none; 21 | } 22 | 23 | #nine-by-nine > tbody > tr > td > table { 24 | height: 100%; 25 | width: 100%; 26 | } 27 | 28 | #nine-by-nine > tbody > tr > td > table > tbody { 29 | height: 100%; 30 | width: 100%; 31 | } 32 | 33 | #nine-by-nine > tbody > tr > td > table > tbody > .cell-img { 34 | height: 70%; 35 | color: white; 36 | text-align: center; 37 | } 38 | 39 | #nine-by-nine > tbody > tr > td > table > tbody > .cell-img > td { 40 | height: 70%; 41 | } 42 | 43 | .text { 44 | text-align: center; 45 | color: white; 46 | } 47 | 48 | .type { 49 | /* font-size: larger; */ 50 | font-weight: bolder; 51 | } 52 | 53 | .file-box{ 54 | display: none; 55 | border: 1px solid black; 56 | } 57 | 58 | .img_preview{ 59 | display: none; 60 | } 61 | 62 | #final-div{ 63 | background-color: black; 64 | } 65 | 66 | #final-title{ 67 | text-align: center; 68 | font-weight: bolder; 69 | color: white; 70 | } 71 | 72 | #final-watermark{ 73 | text-align: center; 74 | color:white; 75 | font-size: 16px; 76 | } 77 | 78 | #final-author{ 79 | text-align: right; 80 | color:white; 81 | } 82 | /* .cell-img > img { 83 | height: inherit; */ 84 | /* .img-repsonsive(); */ 85 | /* .center-block(); */ 86 | /* } */ 87 | 88 | /* #nine-by-nine > tbody > tr > td > .text{ 89 | text-align: center; 90 | } 91 | 92 | #nine-by-nine > tbody > tr > td > .text */ -------------------------------------------------------------------------------- /lipu.css: -------------------------------------------------------------------------------- 1 | /* table { 2 | border: 1px solid black; 3 | } */ 4 | 5 | /* td { 6 | border: 0.5px solid #000000; 7 | } */ 8 | 9 | #four-by-four{ 10 | table-layout: fixed; 11 | width: 900px; 12 | height: 900px; 13 | border: none; 14 | } 15 | 16 | #four-by-four > tbody > tr > td { 17 | width: 30%; 18 | height: 24%; 19 | padding: 1%; 20 | border: none; 21 | } 22 | 23 | #four-by-four > tbody > tr:first-child > td { 24 | height: 10%; 25 | } 26 | 27 | 28 | /* #four-by-four > tbody > tr:first-child > td > table > tbody{ 29 | height: unset; 30 | } 31 | 32 | 33 | #four-by-four > tbody > tr:first-child > td > table{ 34 | height: unset; 35 | } */ 36 | 37 | 38 | #four-by-four > tbody > tr > td > table { 39 | height: 100%; 40 | width: 100%; 41 | } 42 | 43 | #four-by-four > tbody > tr > td > table > tbody { 44 | height: 100%; 45 | width: 100%; 46 | } 47 | 48 | #four-by-four > tbody > tr > td > table > tbody > .cell-img { 49 | height: 70%; 50 | } 51 | 52 | #four-by-four > tbody > tr > td > table > tbody > .cell-img > td { 53 | height: 70%; 54 | } 55 | 56 | .text { 57 | text-align: center; 58 | color: black; 59 | } 60 | 61 | .word { 62 | text-align: center; 63 | color: rgb(29, 28, 28); 64 | } 65 | 66 | .type { 67 | /* font-size: larger; */ 68 | font-weight: bolder; 69 | } 70 | 71 | .img_preview{ 72 | display: none; 73 | } 74 | 75 | #final-div{ 76 | background-color: white; 77 | } 78 | 79 | #final-title{ 80 | text-align: center; 81 | font-weight: bolder; 82 | color: black; 83 | } 84 | 85 | #final-watermark{ 86 | text-align: center; 87 | color:black; 88 | font-size: 16px; 89 | } 90 | 91 | #final-author{ 92 | text-align: right; 93 | color:black; 94 | } 95 | 96 | /* .cell-img > img { 97 | height: inherit; */ 98 | /* .img-repsonsive(); */ 99 | /* .center-block(); */ 100 | /* } */ 101 | 102 | /* #four-by-four > tbody > tr > td > .text{ 103 | text-align: center; 104 | } 105 | 106 | #four-by-four > tbody > tr > td > .text */ -------------------------------------------------------------------------------- /generate9text.js: -------------------------------------------------------------------------------- 1 | 2 | function toggle_pro_mode(){ 3 | $("#pro_mode_div").fadeToggle(); 4 | } 5 | 6 | 7 | function final_table() { 8 | 9 | // generate table 10 | var lasttable = document.getElementById('final-div'); 11 | if (lasttable != null) { 12 | lasttable.parentNode.removeChild(lasttable); 13 | } 14 | 15 | 16 | var data = []; 17 | 18 | var color = ["#fdfdfd","#c2c2c2","#9444bc","#c27c32","#6ca65c","#d3de9a","#9f9c9d","#4259a7","#c11417"]; 19 | 20 | // get input 21 | var input_table = document.getElementById('input_table'); 22 | var table_rows = input_table.children; 23 | for (var i = 0; i < table_rows.length; i++) { 24 | var table_cells = table_rows[i].children; 25 | for (var j = 0; j < table_cells.length; j++) { 26 | var table_cell = table_cells[j]; 27 | var cell_data = table_cell.firstElementChild; 28 | data.push(cell_data); 29 | // console.log(table_cell.firstElementChild); 30 | } 31 | } 32 | 33 | // console.log(data); 34 | 35 | var table_width = document.getElementById('width').value; 36 | var table_height = document.getElementById('height').value; 37 | var cell_width = table_width/3; 38 | var cell_height = table_height/3; 39 | var img_height = cell_height*0.7*0.9; 40 | var img_width = cell_width*0.9; 41 | var title_size = document.getElementById('size0').value; 42 | var type_size = document.getElementById('size1').value; 43 | var word_size = document.getElementById('size2').value; 44 | 45 | var title = document.getElementById('title').value; 46 | var author = document.getElementById("creator").value; 47 | 48 | //generate new table 49 | var final_div = document.createElement('div'); 50 | final_div.id = "final-div"; 51 | final_div.style.cssText+="width:"+table_width+"px;"; 52 | console.log(final_div.style.cssText); 53 | console.log("here!"); 54 | document.getElementById('table_show').appendChild(final_div); 55 | 56 | 57 | if(title.length!=0){ 58 | var final_title = document.createElement('p'); 59 | final_title.style.cssText+="font-size:"+title_size+"px;" 60 | final_title.textContent = title; 61 | final_title.id = 'final-title'; 62 | final_div.appendChild(final_title); 63 | } 64 | 65 | if(author.length!=0){ 66 | var final_author = document.createElement('p'); 67 | final_author.style.cssText+="font-size:"+title_size/4+"px;" 68 | final_author.style.cssText+="margin-right:"+table_width/100+"px;" 69 | final_author.textContent = author; 70 | final_author.id = 'final-author'; 71 | final_div.appendChild(final_author); 72 | } 73 | 74 | 75 | var final_table = document.createElement('table'); 76 | final_div.appendChild(final_table); 77 | final_table.style.cssText+="background-color: black;table-layout: fixed; height:"+table_width+"px; width:"+table_height+"px;"; 78 | final_table.classList.add('table'); 79 | final_table.classList.add('table-bordered'); 80 | final_table.id = 'nine-by-nine'; 81 | 82 | var final_table_c = final_table; 83 | 84 | if(document.getElementById("watermark").checked){ 85 | var final_watermark = document.createElement("p"); 86 | final_watermark.id = "final-watermark"; 87 | final_watermark.style.cssText+="width:"+table_width+"px;"; 88 | final_watermark.innerHTML="由⑨宫格生成器生成
https://nekonull.me/9" 89 | final_div.appendChild(final_watermark); 90 | } 91 | 92 | 93 | 94 | 95 | final_table = document.createElement('tbody'); 96 | final_table_c.appendChild(final_table); 97 | 98 | for (var i = 0; i < 3; i++) { 99 | var row = document.createElement('tr'); 100 | final_table.appendChild(row); 101 | for (var j = 0; j < 3; j++) { 102 | var cell = document.createElement('td'); 103 | cell.classList.add('cell'); 104 | row.appendChild(cell); 105 | 106 | var cell_table = document.createElement('table'); 107 | cell.appendChild(cell_table); 108 | var cell_tbody = document.createElement('tbody'); 109 | cell_table.appendChild(cell_tbody); 110 | var cell_tr_img = document.createElement('tr'); 111 | cell_tr_img.classList.add('cell-img'); 112 | cell_tr_img.style.cssText+="border: 1px solid "+color[3*i+j]+";"; 113 | var cell_tr_text = document.createElement('tr'); 114 | cell_tbody.appendChild(cell_tr_img); 115 | cell_tbody.appendChild(cell_tr_text); 116 | var cell_tr_img_td = document.createElement('td'); 117 | var cell_tr_text_td = document.createElement('td'); 118 | cell_tr_text_td.classList.add("text"); 119 | cell_tr_img.appendChild(cell_tr_img_td); 120 | cell_tr_text.appendChild(cell_tr_text_td); 121 | 122 | // var imgn = document.createElement('img'); 123 | // var srcimg = data[3*i + j].children[2].children[0]; 124 | // imgn.src = srcimg.src; 125 | // imgn.classList.add("center-block"); 126 | // imgn.classList.add("img-repsonsive"); 127 | // var img_new_height=0; 128 | // var img_new_width=0; 129 | 130 | // if(srcimg.height/img_height>srcimg.width/img_width){ 131 | // imgn.style.cssText+="height: "+img_height+"px;" 132 | // imgn.style.cssText+="width: "+srcimg.width * img_height / srcimg.height +"px;" 133 | // } else { 134 | // imgn.style.cssText+="width: "+img_width+"px;" 135 | // imgn.style.cssText+="height: "+srcimg.height * img_width / srcimg.width +"px;" 136 | // } 137 | 138 | // cell_tr_img_td.appendChild(imgn); 139 | 140 | var typew = document.createElement('div'); 141 | typew.textContent = data[3*i + j].children[0].value; 142 | typew.classList.add("type"); 143 | typew.style.cssText+="font-size: "+type_size+"px;"; 144 | typew.style.cssText+="color: "+color[3*i+j]+";"; 145 | cell_tr_text_td.appendChild(typew); 146 | 147 | var wordw = document.createElement('div'); 148 | wordw.textContent = data[3*i + j].children[1].value; 149 | wordw.classList.add("word"); 150 | wordw.style.cssText+="font-size: "+word_size+"px;"; 151 | // cell_tr_text_td.appendChild(wordw); 152 | cell_tr_img_td.appendChild(wordw); 153 | } 154 | } 155 | 156 | 157 | 158 | // get picture 159 | // draw(); 160 | 161 | } 162 | 163 | function draw(){ 164 | 165 | var cont = document.getElementById('img_show_container'); 166 | 167 | while (cont.firstChild) { 168 | cont.removeChild(cont.firstChild); 169 | } 170 | 171 | html2canvas(document.getElementById('final-div'), { 172 | onrendered: function(canvas){ 173 | document.getElementById('img_show_container').appendChild(canvas); 174 | var table = document.getElementById('final-div'); 175 | table.parentNode.removeChild(table); 176 | } 177 | }); 178 | 179 | 180 | // table.style.cssText+="visability: hidden;"; 181 | } 182 | 183 | function wrapText(context, text, x, y, maxWidth, lineHeight) { 184 | var words = text.split(''); 185 | var line = ''; 186 | 187 | for (var n = 0; n < words.length; n++) { 188 | var testLine = line + words[n] + ''; 189 | var metrics = context.measureText(testLine); 190 | var testWidth = metrics.width; 191 | if (testWidth > maxWidth && n > 0) { 192 | context.fillText(line, x, y); 193 | line = words[n] + ''; 194 | y += lineHeight; 195 | } 196 | else { 197 | line = testLine; 198 | } 199 | } 200 | context.fillText(line, x, y); 201 | } 202 | 203 | 204 | function imgPreview(fileDom) { 205 | //判断是否支持FileReader 206 | if (window.FileReader) { 207 | var reader = new FileReader(); 208 | } else { 209 | alert("您的设备不支持图片预览功能，如需该功能请升级您的设备！"); 210 | } 211 | //获取文件 212 | var file = fileDom.files[0]; 213 | var imageType = /^image\//; 214 | //是否是图片 215 | if (!imageType.test(file.type)) { 216 | alert("请选择图片！"); 217 | return; 218 | } 219 | var father = fileDom.parentNode; 220 | var img = father.firstElementChild; 221 | //读取完成 222 | reader.onload = function (e) { 223 | //获取图片dom 224 | // var img = document.getElementById("preview"); 225 | //图片路径设置为读取的图片 226 | img.src = e.target.result; 227 | }; 228 | reader.readAsDataURL(file); 229 | // img.style.cssText="display: none;" 230 | } -------------------------------------------------------------------------------- /generate9.js: -------------------------------------------------------------------------------- 1 | 2 | function toggle_pro_mode(){ 3 | $("#pro_mode_div").fadeToggle(); 4 | } 5 | 6 | function final_table() { 7 | 8 | // generate table 9 | var lasttable = document.getElementById('final-div'); 10 | if (lasttable != null) { 11 | lasttable.parentNode.removeChild(lasttable); 12 | } 13 | 14 | 15 | var data = []; 16 | 17 | var color = ["#fdfdfd","#c2c2c2","#9444bc","#c27c32","#6ca65c","#d3de9a","#9f9c9d","#4259a7","#c11417"]; 18 | 19 | // get input 20 | var input_table = document.getElementById('input_table'); 21 | var table_rows = input_table.children; 22 | for (var i = 0; i < table_rows.length; i++) { 23 | var table_cells = table_rows[i].children; 24 | for (var j = 0; j < table_cells.length; j++) { 25 | var table_cell = table_cells[j]; 26 | var cell_data = table_cell.firstElementChild; 27 | data.push(cell_data); 28 | // console.log(table_cell.firstElementChild); 29 | } 30 | } 31 | 32 | // console.log(data); 33 | 34 | var table_width = document.getElementById('width').value; 35 | var table_height = document.getElementById('height').value; 36 | var cell_width = table_width/3; 37 | var cell_height = table_height/3; 38 | var img_height = cell_height*0.7*0.9; 39 | var img_width = cell_width*0.9; 40 | var title_size = document.getElementById('size0').value; 41 | var type_size = document.getElementById('size1').value; 42 | var word_size = document.getElementById('size2').value; 43 | 44 | var title = document.getElementById('title').value; 45 | var author = document.getElementById("creator").value; 46 | 47 | //generate new table 48 | var final_div = document.createElement('div'); 49 | final_div.id = "final-div"; 50 | final_div.style.cssText+="width:"+table_width+"px;"; 51 | console.log(final_div.style.cssText); 52 | console.log("here!"); 53 | document.getElementById('table_show').appendChild(final_div); 54 | 55 | if(title.length!=0){ 56 | var final_title = document.createElement('p'); 57 | final_title.style.cssText+="font-size:"+title_size+"px;" 58 | final_title.textContent = title; 59 | final_title.id = 'final-title'; 60 | final_div.appendChild(final_title); 61 | } 62 | 63 | if(author.length!=0){ 64 | var final_author = document.createElement('p'); 65 | final_author.style.cssText+="font-size:"+title_size/4+"px;" 66 | final_author.style.cssText+="margin-right:"+table_width/100+"px;" 67 | final_author.textContent = author; 68 | final_author.id = 'final-author'; 69 | final_div.appendChild(final_author); 70 | } 71 | 72 | 73 | var final_table = document.createElement('table'); 74 | final_div.appendChild(final_table); 75 | final_table.style.cssText+="background-color: black;table-layout: fixed; height:"+table_width+"px; width:"+table_height+"px;"; 76 | final_table.classList.add('table'); 77 | final_table.classList.add('table-bordered'); 78 | final_table.id = 'nine-by-nine'; 79 | 80 | var final_table_c = final_table; 81 | 82 | if(document.getElementById("watermark").checked){ 83 | var final_watermark = document.createElement("p"); 84 | final_watermark.id = "final-watermark"; 85 | final_watermark.style.cssText+="width:"+table_width+"px;"; 86 | final_watermark.innerHTML="由⑨宫格生成器生成
https://nekonull.me/9" 87 | final_div.appendChild(final_watermark); 88 | } 89 | 90 | 91 | 92 | 93 | final_table = document.createElement('tbody'); 94 | final_table_c.appendChild(final_table); 95 | 96 | for (var i = 0; i < 3; i++) { 97 | var row = document.createElement('tr'); 98 | final_table.appendChild(row); 99 | for (var j = 0; j < 3; j++) { 100 | var cell = document.createElement('td'); 101 | cell.classList.add('cell'); 102 | row.appendChild(cell); 103 | 104 | var cell_table = document.createElement('table'); 105 | cell.appendChild(cell_table); 106 | var cell_tbody = document.createElement('tbody'); 107 | cell_table.appendChild(cell_tbody); 108 | var cell_tr_img = document.createElement('tr'); 109 | cell_tr_img.classList.add('cell-img'); 110 | cell_tr_img.style.cssText+="border: 1px solid "+color[3*i+j]+";"; 111 | var cell_tr_text = document.createElement('tr'); 112 | cell_tbody.appendChild(cell_tr_img); 113 | cell_tbody.appendChild(cell_tr_text); 114 | var cell_tr_img_td = document.createElement('td'); 115 | var cell_tr_text_td = document.createElement('td'); 116 | cell_tr_text_td.classList.add("text"); 117 | cell_tr_img.appendChild(cell_tr_img_td); 118 | cell_tr_text.appendChild(cell_tr_text_td); 119 | 120 | var imgn = document.createElement('img'); 121 | var srcimg = data[3*i + j].children[2].children[0]; 122 | imgn.src = srcimg.src; 123 | imgn.classList.add("center-block"); 124 | imgn.classList.add("img-repsonsive"); 125 | var img_new_height=0; 126 | var img_new_width=0; 127 | 128 | if(srcimg.height/img_height>srcimg.width/img_width){ 129 | imgn.style.cssText+="height: "+img_height+"px;" 130 | imgn.style.cssText+="width: "+srcimg.width * img_height / srcimg.height +"px;" 131 | } else { 132 | imgn.style.cssText+="width: "+img_width+"px;" 133 | imgn.style.cssText+="height: "+srcimg.height * img_width / srcimg.width +"px;" 134 | } 135 | 136 | cell_tr_img_td.appendChild(imgn); 137 | 138 | var typew = document.createElement('div'); 139 | typew.textContent = data[3*i + j].children[0].value; 140 | typew.classList.add("type"); 141 | typew.style.cssText+="font-size: "+type_size+"px;"; 142 | typew.style.cssText+="color: "+color[3*i+j]+";"; 143 | cell_tr_text_td.appendChild(typew); 144 | 145 | var wordw = document.createElement('div'); 146 | wordw.textContent = data[3*i + j].children[1].value; 147 | wordw.classList.add("word"); 148 | wordw.style.cssText+="font-size: "+word_size+"px;"; 149 | cell_tr_text_td.appendChild(wordw); 150 | } 151 | } 152 | 153 | 154 | 155 | // get picture 156 | // draw(); 157 | 158 | } 159 | 160 | function draw(){ 161 | 162 | var cont = document.getElementById('img_show_container'); 163 | 164 | while (cont.firstChild) { 165 | cont.removeChild(cont.firstChild); 166 | } 167 | 168 | html2canvas(document.getElementById('final-div'), { 169 | onrendered: function(canvas){ 170 | document.getElementById('img_show_container').appendChild(canvas); 171 | var table = document.getElementById('final-div'); 172 | table.parentNode.removeChild(table); 173 | } 174 | }); 175 | 176 | 177 | // table.style.cssText+="visability: hidden;"; 178 | } 179 | 180 | function wrapText(context, text, x, y, maxWidth, lineHeight) { 181 | var words = text.split(''); 182 | var line = ''; 183 | 184 | for (var n = 0; n < words.length; n++) { 185 | var testLine = line + words[n] + ''; 186 | var metrics = context.measureText(testLine); 187 | var testWidth = metrics.width; 188 | if (testWidth > maxWidth && n > 0) { 189 | context.fillText(line, x, y); 190 | line = words[n] + ''; 191 | y += lineHeight; 192 | } 193 | else { 194 | line = testLine; 195 | } 196 | } 197 | context.fillText(line, x, y); 198 | } 199 | 200 | 201 | function imgPreview(fileDom) { 202 | //判断是否支持FileReader 203 | if (window.FileReader) { 204 | var reader = new FileReader(); 205 | } else { 206 | alert("您的设备不支持图片预览功能，如需该功能请升级您的设备！"); 207 | } 208 | //获取文件 209 | var file = fileDom.files[0]; 210 | var imageType = /^image\//; 211 | //是否是图片 212 | if (!imageType.test(file.type)) { 213 | alert("请选择图片！"); 214 | return; 215 | } 216 | var father = fileDom.parentNode; 217 | var img = father.firstElementChild; 218 | //读取完成 219 | reader.onload = function (e) { 220 | //获取图片dom 221 | // var img = document.getElementById("preview"); 222 | //图片路径设置为读取的图片 223 | img.src = e.target.result; 224 | }; 225 | reader.readAsDataURL(file); 226 | img.style.cssText="display: block;" 227 | } 228 | 229 | // 支持直接粘贴图片 230 | function handlePaste(event) { 231 | var items = (event.clipboardData || event.originalEvent.clipboardData).items; 232 | var targetElement = event.target; 233 | if (targetElement.tagName === 'INPUT') { 234 | targetElement = targetElement.parentElement; 235 | } 236 | for (var index in items) { 237 | var item = items[index]; 238 | if (item.kind === 'file') { 239 | var blob = item.getAsFile(); 240 | var reader = new FileReader(); 241 | reader.onload = function(event){ 242 | var imgElement = targetElement.querySelector('.img-preview'); 243 | 244 | console.log("imgElement", imgElement); 245 | if (imgElement) { 246 | imgElement.src = event.target.result; 247 | } 248 | }; 249 | reader.readAsDataURL(blob); 250 | } 251 | } 252 | targetElement.querySelector('.img-preview').style.cssText="display: block;" 253 | } 254 | 255 | function clearImage(event) { 256 | var targetElement = event.target; 257 | if (targetElement.tagName === 'BUTTON') { 258 | targetElement = targetElement.parentElement; 259 | } 260 | targetElement.querySelector('.img-preview').src = ''; 261 | targetElement.querySelector('.img-preview').style.cssText="display: none;" 262 | targetElement.querySelector('#input_file').value = ''; 263 | } -------------------------------------------------------------------------------- /lipu.js: -------------------------------------------------------------------------------- 1 | 2 | function toggle_pro_mode(){ 3 | $("#pro_mode_div").fadeToggle(); 4 | } 5 | 6 | function final_table() { 7 | 8 | // generate table 9 | var lasttable = document.getElementById('final-div'); 10 | if (lasttable != null) { 11 | lasttable.parentNode.removeChild(lasttable); 12 | } 13 | 14 | 15 | var data = []; 16 | 17 | var color = ["#000000","#3d3d3d","#9444bc","#c27c32","#6ca65c","#7d8f21","#9f9c9d","#4259a7","#c11417"]; 18 | 19 | // get input 20 | var input_table = document.getElementById('input_table'); 21 | var table_rows = input_table.children; 22 | for (var i = 0; i < table_rows.length; i++) { 23 | var table_cells = table_rows[i].children; 24 | for (var j = 0; j < table_cells.length; j++) { 25 | var table_cell = table_cells[j]; 26 | var cell_data = table_cell.firstElementChild; 27 | data.push(cell_data); 28 | // console.log(table_cell.firstElementChild); 29 | } 30 | } 31 | 32 | // console.log(data); 33 | 34 | var table_width = document.getElementById('width').value; 35 | var table_height = document.getElementById('height').value; 36 | var cell_width = table_width/4; 37 | var cell_height = table_height/4; 38 | 39 | var first_row_height = cell_height/2; 40 | var first_col_width = cell_width*0.75; 41 | 42 | var img_height = cell_height*0.7*0.9; 43 | var img_width = cell_width*0.9; 44 | var title_size = document.getElementById('size0').value; 45 | var type_size = document.getElementById('size1').value; 46 | var word_size = document.getElementById('size2').value; 47 | var internal_size = document.getElementById('size3').value; 48 | 49 | var title = document.getElementById('title').value; 50 | var author = document.getElementById("creator").value; 51 | 52 | //generate new table 53 | var final_div = document.createElement('div'); 54 | final_div.id = "final-div"; 55 | final_div.style.cssText+="width:"+table_width+"px;"; 56 | console.log(final_div.style.cssText); 57 | console.log("here!"); 58 | document.getElementById('table_show').appendChild(final_div); 59 | 60 | if(title.length!=0){ 61 | var final_title = document.createElement('p'); 62 | final_title.style.cssText+="font-size:"+title_size+"px;" 63 | final_title.textContent = title; 64 | final_title.id = 'final-title'; 65 | final_div.appendChild(final_title); 66 | } 67 | 68 | if(author.length!=0){ 69 | var final_author = document.createElement('p'); 70 | final_author.style.cssText+="font-size:"+title_size/4+"px;" 71 | final_author.style.cssText+="margin-right:"+table_width/100+"px;" 72 | final_author.textContent = author; 73 | final_author.id = 'final-author'; 74 | final_div.appendChild(final_author); 75 | } 76 | 77 | 78 | var final_table = document.createElement('table'); 79 | final_div.appendChild(final_table); 80 | final_table.style.cssText+="background-color: white;table-layout: fixed; height:"+table_width+"px; width:"+table_height+"px;"; 81 | final_table.classList.add('table'); 82 | final_table.classList.add('table-bordered'); 83 | final_table.id = 'four-by-four'; 84 | 85 | var final_table_c = final_table; 86 | 87 | if(document.getElementById("watermark").checked){ 88 | var final_watermark = document.createElement("p"); 89 | final_watermark.id = "final-watermark"; 90 | final_watermark.style.cssText+="width:"+table_width+"px;"; 91 | final_watermark.innerHTML="由逐渐离谱生成器生成
https://nekonull.me/9/lipu.html" 92 | final_div.appendChild(final_watermark); 93 | } 94 | 95 | 96 | 97 | 98 | final_table = document.createElement('tbody'); 99 | final_table_c.appendChild(final_table); 100 | 101 | for (var i = 0; i < 4; i++) { 102 | var row = document.createElement('tr'); 103 | final_table.appendChild(row); 104 | for (var j = 0; j < 4; j++) { 105 | var cell = document.createElement('td'); 106 | cell.classList.add('cell'); 107 | row.appendChild(cell); 108 | 109 | var cell_table = document.createElement('table'); 110 | cell.appendChild(cell_table); 111 | var cell_tbody = document.createElement('tbody'); 112 | cell_table.appendChild(cell_tbody); 113 | if (i!=0 && j!=0){ 114 | var cell_tr_img = document.createElement('tr'); 115 | cell_tr_img.classList.add('cell-img'); 116 | cell_tr_img.style.cssText+="border: 1px solid "+color[3*(i-1)+(j-1)]+";"; 117 | cell_tbody.appendChild(cell_tr_img); 118 | } 119 | 120 | var cell_tr_text = document.createElement('tr'); 121 | cell_tbody.appendChild(cell_tr_text); 122 | var cell_tr_img_td = document.createElement('td'); 123 | var cell_tr_text_td = document.createElement('td'); 124 | cell_tr_text_td.classList.add("text"); 125 | if (i!=0 && j!=0){ 126 | cell_tr_img.appendChild(cell_tr_img_td); 127 | } 128 | cell_tr_text.appendChild(cell_tr_text_td); 129 | 130 | if (i!=0&&j!=0){ 131 | var imgn = document.createElement('img'); 132 | var srcimg = data[4*i + j].children[2].children[0]; 133 | imgn.src = srcimg.src; 134 | imgn.classList.add("center-block"); 135 | imgn.classList.add("img-repsonsive"); 136 | var img_new_height=0; 137 | var img_new_width=0; 138 | 139 | if(srcimg.height/img_height>srcimg.width/img_width){ 140 | imgn.style.cssText+="height: "+img_height+"px;" 141 | imgn.style.cssText+="width: "+srcimg.width * img_height / srcimg.height +"px;" 142 | } else { 143 | imgn.style.cssText+="width: "+img_width+"px;" 144 | imgn.style.cssText+="height: "+srcimg.height * img_width / srcimg.width +"px;" 145 | } 146 | 147 | cell_tr_img_td.appendChild(imgn); 148 | } 149 | 150 | var typew = document.createElement('div'); 151 | typew.textContent = data[4*i + j].children[0].value; 152 | typew.classList.add("type"); 153 | if(i==0 || j==0){ 154 | typew.style.cssText+="font-size: "+type_size+"px;"; 155 | } else { 156 | typew.style.cssText+="font-size: "+internal_size+"px;"; 157 | } 158 | 159 | if (i!=0 && j!=0){ 160 | typew.style.cssText+="color: "+color[3*(i-1)+(j-1)]+";"; 161 | } 162 | cell_tr_text_td.appendChild(typew); 163 | 164 | var wordw = document.createElement('div'); 165 | wordw.textContent = data[4*i + j].children[1].value; 166 | wordw.classList.add("word"); 167 | wordw.style.cssText+="font-size: "+word_size+"px;"; 168 | cell_tr_text_td.appendChild(wordw); 169 | } 170 | } 171 | 172 | 173 | 174 | // get picture 175 | // draw(); 176 | 177 | } 178 | 179 | function draw(){ 180 | 181 | var cont = document.getElementById('img_show_container'); 182 | 183 | while (cont.firstChild) { 184 | cont.removeChild(cont.firstChild); 185 | } 186 | 187 | html2canvas(document.getElementById('final-div'), { 188 | onrendered: function(canvas){ 189 | document.getElementById('img_show_container').appendChild(canvas); 190 | var table = document.getElementById('final-div'); 191 | table.parentNode.removeChild(table); 192 | } 193 | }); 194 | 195 | 196 | // table.style.cssText+="visability: hidden;"; 197 | } 198 | 199 | function wrapText(context, text, x, y, maxWidth, lineHeight) { 200 | var words = text.split(''); 201 | var line = ''; 202 | 203 | for (var n = 0; n < words.length; n++) { 204 | var testLine = line + words[n] + ''; 205 | var metrics = context.measureText(testLine); 206 | var testWidth = metrics.width; 207 | if (testWidth > maxWidth && n > 0) { 208 | context.fillText(line, x, y); 209 | line = words[n] + ''; 210 | y += lineHeight; 211 | } 212 | else { 213 | line = testLine; 214 | } 215 | } 216 | context.fillText(line, x, y); 217 | } 218 | 219 | 220 | function imgPreview(fileDom) { 221 | //判断是否支持FileReader 222 | if (window.FileReader) { 223 | var reader = new FileReader(); 224 | } else { 225 | alert("您的设备不支持图片预览功能，如需该功能请升级您的设备！"); 226 | } 227 | //获取文件 228 | var file = fileDom.files[0]; 229 | var imageType = /^image\//; 230 | //是否是图片 231 | if (!imageType.test(file.type)) { 232 | alert("请选择图片！"); 233 | return; 234 | } 235 | var father = fileDom.parentNode; 236 | var img = father.firstElementChild; 237 | //读取完成 238 | reader.onload = function (e) { 239 | //获取图片dom 240 | // var img = document.getElementById("preview"); 241 | //图片路径设置为读取的图片 242 | img.src = e.target.result; 243 | }; 244 | reader.readAsDataURL(file); 245 | img.style.cssText="display: block;" 246 | } 247 | 248 | // 支持直接粘贴图片 249 | function handlePaste(event) { 250 | var items = (event.clipboardData || event.originalEvent.clipboardData).items; 251 | var targetElement = event.target; 252 | if (targetElement.tagName === 'INPUT') { 253 | targetElement = targetElement.parentElement; 254 | } 255 | for (var index in items) { 256 | var item = items[index]; 257 | if (item.kind === 'file') { 258 | var blob = item.getAsFile(); 259 | var reader = new FileReader(); 260 | reader.onload = function(event){ 261 | var imgElement = targetElement.querySelector('.img-preview'); 262 | 263 | console.log("imgElement", imgElement); 264 | if (imgElement) { 265 | imgElement.src = event.target.result; 266 | } 267 | }; 268 | reader.readAsDataURL(blob); 269 | } 270 | } 271 | targetElement.querySelector('.img-preview').style.cssText="display: block;" 272 | } 273 | 274 | function clearImage(event) { 275 | var targetElement = event.target; 276 | if (targetElement.tagName === 'BUTTON') { 277 | targetElement = targetElement.parentElement; 278 | } 279 | targetElement.querySelector('.img-preview').src = ''; 280 | targetElement.querySelector('.img-preview').style.cssText="display: none;" 281 | targetElement.querySelector('#input_file').value = ''; 282 | } -------------------------------------------------------------------------------- /text.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 阵营⑨宫格生成 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 24 | 25 | 26 | 27 | 28 |
29 | 30 | 62 | 63 |
64 |
65 | 68 | 请使用桌面版 Chrome 浏览器以获得最佳体验。 69 |
70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 98 | 109 | 110 | 111 | 132 | 143 | 144 | 145 | 166 | 177 | 178 | 179 |
填入阵营九宫格内容
78 |
79 | 80 | 81 |
82 | 83 | 85 |
86 |
87 | 		88 |
89 | 90 | 91 |
92 | 93 | 95 |
96 |
97 | 		99 |
100 | 101 | 102 |
103 | 104 | 106 |
107 |
108 |
112 |
113 | 114 | 115 |
116 | 117 | 119 |
120 |
121 | 		122 |
123 | 124 | 125 |
126 | 127 | 129 |
130 |
131 | 		133 |
134 | 135 | 136 |
137 | 138 | 140 |
141 |
142 |
146 |
147 | 148 | 149 |
150 | 151 | 153 |
154 |
155 | 		156 |
157 | 158 | 159 |
160 | 161 | 163 |
164 |
165 | 		167 |
168 | 169 | 170 |
171 | 172 | 174 |
175 |
176 |
180 | 181 |
182 |
183 |
184 | 基础属性
185 | 高 186 | 187 | 宽 188 |
189 | 190 | 字号
191 | 标题 192 | 193 | 阵营 194 | 195 | 说明文字 196 |
197 | 198 | 生成
199 |
200 | 203 |
204 | 205 | 206 |

208 | 209 | 210 | 226 |
227 |
228 |
229 |
230 | 231 |
232 |
233 | 234 |
235 | 236 |
237 | 238 |
239 | 240 |
241 | 242 |
243 | 244 | 245 | 246 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 阵营⑨宫格生成 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 24 | 25 | 26 | 27 | 28 |
29 | 61 | 62 |
63 | 64 |
65 | 68 | 请使用桌面版 Chrome 浏览器以获得最佳体验。 69 |
70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 103 | 116 | 117 | 118 | 143 | 156 | 157 | 158 | 183 | 196 | 197 | 198 |
在此填入阵营九宫格内容
79 |
80 | 81 | 82 |
83 | 84 | 86 | 87 | 也可以点击上方文本框后，直接粘贴图片 88 |
89 |
90 | 		91 |
92 | 93 | 94 |
95 | 96 | 98 | 99 | 也可以点击上方文本框后，直接粘贴图片 100 |
101 |
102 | 		104 |
105 | 106 | 107 |
108 | 109 | 111 | 112 | 也可以点击上方文本框后，直接粘贴图片 113 |
114 |
115 |
119 |
120 | 121 | 122 |
123 | 124 | 126 | 127 | 也可以点击上方文本框后，直接粘贴图片 128 |
129 |
130 | 		131 |
132 | 133 | 134 |
135 | 136 | 138 | 139 | 也可以点击上方文本框后，直接粘贴图片 140 |
141 |
142 | 		144 |
145 | 146 | 147 |
148 | 149 | 151 | 152 | 也可以点击上方文本框后，直接粘贴图片 153 |
154 |
155 |
159 |
160 | 161 | 162 |
163 | 164 | 166 | 167 | 也可以点击上方文本框后，直接粘贴图片 168 |
169 |
170 | 		171 |
172 | 173 | 174 |
175 | 176 | 178 | 179 | 也可以点击上方文本框后，直接粘贴图片 180 |
181 |
182 | 		184 |
185 | 186 | 187 |
188 | 189 | 191 | 192 | 也可以点击上方文本框后，直接粘贴图片 193 |
194 |
195 |
199 |
200 |
201 |
202 | 基础属性
203 | 高 204 | 205 | 宽 206 |
207 | 208 | 字号
209 | 标题 210 | 211 | 阵营 212 | 213 | 说明文字 214 |
215 | 216 | 生成
217 |
218 | 221 |
222 | 223 | 224 |

226 | 227 | 228 | 244 |
245 |
246 |
247 |
248 | 249 |
250 |
251 | 252 |
253 | 254 |
255 | 256 |
257 | 258 |
259 |
260 | 261 | 262 | 263 | 264 | -------------------------------------------------------------------------------- /lipu.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 逐渐离谱生成器 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15 | 16 | 17 | 24 | 25 | 26 | 27 | 28 |
29 | 61 | 62 |
63 | 64 |
65 | 68 | 请使用桌面版 Chrome 浏览器以获得最佳体验。 69 |
70 | 71 | 72 | 73 | 74 | 75 | 76 | 77 | 78 | 89 | 95 | 101 | 102 | 103 | 121 | 134 | 147 | 148 | 149 | 167 | 180 | 193 | 194 | 195 | 213 | 226 | 239 | 240 | 241 |
在此填入阵营九宫格内容
79 |
80 | 81 | 82 |
83 | 		84 |
85 | 86 | 87 |
88 | 		90 |
91 | 92 | 93 |
94 | 		96 |
97 | 98 | 99 |
100 |
104 |
105 | 106 | 107 |
108 | 		109 |
110 | 111 | 112 |
113 | 114 | 116 | 117 | 也可以点击上方文本框后，直接粘贴图片 118 |
119 |
120 | 		122 |
123 | 124 | 125 |
126 | 127 | 129 | 130 | 也可以点击上方文本框后，直接粘贴图片 131 |
132 |
133 | 		135 |
136 | 137 | 138 |
139 | 140 | 142 | 143 | 也可以点击上方文本框后，直接粘贴图片 144 |
145 |
146 |
150 |
151 | 152 | 153 |
154 | 		155 |
156 | 157 | 158 |
159 | 160 | 162 | 163 | 也可以点击上方文本框后，直接粘贴图片 164 |
165 |
166 | 		168 |
169 | 170 | 171 |
172 | 173 | 175 | 176 | 也可以点击上方文本框后，直接粘贴图片 177 |
178 |
179 | 		181 |
182 | 183 | 184 |
185 | 186 | 188 | 189 | 也可以点击上方文本框后，直接粘贴图片 190 |
191 |
192 |
196 |
197 | 198 | 199 |
200 | 		201 |
202 | 203 | 204 |
205 | 206 | 208 | 209 | 也可以点击上方文本框后，直接粘贴图片 210 |
211 |
212 | 		214 |
215 | 216 | 217 |
218 | 219 | 221 | 222 | 也可以点击上方文本框后，直接粘贴图片 223 |
224 |
225 | 		227 |
228 | 229 | 230 |
231 | 232 | 234 | 235 | 也可以点击上方文本框后，直接粘贴图片 236 |
237 |
238 |
242 |
243 |
244 |
245 | 基础属性
246 | 高 247 | 248 | 宽 249 |
250 | 251 | 字号
252 | 标题 253 | 254 | 阵营 255 | 256 | 内部项 257 | 258 | 说明文字 259 |
260 | 261 | 生成
262 |
263 | 266 |
267 | 268 | 269 |

271 | 272 | 273 | 289 |
290 |
291 |
292 |
293 | 294 |
295 |
296 | 297 |
298 | 299 |
300 | 301 |
302 | 303 |
304 |
305 | 306 | 307 | 308 | 309 | --------------------------------------------------------------------------------