
这是一个在线生成字符画的html单页源代码,可用图片来生成字符画用来放记事本里好看,哈哈哈!看这文章的都知道干嘛就不瞎扯了。复制下面代码到在线可视化工具粘贴运行上传要生成的图片。注图片要大一点,太小看不出来
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 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 121 122 123 124 125 126
| <!DOCTYPE HTML> <html> <head> <meta charset="UTF-8"> <title>基于canvas的图片转字符画工具</title> <style type="text/css"> \* {margin: 0;padding: 0;} body {font-size: 12px; margin: 10px; font-family: simsun; background: #fff;} p { height: 12px;} p.ts { margin: 10px 0 0 0; width: 500px; float: left;} span {width: 12px;} #cv, #txt {float: left;} #cv { margin-right: 5px;} .bt{ height: 37px; } form, input {width: 73px;height: 27px;} form { position: relative; float: left; margin: 0 10px 0 0; } #up-button{ position: absolute; right: 0; top: 0; cursor: pointer; opacity: 0; filter: alpha(opacity=0); outline: none; } #button{ } iframe ,#cv{display: none;} </style> <script id="jquery\_183" type="text/javascript" class="library" src="//cdn.bootcss.com/jquery/1.8.3/jquery.min.js"></script> <script type="text/javascript" src="//sandbox.runjs.cn/uploads/rs/485/2vzbn4yy/clipboard.min.js"></script> </head> <body> <div class="bt"> <input type="button" id="copy" data-clipboard-target="#txt" value="复制文字"/>长满1600px宽满2840px;图片尺寸越大生成的文字代码越清晰,浏览器保存网页为图片。 <form id="uf"> <input type="file" name="file" id="up-button"/> <input type="button" id="button" value="选择图片"/> </form> </div> <canvas id="cv">fuck ie</canvas> <div id="txt"></div> </body> </html> <style> </style> <script>var cv = document.getElementById('cv'); var c = cv.getContext('2d'); var txtDiv = document.getElementById('txt'); var fileBtn = document.getElementById("up-button"); var copyBtn = document.getElementById("coby"); var img = new Image(); img.src = 'abn.jpg'; img.onload = init; // 图片加载完开始转换 fileBtn.onchange = getImg; // 根据灰度生成相应字符 function toText(g) { if (g <= 30) { return '8'; } else if (g > 30 && g <= 60) { return '&'; } else if (g > 60 && g <= 120) { return '$'; } else if (g > 120 && g <= 150) { return '\*'; } else if (g > 150 && g <= 180) { return 'o'; } else if (g > 180 && g <= 210) { return '!'; } else if (g > 210 && g <= 240) { return ';'; } else { return '.'; } } // 根据rgb值计算灰度 function getGray(r, g, b) { return 0.299 \* r + 0.578 \* g + 0.114 \* b; } // 转换 function init() { txtDiv.style.width = img.width + 'px'; cv.width = img.width; cv.height = img.height; c.drawImage(img, 0, 0); var imgData = c.getImageData(0, 0, img.width, img.height); var imgDataimgDataArr = imgData.data; var imgDataimgDataWidth = imgData.width; var imgDataimgDataHeight = imgData.height; var html = ''; for (h = 0; h < imgDataHeight; h += 12) { var p = '<p>'; for (w = 0; w < imgDataWidth; w += 6) { var index = (w + imgDataWidth \* h) \* 4; var r = imgDataArr\[index + 0\]; var g = imgDataArr\[index + 1\]; var b = imgDataArr\[index + 2\]; var gray = getGray(r, g, b); p += toText(gray); } p += '</p>'; html += p; } txtDiv.innerHTML = html; } // 获取图片 function getImg(file) { var reader = new FileReader(); reader.readAsDataURL(fileBtn.files\[0\]); reader.onload = function () { img.src = reader.result; } } var clipboard3 = new Clipboard('#copy'); clipboard3.on('success', function(e) { console.log(e); alert("复制成功!") }); clipboard3.on('error', function(e) { console.log(e); alert("测试4复制失败!请手动复制") }); </script>
|
转载诗梦博客