Skip to content

Instantly share code, notes, and snippets.

@Teaonly
Created May 16, 2014 03:31
Show Gist options
  • Save Teaonly/1f6dfe99e790446bb752 to your computer and use it in GitHub Desktop.
Save Teaonly/1f6dfe99e790446bb752 to your computer and use it in GitHub Desktop.
Draw YUV in a HTML5's Canvas
function yuv2canvas(yuv, width, height, canvas) {
/*
canvas.width = width;
canvas.height = height;
*/
context = canvas.getContext("2d");
output = context.createImageData(width, height);
outputData = output.data;
yOffset = 0;
uOffset = width * height;
vOffset = width * height + (width*height)/4;
for (var h=0; h<height; h++) {
for (var w=0; w<width; w++) {
ypos = w + h * width + yOffset;
upos = (w>>1) + (h>>1) * width/2 + uOffset;
vpos = (w>>1) + (h>>1) * width/2 + vOffset;
Y = yuv[ypos];
U = yuv[upos] - 128;
V = yuv[vpos] - 128;
R = (Y + 1.371*V);
G = (Y - 0.698*V - 0.336*U);
B = (Y + 1.732*U);
outputData_pos = w*4 + width*h*4;
outputData[0+outputData_pos] = R;
outputData[1+outputData_pos] = G;
outputData[2+outputData_pos] = B;
outputData[3+outputData_pos] = 255;
}
}
context.putImageData(output, 0, 0);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment