97 lines
2.9 KiB
HTML
97 lines
2.9 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Block video encoding test</title>
|
|
<style type="text/css">
|
|
.stretchy {
|
|
width:267px;
|
|
height: 150px;
|
|
object-fit: fill;
|
|
image-rendering: pixelated;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>Block video encoding test</h1>
|
|
|
|
<h2>Source video</h2>
|
|
<div>
|
|
<video id="source" src="llamigos.webm" class="stretchy" muted controls playsinline></video>
|
|
</div>
|
|
|
|
<h2>Work canvas</h2>
|
|
<div>
|
|
<canvas id="work" width="80" height="150" class="stretchy"></canvas>
|
|
</div>
|
|
|
|
<script type="text/javascript">
|
|
let width = 80;
|
|
let height = 150;
|
|
|
|
function fromSRGB(val) {
|
|
val /= 255;
|
|
if (val <= 0.04045) {
|
|
val /= 12.92;
|
|
} else {
|
|
val = ((val + 0.055) / 1.055) ** 2.4;
|
|
}
|
|
val *= 255;
|
|
return val;
|
|
}
|
|
|
|
function toSRGB(val) {
|
|
val /= 255;
|
|
if (val <= 0.0031308) {
|
|
val *= 12.92;
|
|
} else {
|
|
val = (val * 1.055) ** (1.0 / 2.4) - 0.055;
|
|
}
|
|
val *= 255;
|
|
return Math.round(val);
|
|
}
|
|
|
|
function luma(r, g, b) {
|
|
return r * 0.299 + g * 0.586 + b * 0.114;
|
|
}
|
|
|
|
function update() {
|
|
let ctx = work.getContext('2d');
|
|
ctx.drawImage(source, 0, 0);
|
|
let bits = ctx.getImageData(0, 0, width, height);
|
|
let data = bits.data;
|
|
for (let y = 0; y < height; y++) {
|
|
for (let x = 0; x < width; x++) {
|
|
let i = (y * width + x) * 4;
|
|
|
|
let r = fromSRGB(data[i]);
|
|
let g = fromSRGB(data[i + 1]);
|
|
let b = fromSRGB(data[i + 2]);
|
|
|
|
let gray = luma(r, g, b);
|
|
let gray16 = Math.round(gray / 15) * 15;
|
|
|
|
data[i] = toSRGB(gray16);
|
|
data[i + 1] = toSRGB(gray16);
|
|
data[i + 2] = toSRGB(gray16);
|
|
}
|
|
}
|
|
ctx.putImageData(bits, 0, 0);
|
|
}
|
|
|
|
let timer = null;
|
|
source.addEventListener('playing', () => {
|
|
if (!timer) {
|
|
timer = setInterval(update, 1000 / 24);
|
|
}
|
|
update();
|
|
});
|
|
source.addEventListener('pause', () => {
|
|
if (timer) {
|
|
clearInterval(timer);
|
|
timer = null;
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |