用Canvas实现图片转换字符画用Canvas实现图片转换字符画

我在网上看到一篇文章，发现通过canvas，可以很轻松实图片转字符画功能。其实原理很简单：扫描图片相应位置的像素点，再计算出其灰度值，根据灰度值的大小，分别用字符#*+“和.等符号来填充。下面是源码是我直接扒过来的：
HTML：一个canvas元素#cv，一个字符画容器#txt 。

/*css：由于每一行用p来填充，所以p的height和font-size大小应该一致都是12px，这样可以避免每行出现空隙。*/ * {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; }Document - 锐客网

javascript：请看注释和下面的解释。

var cv = document.getElementById('cv'); var c = cv.getContext('2d'); var txtDiv = document.getElementById('txt'); var fileBtn = document.getElementById("up-button"); var img = new Image(); img.src = 'https://www.it610.com/article/a.jpg'; //特别注意！！ img.onload = init; // 图片加载完开始转换 fileBtn.onchange = getImg; // 根据灰度生成相应字符 function toText(g) { if (g <= 30) { return '#'; } 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 '.'; //原作者坑爹呢，HTML中空格只能解释一个，用点代替好了 } }// 根据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 = https://www.it610.com/article/c.getImageData(0, 0, img.width, img.height); //你的图片来源一定要跟html保持一致，建议在apache等服务器环境下运行，否则无法使用该方法!!var imgDataArr = imgData.data; var imgDataWidth = imgData.width; var imgDataHeight = imgData.height; var html =''; for (h = 0; h < imgDataHeight; h += 12) { var 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 += ' '; html += p; } txtDiv.innerHTML = html; }// 获取图片 function getImg(file) { var reader = new FileReader(); reader.readAsDataURL(fileBtn.files[0]); reader.onload = function () { img.src = https://www.it610.com/article/reader.result; } }

【用Canvas实现图片转换字符画】再次强调：HTML文件和图片文件来源不同会报错，请把这两个文件放在服务器环境下运行，我这边用apache