Informations de départ: Le video element peut être une source d'image pour le canevas html5. Cela signifie qu'un cadre de vidéo peut être dessiné sur (et manipulé par) la toile.
Présentation: La méthode context.getImageData permet d'obtenir les données de pixel RGBA dans un tableau. Après avoir modifié les données de pixel du tableau, context.putImageData remettra les pixels modifiés sur le canevas.
A Plan Utilisez CSS pour positionner un canevas html5 sur l'arrière-plan du site. Utilisez ce canevas pour dessiner des images vidéo sur le site (avec des pixels vidéo verdâtres rendus transparents pour que l'arrière-plan du site soit visible).
(un certain assemblage & l'apprentissage de votre part):
Position un élément de toile de fond html5 couvrant le site Web.
l'intérieur d'une boucle temporelle (requestAnimationFrame):
- Effacer la toile:
context.clearRect,
- Dessiner une image vidéo sur la toile:
context.drawImage(video,0,0),
- Obtenir les données de pixels de la toile:
context.getImageData,
- Vérifiez chaque pixel pour "green-ish-ness":
if(green>220 && red<20 && blue<20),
- Si un pixel est verdâtre, rendez-le transparent:
(alpha=0),
- Remettez les pixels modifiés sur le canevas:
context.putImageData,
- Répétez l'étape 1 jusqu'à la fin de la vidéo.
Références pour aider à votre apprentissage
Stackoverflow poste avant au sujet n ° 2: Put the video tag on the Canvas tag
Stackoverflow poste avant en ce qui concerne # 3-6: Looping through pixels in an image
https: // www.youtube.com/watch?v=eTgFUNUmxRo ceci est la vidéo originale peut-être quelqu'un peut m'aider à mieux avec ceci? – Programmer123
C'est possible.Vous pouvez dessiner une vidéo dans une toile et manipuler les pixels que vous dessinez. Voici le tutoriel (rendu vidéo à l'intérieur de la toile, manipulation d'image par pixel) -> http://html5doctor.com/video-canvas-magic/ –
Vous devez montrer votre code. La question telle qu'elle est actuellement n'est pas appropriée pour Stack Overflow. –