直接用過視頻嘗試下就行
以下代碼可以直接運行的哦，親測可用
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>Char Picture</title>
<style>
html, body {
width: 100%;
}
video {
margin: auto;
position: relative;
top: 0;
left: 0;
width: 20%;
height: 20%;
}
#stage {
margin: auto;
position: absolute;
top: 0;
left: 20%;
right: 0;
width: 80%;
font-family: Courier New;
font-size: 16px;
line-height: 10px;
}
#stage img {
width: 100%;
height: 100%;
}
</style>
<script>
/**
* Created by Roger on 16/1/2.
*/
var map=getCharsMap();
/*
* this function can convert the image in canvas to a char-picture(string)
* cotext:the canvas context;width:the image width;height:the image height; rowChars:how many chars in one row.
*/
function toChars(context, width, height, rowChars) {
var pixels = [],
output = "",
imageData = context.getImageData(0, 0, width, height),
rowChars = width < rowChars ? width : rowChars,
char_h = width / rowChars,
char_w = char_h,
rows = height / char_h,
cols = rowChars,
//to get a block of pixiels average gray-value.
getBlockGray = function (x, y, w, h) {
var sumGray = 0, pixels;
for (var row = 0; row < w; row++) {
for (var col = 0; col < h; col++) {
var cx = x + col, //current position x
cy = y + row, //current positon y
index = (cy * imageData.width + cx) * 4, //current index in rgba data array
data = imageData.data,
R = data[index],
G = data[index + 1],
B = data[index + 2],
gray = ~~(R * 0.3 + G * 0.59 + B * 0.11);
sumGray += gray;
}
}
pixels = w * h;
return ~~(sumGray / pixels);
};
for (var r = 0; r < rows; r++) {
for (var c = 0; c < cols; c++) {
var pos_x = ~~(c * char_h),
pos_y = ~~(r * char_h),
avg = getBlockGray(pos_x, pos_y, ~~char_w, ~~char_h),
ch = map[avg];
output += ch;
}
output += '\r\n';
}
;
return output;
}
function getCharsMap() {
var chars = ['@', 'w', '#', '$', 'k', 'd', 't', 'j', 'i', '.', ' '];
var step = 25,
map = {};
for (var i = 0; i < 256; i++) {
var index = ~~(i / 25)
map[i] = chars[index];
}
;
return map;
}
</script>
</head>
<body>
<input type="file" id="file">
<button id="play" type="button" onclick="play()">播放</button>
<br>
<video controls="controls">
</video>
<!--<div id="stage"></div>-->
<pre id="stage"></pre>
<script type="text/javascript">
var interval, video = document.getElementsByTagName("video")[0],
stage = document.getElementById("stage"),
canvas = document.createElement("canvas"),
captureImage = function () {
var ctx;
canvas.width = video.videoWidth;
canvas.height = video.videoHeight;
if (canvas.width) {
ctx = canvas.getContext('2d');
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
stage.innerText = toChars(ctx, canvas.width, canvas.height, 100);
}
},
beginCapture = function () {
interval = setInterval(function () {
captureImage(1)
}, 100);
},
endCapture = function () {
if (interval) {
clearInterval(interval);
}
},
play = function () {
var file = document.getElementById('file').files[0];
var url = URL.createObjectURL(file);
if (!file) {
alert("請先選擇文件");
}
console.log(url);
video.src = url;
video.play();
};
video.addEventListener("play", beginCapture);
video.addEventListener("pause", endCapture);
video.addEventListener("ended", endCapture);
video.addEventListener("playing", function () {
endCapture();
beginCapture();
});
</script>
</body>
</html>