<style type="text/css">
body{ background:#000;}
#c{
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
width: 100%;
height: 100%;
}
#v{
position: absolute;
top: 50%;
left: 50%;
margin: -180px 0 0 -240px;
}
</style><canvas id="c"></canvas>
<video id="v" controls>
<source src="/blog/video/大眼睛.mp4" type="video/mp4">
</video><script>
document.addEventListener('DOMContentLoaded', function(){
var v = document.getElementById('v');
var canvas = document.getElementById('c');
var context = canvas.getContext('2d');
var cw = Math.floor(canvas.clientWidth / 100);
var ch = Math.floor(canvas.clientHeight / 100);
canvas.width = cw;
canvas.height = ch;
v.addEventListener('play', function(){
draw(this,context,cw,ch);
},false);
},false);
function draw(v,c,w,h) {
if(v.paused || v.ended) return false;
c.drawImage(v,0,0,w,h);
setTimeout(draw,20,v,c,w,h);
}
</script>
<video id="v" controls> <source src="/blog/video/大眼睛.mp4" type="video/mp4"> </video> <canvas id="c"></canvas>
<script>
function draw(v,c,bc,cw,ch) {
if(v.paused || v.ended) return false;
// First, draw it into the backing canvas
bc.drawImage(v,0,0,cw,ch);
// Grab the pixel data from the backing canvas
var idata = bc.getImageData(0,0,cw,ch);
var data = idata.data;
var w = idata.width;
var limit = data.length
// Loop through the subpixels, convoluting each using an edge-detection matrix.
for(var i = 0; i < limit; i++) {
if( i%4 == 3 ) continue;
data[i] = 127 + 2*data[i] - data[i + 4] - data[i + w*4];
}
// Draw the pixels onto the visible canvas
c.putImageData(idata,0,0);
// Start over!
setTimeout(draw,20,v,c,bc,cw,ch);
}
</script>
function draw(v,c,bc,w,h) {
if(v.paused || v.ended) return false;
// First, draw it into the backing canvas
bc.drawImage(v,0,0,w,h);
// Grab the pixel data from the backing canvas
var idata = bc.getImageData(0,0,w,h);
var data = idata.data;
// Loop through the pixels, turning them grayscale
for(var i = 0; i < data.length; i+=4) {
var r = data[i];
var g = data[i+1];
var b = data[i+2];
var brightness = (3*r+4*g+b)>>>3;
data[i] = brightness;
data[i+1] = brightness;
data[i+2] = brightness;
}
idata.data = data;
// Draw the pixels onto the visible canvas
c.putImageData(idata,0,0);
// Start over!
setTimeout(function(){ draw(v,c,bc,w,h); }, 0);
}
