-
Notifications
You must be signed in to change notification settings - Fork 4
/
Copy pathvideo2txt.html
149 lines (137 loc) · 4.3 KB
/
video2txt.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
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>video2txt：基于canvas的视频转字符动画工具</title>
</head>
<body>
<style type="text/css">
#hananBackgroundColorOpacity{margin:10px 0;}
#hananBackgroundColorOpacity span{margin-left:10px; color:#8a8c8e;}
#hananBackgroundColorOpacity textarea{width:650px; height:120px; padding:5px; color:#fff; background:#000;}
#hananBackgroundColorOpacity strong{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 0 0 0; width: 500px; float: left;}
span {width: 12px;}
#cv, #txt,#vi {float: left;overflow: hidden;}
#cv { margin-right: 5px; display: none;}
.bt{ height: 37px; }
form, input {width: 200px;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>
<div id="hananBackgroundColorOpacity">
<h3><a href="http://www.cssha.com/">前端手记</a> video2txt：基于canvas的视频转字符动画工具
<div class="c"></div>
</h3>
</div>
<div class="bt">
<form id="uf">
<input type="file" name="file" id="up-button"/>
<input type="button" id="button" value="请选择视频文件"/>
</form>
<p class="ts">请选择MP4/ogg/WebM等格式的视频文件(firefox不支持MP4)</p>
</div>
<canvas id="cv">fuck ie</canvas>
<video src="" width="600" height="480" controls autoplay id="vi">
fuck ie
</video>
<div id="txt"></div>
<script type="text/javascript">
var cv = document.getElementById('cv');
var c = cv.getContext('2d');
var txtDiv = document.getElementById('txt');
var fileBtn = document.getElementById("up-button");
var media = document.getElementById('vi');
var timer = null;
fileBtn.onchange = getVideo;
media.src = 'luoxiaohei.mp4';
init();
// 根据灰度生成相应字符
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 ' ';
}
}
// 根据rgb值计算灰度
function getGray(r, g, b) {
return 0.299 * r + 0.578 * g + 0.114 * b;
}
// 转换
function init() {
var width = media.width, height = media.height;
txtDiv.style.width = width + 'px';
txtDiv.style.height = height + 'px';
cv.width = width;
cv.height = width;
c.drawImage(media, 0, 0, width, height);
var imgData = c.getImageData(0, 0, width, width);
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;
timer = setTimeout(init, 50);
}
// 获取图片
function getVideo(file) {
var reader = new FileReader();
reader.readAsDataURL(fileBtn.files[0]);
reader.onload = function () {
media.src = reader.result;
}
}
</script>
</body>
</html>