Bonjour,
J’utilise un canvas WebGL pour générer les images d’une animation.
La solution pour générer une vidéo avec le MediaRecorder ne donne que de mauvais résultats au niveau de la qualité de l’image.
Je génère donc chaque image de l’animation en png ou en jpeg et crée l’image a partir d’un blob avec la fonction toBlob du canevas, j’utilise ensuite une application externe comme DaVinci Resolve ou OpenShot video editor pour constituer la vidéo haute résolution à partir des images.

À chaque frame dessinée, j’appelle la routine suivante*:
Code : Sélectionner tout - Visualiser dans une fenêtre à part
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
canevas.toBlob(function (blob) {
	let urlPhoto = URL.createObjectURL(blob);
	let link = document.createElement("a");
	link.setAttribute("href", urlPhoto);
	link.setAttribute("download", "Image_" + numéroImage + ".jpg");
 
	const event = new MouseEvent('click', {
		view: window,
		bubbles: true,
		cancelable: true
		});
	link.dispatchEvent(event);
 
	numéroImage++;
 
}, "image/jpeg", 1.0);
Le callback crée un lien vers l’image et simule un clic pour télécharger l’image.
Cela fonctionne à la cadence d’environ 500 ms pour une frame de 2048x1024 pixels.
Mais si je descends, par exemple à 25 ms entre chaque frame, les images se retrouvent mélangées*: les téléchargements et l’attribution des numéros d’image ne sont plus dans le bon ordre.

Ma question est la suivante*:
Existe-t-il un moyen de savoir quand le téléchargement déclenché par le clic sur un lien <a> avec l’attribut «*download*» a terminé, pour lancer le calcul de l’image suivante.

Merci de vos réponses