Bonjour tout le monde,
dans le cadre de développement d'une application web avec php, j'ai eu besoin de quelque traitement sur les images à afficher tel que le zoom et la rotation. Après recherche sur le net et la refaite du code plusieurs fois, j'ai réussit à "bâtir" ce que je veux. Le code javascript faisait ce qu'il fallait faire pour une exécution statique. Mais après faire appel à php et au serveur web rien ne marchait bien. Bref, après plusieurs modifications je suis arrivé à la version du code ci-jointe. Le seul problème qui me reste à résoudre est le chargement de l'image dans les dimensions voulues (tableau ou frame). le problème n'apparait qu'avec Firefox. car avec IE il marche sans problème.
je vous pris d'essayer d'exécuter le code sur vos machines et me proposer une idée de solution. :)
mon code javascript: jsim00.js
Code Javascript :
//cette methode ne redifinit les nouvelles dimensions de l'image pour l'afficher dans un cadre precis
//et renvoit la balise html adéquoite pour l'afficher avec php
function newSizeIm(im){
// D?finition des variables 'image'
photo = new Image();
photo.src = im ;
var xmax=340;
var ymax=370;
var x=1;
var y=1;
var x = photo.width ;
var y = photo.height ;
if ((x<xmax)&&(y<ymax)){
x=x;
x=y;
}
else if ((x>xmax)&&(y<ymax)){
pr=(xmax/x)*100;
x=(x*pr)/100;
y=(y*pr)/100;
}
else if ((x<xmax)&&(y>ymax)){
pr=(ymax/y)*100;
x=(x*pr)/100;
y=(y*pr)/100;
}
else {
xp=x-xmax;
yp=y-ymax;
if (xp>yp){
pr=(xmax/x)*100;
x=(x*pr)/100;
y=(y*pr)/100;
}
else{
pr=(ymax/y)*100;
x=(x*pr)/100;
y=(y*pr)/100;;
}
}
affichage = "<img id='pic' src="+im+" width="+x+" alt='' resizable=1 border=1 height="+y+" ><canvas id='canvas' width="+x+" height="+y+"></canvas>";
return affichage;
}
//j'utilise cette fonction pour executer le redimension de l'image
// car 1 seul appel a la fonction ne fait pas l'affaire
function drawIm(im){
var t=newSizeIm(im);
return t;
}
//agrandir l'image
function Zin(id){
var xz;
var yz;
xz=document.getElementById(id).width;
yz=document.getElementById(id).height;
alert("before : xz= "+xz+"; yz= "+yz);
yz=yz+20;
xz=xz+20;
document.getElementById(id).setAttribute('width',xz);
document.getElementById(id).setAttribute('height',yz);
alert("image after : xz= "+document.getElementById(id).width+"; yz= "+document.getElementById(id).height);
if(navigator.appName != "Microsoft Internet Explorer"){
alert("canvas before : xz= "+document.getElementById('canvas').width+"; yz= "+document.getElementById('canvas').height);
document.getElementById('canvas').setAttribute('width',xz);
document.getElementById('canvas').setAttribute('height',yz);
alert("canvas after : xz= "+document.getElementById('canvas').width+"; yz= "+document.getElementById('canvas').height);
alert("image after canvas : xz= "+document.getElementById(id).width+"; yz= "+document.getElementById(id).height);
rotate(0,id);
alert("image after rotation : xz= "+document.getElementById(id).width+"; yz= "+document.getElementById(id).height);
}
}
//retrissir l'image
function Zout(id){
var xz;
var yz;
yz=document.getElementById(id).height;
yz=yz-20;
xz=document.getElementById(id).width;
xz=xz-20;
if(navigator.appName != "Microsoft Internet Explorer"){
document.getElementById('canvas').setAttribute('width',xz);
document.getElementById('canvas').setAttribute('height',yz);
rotate(0,id);
}
document.getElementById(id).setAttribute('width',xz);
document.getElementById(id).setAttribute('height',yz);
}
var p=0;
var p_deg=0;
//la rotation
function rotate(p_deg,id) {
var a=0;
if((0<p)&&(p<90)) {p=0;}
p_deg=p_deg+p;
if((p_deg>360)||(p_deg<-360)){
p_deg=(p_deg%360);
}
p=p_deg;
if(navigator.appName != "Microsoft Internet Explorer"){
var image = document.getElementById(id);
var canvas = document.getElementById("canvas");
var canvasContext = canvas.getContext("2d");
switch(p_deg) {
default :
case 0 :
canvas.setAttribute('width', document.getElementById(id).width);
canvas.setAttribute('height', document.getElementById(id).height);
a= Math.abs(p_deg);
canvasContext.rotate(a * Math.PI / 180);
canvasContext.drawImage(document.getElementById(id), 0, 0);
break;
case 90:
case -270 :
canvas.setAttribute('width', document.getElementById(id).height);
canvas.setAttribute('height', document.getElementById(id).width);
a= Math.abs(p_deg);
canvasContext.rotate(a * Math.PI / 180);
canvasContext.drawImage(document.getElementById(id), 0, -document.getElementById(id).height);
break;
case 180 :
case -180 :
canvas.setAttribute('width', document.getElementById(id).width);
canvas.setAttribute('height', document.getElementById(id).height);
a= Math.abs(p_deg);
canvasContext.rotate(a * Math.PI / 180);
canvasContext.drawImage(document.getElementById(id), -document.getElementById(id).width, -document.getElementById(id).height);
break;
case 270 :
case -90 :
canvas.setAttribute('width', document.getElementById(id).height);
canvas.setAttribute('height', document.getElementById(id).width);
a= Math.abs(p_deg);
canvasContext.rotate(a * Math.PI / 180);
canvasContext.drawImage(document.getElementById(id), -document.getElementById(id).width, 0);
break;
};
}
else {
var imag = document.getElementById(id);
switch(p_deg) {
default :
case 0 :
imag.style.filter = "progid:DXImageTransform.Microsoft.BasicImage(rotation=0)";
break;
case 90 :
case -270 :
imag.style.filter = "progid:DXImageTransform.Microsoft.BasicImage(rotation=1)";
break;
case 180 :
case -180 :
imag.style.filter = "progid:DXImageTransform.Microsoft.BasicImage(rotation=2)";
break;
case 270 :
case -90 :
imag.style.filter = "progid:DXImageTransform.Microsoft.BasicImage(rotation=3)";
break;
};
};
};
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
if (oldonload) {
oldonload();
}
func();
}
}
}
addLoadEvent(function() {
var image = document.getElementById('pic');
var canvas = document.getElementById('canvas');
if(canvas.getContext) {
image.style.visibility = 'hidden';
image.style.position = 'absolute';
} else {
canvas.parentNode.removeChild(canvas);
};
rotate(0,'pic');
});
ma page de chargement de l'image: vi0.html
Code HTML :
<html>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252"/>
<body>
<p>
choisir l'image à afficher <br />
</p>
<form content-type="image/jpeg" name="f" action="vi01.php" method="post">
<p>
image : <input type="file" name="im" enctype="image/jpeg" method="post" /><br><br><br>
<input type="submit" value="Visionner" />
</p>
</form>
</body>
</html>
ma page d'affichage de l'image: vi01.php
Code PHP :
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252"/>
<style type="text/css" media="screen">
img, canvas { border: 1px solid black; }
</style>
<script language="JavaScript" type="text/javascript" src="jsim00.js"></script>
<?php
echo "<script language='JavaScript'>";
echo "function voirIm(){";
echo "var d=drawIm('".$_POST['im']."');";
echo "return d;}";
echo "</script>";
?>
</head>
<body>
<?php
echo "<script language='JavaScript'>";
echo "voirIm();";
echo "</script>";
echo "<script language='JavaScript'>";
echo "document.write(voirIm());";
echo "</script>";
?>
<TABLE BORDER="0">
<TR>
<TH> <input type="button" value="zoom -" onClick="Zout('pic')"/> </TH>
<TH> <input type="button" value="zoom +" onClick="Zin('pic')"/> </TH>
<TH> <input type="button" value="rotaion +" onClick="rotate(90,'pic')"/> </TH>
<TH> <input type="button" value="rotation -" onClick="rotate(-90,'pic')"/> </TH>
</TR>
</TABLE>
</body>
</html>
merci pour votre aide.