[RESOLU] [JS] Probleme XP, FF & JS plante firefox

[maximeK]

Exposer du probleme :

1 . Depuis une application flash (ExternalInterface) j'ouvre une fenêtre HTML (grâce a un window.open contenue dans le conteneur de mon appli flash l'index.html en gros ) et instancie cette derniere.

2 . Mon index.html après m'avoir crée cette fenêtre exécute une fonction ( instance.mafonction() ).

3 . La fonction executé permet de charger sur le "popup instancié" une vidéo MP4 dans le lecteur QuickTime (plugin).

4 . Des écouteurs sont posée pour connaitre l'état de la vidéo ( stop , play , pause .... ) et des callbacks me permette de donnez a mon appli flash ces données ( je peut donc commander depuis flash ma video , play, pause, faire du frame to frame... ).

FLASH <-----> INDEX.HTML <-----> POPUP

5 . Une fonction draw, me permet de capturé une frame de ma vidéo (FFMPEG sur ma source) pour me générer un PNG

6 . A l'aide d'un canvas je peut dessiner dessus ( trait - ligne - undo - redo - erase ) (Sauf pour IE).

7 . Je peut sauvegarder sa sur mon serveur et afficher mon commantaire dans mon flash.

Voila en gros comment marche mon player video, sa marche tres bien sur FF 3.6, FF 4.0, FF 5.0 et les chromes sauf que :

Si j'utilise le couple Windows XP + Firefox (3.6,4,5 avec ou sans firebug ) mon Firefox plante lorsque je veut ouvrir une autre fenêtre de mon video player ( mais si je laisse ma fenetre ouverte et que depuis le flash je lui dit de changer la video sa marche o_O )

Donc mon probleme est bien lors de l'ouverture d'une nouvelle page...

J'ai utiliser exactement les mêmes versions de FireFox,Quicktime et Flash et le constat est que sur se7en sa marche et pas sur XP...

Voila donc y'a quelque chose que je ne comprend pas si quelqu'un a des infos sur la gestion de la mémoire de XP avec Firefox ou si quelqu'un a une idée de mon probleme parce que je vois pas trop comment réglé sa.

Sans la fonction de dessin sa marche très bien je vous drop le fichier de dessin dans le 2nd poste.

PS : Vous pouvez reutilisé ce code si cela vous chante, il est complet avec un petit soucie sur le undo - redo mais sa fait la blague. Il marche avec toutes les version de Firefox ,chrome et opera gérant les canvas

[maximeK]

Donc j'appelle la fonction prepareCanvas apres avoir crée l'image que j'utiliserais comme "background" de mon canvas.

/*******************************************************
*
*
*	  	Declarations des variables
*
*
********************************************************/


//GENERAL
var canvasDiv;
var canvas;
var context;

var image;
var contextIMG;

var mask;
var contextMask;

var padding = 25;

//CREATION DE L'IMAGE BACKGROUND
var outlineImage = new Image();

//COULEUR ET TAILLE DU TRAIT
var red = 0;
var green = 0;
var blue = 255;
var curSize = 5;
var curColor = "rgba(0,0,255,1)";

//TABLEAU DE POINTS ET DE VARIABLE
var clickX = new Array();
var clickY = new Array();
var clickColor = new Array();
var clickSize = new Array();
var clickDrag = new Array();
var clickErase = new Array();

var clickX_mega = new Array();
var clickY_mega = new Array();
var clickColor_mega = new Array();
var clickSize_mega = new Array();
var clickDrag_mega = new Array();
var clickErase_mega = new Array();

//BOLEAN DE DESSIN ET DE ERASE
var paint = false;
var erase_mode = false;
var line_mode = false;

//Taile de l'image et de la zone de draw
var drawingAreaX = 111;
var drawingAreaY = 11;
var drawingAreaWidth = canvasWidth = 0;
var drawingAreaHeight = canvasHeight = 0;

//UNDO - REDO
var restorePoints = new Array();
var restoreIndex = new Array();
var undoSteps = 0;

//Container pour la taille de l'image
var container;



/*******************************************************
*
*
*	  	Fonctions dite main
*
*
********************************************************/

var line_startX;
var line_startY;
function prepareCanvas(width,height,url_img,url_mask)
{
container = document.getElementById('movieDiv');

drawingAreaWidth = width;
canvasWidth = width;
drawingAreaHeight = height;
canvasHeight = height;
path_image = url_img;
path_mask = url_mask;

canvasDiv = document.getElementById('canvasDiv');
document.getElementById('ckb_mask').checked = false;

//Suppresion des 3 anciennes couches
removeChilds(canvasDiv);

//Creation des 3 couches
initIMG(path_image);
initMask();
initCanvas();

//Modification des styles pour affichages par defaut
replaceElement();
reset();

// Binding des events
$('#canvas').mousedown(function(e){
	if(!line_mode){
		var mouseX = e.pageX - this.offsetLeft;
		var mouseY = e.pageY - this.offsetTop;
		paint = true;
		addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop);
		redraw();
	}else{
		paint = true;
		line_startX = e.pageX - this.offsetLeft;
		line_startY = e.pageY - this.offsetTop;
		addClick(line_startX, line_startY);
	}
});


$('#canvas').mousemove(function(e){
	if(paint && !line_mode){
		addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop, true);
		redraw();
	}else if(paint && line_mode){
		context.clearRect(0, 0, canvas.width, canvas.height);
		redraw();
    			context.beginPath();
     			context.moveTo(line_startX,line_startY);
		context.strokeStyle = curColor;
		context.lineWidth = curSize;
     			context.lineTo(e.pageX - this.offsetLeft,  e.pageY - this.offsetTop);
		context.strokeStyle = curColor;
		context.lineWidth = curSize;
     			context.stroke();
     			context.closePath();
	}
});

$('#canvas').mouseup(function(e){
	if(line_mode) addClick(e.pageX - this.offsetLeft, e.pageY - this.offsetTop,true);
	paint = false;
  	redraw();
});

}

/*******************************************************
*
*
*	  Fonctions declarant mes elements
*
*
********************************************************/
function removeChilds(e)
{
if(!e) {
       	return false;
   	}
   	if(typeof(e)=='string') {
   	    e = xGetElementById(e);
   	}
   	while (e.hasChildNodes()) {
   	    e.removeChild(e.firstChild);
   	}
   	return true;
}

function replaceElement()
{
//Initialisation de la palette
var comments = document.getElementById('comments');
comments.style.display = 'block';
var canvas = document.getElementById('canvasDiv');
var palette = document.getElementById('palette');
palette.style.display = 'block';
var left = canvasWidth+20;
palette.style.left = left+"px";	
}

function initIMG(url)
{
document.createElement('movieDiv').style.visibility = 'hidden';
image = document.createElement('img');
image.setAttribute('width', canvasWidth);
image.setAttribute('height', canvasHeight);
image.setAttribute('id', 'screenimg');
image.setAttribute('src', url+'?random='+Math.round(Math.random()*100));
canvasDiv.appendChild(image);
}

function initMask()
{
mask = document.createElement('canvas');
mask.setAttribute('width', canvasWidth);
mask.setAttribute('height', canvasHeight);
mask.setAttribute('id', 'screenmask');
mask.setAttribute('style','display:none; z-index:500;');

document.getElementById('canvasDiv').appendChild(mask);
contextMask = mask.getContext("2d");
contextMask.beginPath();
contextMask.globalAlpha = 0.25;
   	contextMask.rect(0, 0, canvasWidth, canvasHeight);
contextMask.fillStyle = "white";
 	contextMask.fill();
 	contextMask.lineWidth = 5;
   	contextMask.strokeStyle = 'white';
   	contextMask.stroke();
}

function initCanvas()
{
canvas = document.createElement('canvas');
canvas.setAttribute('width', canvasWidth);
canvas.setAttribute('height', canvasHeight);
canvas.setAttribute('id', 'canvas');
document.getElementById('canvasDiv').appendChild(canvas);
//TWEAK POUR IE
if(typeof G_vmlCanvasManager != 'undefined') {
	canvas = G_vmlCanvasManager.initElement(canvas);
}
context = canvas.getContext("2d");
canvasDiv.style.display = 'block';
canvas.setAttribute('style', 'z-index:5000; display:block;');
}

/*******************************************************
*
*
*	  Fonctions touchant la palette
*
*
********************************************************/

function setErase(span,erase_p)
{
unselect_color_img();
erase_mode = erase_p;
span.style.border = "solid white 1px";
}

function unselect_brush()
{	
document.getElementById("imgbrushsmall").style.border = "solid white 0px";
document.getElementById("imgbrushmedium").style.border = "solid white 0px";
document.getElementById("imgbrushbig").style.border = "solid white 0px";
}

function unselect_point()
{	
document.getElementById("imgpoint").style.border = "solid white 0px";
document.getElementById("imgline").style.border = "solid white 0px";
}

function unselect_color_img()
{
document.getElementById("imgblue").style.border = "solid white 0px";
document.getElementById("imgred").style.border = "solid white 0px";
document.getElementById("imgeraser").style.border = "solid white 0px";
}

function setColor(span,red_p,green_p,blue_p)
{
unselect_color_img();
erase_mode = false;
//line_mode = false;
red = red_p;
green = green_p;
blue = blue_p;
curColor = "rgba("+red+","+green+","+blue+",1)";
span.style.border = "solid white 1px";
}

function setSize(span,size_p)
{
unselect_brush();
curSize = size_p;
span.style.border = "solid white 1px";
}

function toggleLine(span,value)
{
unselect_point();
line_mode = value;
span.style.border = "solid white 1px";
}

/*******************************************************
*
*
*	  Fonctions touchant le dessin et le mask
*
*
********************************************************/

function showMask(visible)
{
if(visible){
	mask.setAttribute('style','display:block');
}else{
	mask.setAttribute('style','display:none;');	
}
}

function addClick(x, y, dragging)
{
//Data a un temps T
clickX.push(x);
clickY.push(y);
clickDrag.push(dragging);
clickColor.push(curColor);
clickSize.push(curSize);
clickErase.push(erase_mode);

//Data complete pour un undo redo
clickX_mega.push(x);
clickY_mega.push(y);
clickDrag_mega.push(dragging);
clickColor_mega.push(curColor);
clickSize_mega.push(curSize);
clickErase_mega.push(erase_mode);
}


function reset()
{
clearCanvas();
resetPoints();
saveRestorePoint();
clearTableau();
clearTableau_mega();
}

function clearCanvas()
{
context.fillStyle = '#ffffff'; // Astuce Chrome
context.fillRect(0, 0, canvasWidth, canvasHeight);
canvas.width = canvas.width;
clearTableau();
erase_mode = false;
}

function clearTableau()
{
clickDrag = new Array();
clickColor = new Array();
clickSize = new Array();
clickX = new Array();
clickY = new Array();
clickErase = new Array();
}
function clearTableau_mega()
{
clickX_mega = new Array();
clickY_mega = new Array();
clickColor_mega = new Array();
clickSize_mega = new Array();
clickDrag_mega = new Array();
clickErase_mega = new Array();
}
function redraw()
{
context.lineJoin = "round";
for(var i=0; i < clickX.length; i++)
{	
	context.beginPath();
   		if(clickDrag[i] && i){
   			context.moveTo(clickX[i-1], clickY[i-1]);
   		}
	else{ context.moveTo(clickX[i]-1, clickY[i]); }

    		context.lineTo(clickX[i], clickY[i]);
    		context.closePath();
  		if(!clickErase[i]){
		context.globalCompositeOperation = 'source-over';
		context.strokeStyle = clickColor[i];
	}
	else if(clickErase[i]){
		context.globalCompositeOperation = 'destination-out';
		context.strokeStyle = 'rgba(0,0,1,1)';
	}
 		context.lineWidth = clickSize[i];
 		context.stroke();

}
if(!paint) saveRestorePoint();	
}

/*******************************************************
*
*
*		Fonctions touchant le undo-redo
*
*
********************************************************/


function saveRestorePoint()
{
var imgSrc = canvas.toDataURL('image/png');
restorePoints.push(imgSrc);
restoreIndex.push(clickX_mega.length);
}

function resetPoints()
{
undoSteps = 0;
restorePoints = new Array();
restoreIndex = new Array();
}


function undo()
{
if (restorePoints.length > 0 && undoSteps < restorePoints.length-1) {
	clearCanvas();

	var oImg = new Image();
	oImg.onload = function() {
		context.drawImage(oImg, 0, 0);
	}
	undoSteps++;
	oImg.src = restorePoints[restorePoints.length-1-undoSteps];
	getPositions();
}
}

function redo()
{
if (restorePoints.length > 0 && undoSteps > 0) {
	clearCanvas();

	var oImg = new Image();
	oImg.onload = function() {
		context.drawImage(oImg, 0, 0);
	}
	undoSteps--;
	oImg.src = restorePoints[restorePoints.length-1-undoSteps];	
	getPositions();
}	
}

function getPositions()
{
clearTableau();
for(var idx=0;idx <= restoreIndex[restoreIndex.length-1-undoSteps];idx++)
{
	clickX.push(clickX_mega[idx]);
	clickY.push(clickY_mega[idx]);
	clickDrag.push(clickDrag_mega[idx]);
	clickColor.push(clickColor_mega[idx]);
	clickSize.push(clickSize_mega[idx]);
	clickErase.push(clickErase_mega[idx]);
}

}

function cancel()
{
// définition des éléments
var container = document.getElementById('movieDiv');
var textarea = document.getElementById('textarea');
var screenimg = document.getElementById('screenimg');
var canvas = document.getElementById('canvasDiv');
var screenmask = document.getElementById('screenmask');
var palette = document.getElementById('palette');

// Gestion des éléments visibles
container.style.visibility = 'visible';
canvas.style.display = 'none';	
canvas.style.cursor = 'none';
textarea.value = '';
screenimg.style.display = 'none';
screenmask.style.display = 'none';
palette.style.display = 'none';

// Requête ajax de suppression des images temporaires inutilisées
xhr = new XMLHttpRequest();
xhr.open('POST', 'XXXXXX.php', false);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send();

// Restauration des éléments de canvas (outils, propriétés, historique d'undo/redo)	
reset();
}

function ajaxSave()
{
// définition des éléments
var textarea = document.getElementById('textarea');
var canvas = document.getElementById('canvas');

// Sauvegarde du watermark
var canvasData = canvas.toDataURL('image/png');

// Requête ajax d'enregistrement du watermark et de fusion des images
xhr = new XMLHttpRequest();
xhr.open('POST', 'XXXXX.php', false);
xhr.setRequestHeader('Content-Type', 'application/upload');
xhr.send(canvasData);

// Requête ajax d'enregistrement de l'image finale dans la BDD
xhr = new XMLHttpRequest();
xhr.open('POST', 'XXXX.php', false);
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
xhr.send(XXXXX);
cancel();
distant_refresh();
}

[maximeK]

Est-ce possible que des liseners JS (mal optimiser dans l'utilisation que j'en fait) puisse faire planter le navigateur ?

[maximeK]

Problème résolu, effectivement c'était mes listener qui foutais le bordel :)