您的位置：首页 > Web前端 > JavaScript

通过javascript把图片转化为字符画

2013-10-24 21:21 429 查看 
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 = '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 imgDataArr = imgData.data;
var imgDataWidth = imgData.width;
var imgDataHeight = 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;
}
}
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>img2txt：基于canvas的图片转字符画工具</title>
<style type="text/css">
#hananBackgroundColorOpacity{margin:10px0;}
#hananBackgroundColorOpacity span{margin-left:10px; color:#8a8c8e;}
#hananBackgroundColorOpacity textarea{width:650px; height:120px; padding:5px; color:#fff; background:#000;}
#hananBackgroundColorOpacitystrong{color:#000;}
#hananBackgroundColorOpacity h3{color:#000; border-bottom:1px solid #ccc; line-height:57px;}
#hananBackgroundColorOpacity h3 a{ color: #000; text-decoration: none;float:right; font-family: "MICROSOFT YAHEI"; font-size: 22px;}
#hananBackgroundColorOpacity h3 .c{ clear:both; height:0px;margin:0;padding:0;}
#hananBackgroundColorOpacity .hanan_introduction,
#hananBackgroundColorOpacity.hanan_introduction a{ font-size:12px; color:#6E6E6E; }
#hananBackgroundColorOpacity img{border:none;}
/* contnet */
*{margin: 0;padding: 0;}
body {font-size: 12px; margin: 10px; font-family: simsun; background: #fff;}
p { height: 12px;}
p.ts { margin: 10px 00 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{display: none;}
</style>
</head>
<body>
<div id="hananBackgroundColorOpacity">
</div>
<div class="bt">
<form id="uf">
<input type="file" name="file" id="up-button"/>
<input type="button" id="button" value="选择图片"/>
</form>
</div>
<canvas id="cv">fuckie</canvas>
<div id="txt"></div>
<script src="js/img2txt.js" type="text/javascript"></script>
</body>
</html>

                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航