Grayscale over canvas

Status
Niet open voor verdere reacties.
G

grumbkow

Gebruiker
Lid geworden
20 aug 2007
Berichten
924
Hallo!,

Ik ben wat aan het klooien met javascript en canvas om zo mijn kennis uit te breiden.

Ik heb een video welke ik op een canvas laat zien.
Hieronder heb ik een play en pause knop, dit werkt allemaal zoals ik wil.

Nu had ik een stukje code welke de imagedata van de canvas omzette naar een grayscale. Dit werkte ook.

Echter wil ik dat dit gebeurd zodra er op een zogenaamde knop wordt gedrukt.

De code van mijn gehele pagina is als volgt.

[JS]<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>HTML5 Video Speler</title>
<style type="text/css">
body { background: #c7c7c7; }
#canvasHolder { position: relative; width: 680px; height: 500px; margin: 0 auto; }
</style>
<script type="text/javascript">
var videoElement;
var videoDiv;
var controlSheet;
var BW = false;

var loadCount = 0;
var itemsToLoad =2;

window.addEventListener('load', eventWindowLoaded, false);

function eventWindowLoaded()
{
videoElement = document.createElement("video"); //Maak video element
videoDiv = document.createElement('div'); //Maak div element
document.body.appendChild(videoDiv) //Maak videoDiv een child van body
videoDiv.appendChild(videoElement); //Maak videoElement een child van videoDiv
videoDiv.setAttribute("style", "display:none;") //verberg videoDiv

var videoType = supportedVideoFormat(videoElement);
if (videoType == "")
{
alert("no video support");
return;
}
videoElement.setAttribute("src", "dynamic/gomarjobat." + videoType);
videoElement.addEventListener("canplay", itemLoaded, false);
controlSheet = new Image();
controlSheet.onload = itemLoaded;
controlSheet.src = "images/videoControls.png";

function supportedVideoFormat(video)
{
var returnExtension = "";
if(video.canPlayType("video/webm") == "probably" || video.canPlayType("video/webm") == "maybe")
{
returnExtension = "webm";
}
else if(video.canPlayType("video/mp4") == "probably" || video.canPlayType("video/mp4") == "maybe")
{
returnExtension = "mp4";
}
else if(video.canPlayType("video/ogg") == "probably" || video.canPlayType("video/ogg") == "maybe")
{
returnExtension = "ogg";
}

return returnExtension;
}

function itemLoaded()
{
loadCount++;
if(loadCount >= itemsToLoad)
{
canvasApp();
}
}

function videoLoaded(event)
{
canvasApp();
}

function canvasApp()
{
function drawScreen()
{
//Background
context.fillStyle = '#282828';
context.fillRect(0, 0, theCanvas.width, theCanvas.height);
//Stroke
context.strokeStyle = '#b4ff00';
context.strokeRect(5, 5, theCanvas.width -10, theCanvas.height -10);

//Text
context.fillStyle = "#fefefe";
context.fillText ("Duration:" + videoElement.duration, 10 ,420);
context.fillText ("Current time:" + videoElement.currentTime, 260 ,420);
context.fillText ("Loop: " + videoElement.loop, 10 ,430);
context.fillText ("Autoplay: " + videoElement.autoplay, 100 ,430);
context.fillText ("Muted: " + videoElement.muted, 180 ,430);
context.fillText ("Controls: " + videoElement.controls, 260 ,430);
context.fillText ("Volume: " + videoElement.volume, 340 ,430);
//Place video
context.drawImage(videoElement ,20, 20);

//Video Controls
context.fillStyle = "#0c0c0c";
context.fillRect(20, 372, 640, 26);

//BW Button
if(BW == false)
{
context.drawImage(controlSheet, 36,0,29,18,628,playPauseY,29,18);
}
else if(BW == true)
{
context.drawImage(controlSheet, 36,26,29,18,628,playPauseY,29,18);
}

if(!videoElement.paused)
{
context.drawImage(controlSheet, 0,26,buttonWidth,buttonHeight,playPauseX,playPauseY,buttonWidth,buttonHeight);
context.drawImage(controlSheet, 18,0,buttonWidth,buttonHeight,playPauseX+22,playPauseY,buttonWidth,buttonHeight);
}
else
{
context.drawImage(controlSheet, 0,0,buttonWidth,buttonHeight,playPauseX,playPauseY,buttonWidth,buttonHeight);
context.drawImage(controlSheet, 18,26,buttonWidth,buttonHeight,playPauseX+22,playPauseY,buttonWidth,buttonHeight);
}

//Button Handling
theCanvas.addEventListener("mouseup", eventMouseUp, false);
function eventMouseUp(event)
{
var mouseX;
var mouseY;
if(event.layerX || event.layerX == 0)
{
mouseX = event.layerX ;
mouseY = event.layerY;
}
else if(event.offsetX || event.offsetX == 0)
{
mouseX = event.offsetX;
mouseY = event.offsetY;
}
if((mouseY >= playPauseY) && (mouseY <= playPauseY+buttonHeight) && (mouseX >= playPauseX) && (mouseX <= playPauseX+buttonWidth))
{
if(videoElement.paused)
{
videoElement.play();
}
}
else if((mouseY >= playPauseY) && (mouseY <= playPauseY+buttonHeight) && (mouseX >= playPauseX+20) && (mouseX <= playPauseX+buttonWidth+20))
{
if(videoElement.paused == false)
{
videoElement.pause();
}
}
else if((mouseY >= playPauseY) && (mouseY <= playPauseY+buttonHeight) && (mouseX >= 628) && (mouseX <= 657))
{
for(var y = 0; y < imgPixels.height; y++)
{
for(var x = 0; x < imgPixels.width; x++)
{
var i = (y * 4) * imgPixels.width + x * 4;
var avg = (imgPixels.data + imgPixels.data[i + 1] + imgPixels.data[i + 2]) / 3;
imgPixels.data = avg;
imgPixels.data[i + 1] = avg;
imgPixels.data[i + 2] = avg;
}
}
context.putImageData(imgPixels, 20, 20, 0, 0, imgPixels.width, imgPixels.height);

return theCanvas.toDataURL();
}
}
}

var theCanvas = document.getElementById("videoCanvas");
var context = theCanvas.getContext("2d");
var imgPixels = context.getImageData(20, 20, 640, 352);
var buttonWidth = 18;
var buttonHeight = 18;
var playPauseX = 24;
var playPauseY = 376;

videoElement.play();
setInterval(drawScreen, 33);
}
}
</script>
</head>

<body>
<div id="canvasHolder">
<canvas id="videoCanvas" width="680" height="500">
Your browser does not support HTML5 Canvas.
</canvas>
</div>
</body>
</html>
[/JS]

het stukje code voor de grayscale knop

[JS]
else if((mouseY >= playPauseY) && (mouseY <= playPauseY+buttonHeight) && (mouseX >= 628) && (mouseX <= 657))
{
for(var y = 0; y < imgPixels.height; y++)
{
for(var x = 0; x < imgPixels.width; x++)
{
var i = (y * 4) * imgPixels.width + x * 4;
var avg = (imgPixels.data + imgPixels.data[i + 1] + imgPixels.data[i + 2]) / 3;
imgPixels.data = avg;
imgPixels.data[i + 1] = avg;
imgPixels.data[i + 2] = avg;
}
}
context.putImageData(imgPixels, 20, 20, 0, 0, imgPixels.width, imgPixels.height);

return theCanvas.toDataURL();
}
[/JS]

Iemand enig idee waarom hij het wel doet als ik hem direct uit voer, maar niet wanneer ik de code pas uitvoer wanneer er met de muis tussen bepaalde coördinaten geklikt word..?
 
Ook hier weer, gaarne een URL leveren waarop het probleem in actie te zien is.
Ik kan die code niet uitvoeren omdat er files missen..
 
Prop eens een paar alerts na de else if(...), en kijk of die wel gegeven worden.
 
Het zou aardig zijn als je de oplossing zou posten. Dan kan iedereen 'meegenieten' van het antwoord.
 
Status
Niet open voor verdere reacties.
                    Steun ons                    

Nieuwste berichten

Terug
Bovenaan Onderaan