P5js gère le "glisser-déposer" ("drag&drop" en anglais). Il suffit de déposer un fichier dans une zone défini à l'avance. La fonction "drop" est un listener qui déclenche la fonction de "callback" qui lui est associée, quand le fichier, qui a été déposé, est prêt à être utilisé par votre programme.
Modifier comme suit les fichiers suivants :
index.html
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<title>p5.js</title>
<link rel="stylesheet" href="style.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.4.18/p5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.4.18/addons/p5.dom.min.js"></script>
<script src="script.js"></script>
</head>
<body>
<div id="zone"><p>glisser et déposer un fichier ici</p></div>
</body>
</html>
style.css
#zone {
border : 1px solid black;
text-align: center;
width : 30%;
height : 150px;
margin-left: auto;
margin-right: auto;
}
#zone p{
margin-top:65px;
}
script.js
var zone;
function setup(){
noCanvas();
zone=select("#zone");
zone.drop(fichierCharge);
}
function draw(){
}
function fichierCharge(){
createP("Le fichier a été déposé");
}
Dans cet exemple, la zone de "glisser-déposer" est une "div". Le listener "drop" (associé à la div de "glisser-déposer"), a pour fonction de "callback" la fonction "fichierCharge". Pour l'instant, nous nous contentons d'afficher un message qui indique que le fichier a bien été "récupéré".
La fonction de "callback" lié au listener "drop", peut prendre un paramètre que nous nommerons (mais ce n'est pas une obligation) "file". Comme vous l'avez sans doute deviné, "file" nous permettra d'obtenir des informations sur le fichier qui a été "déposé" :
Modifier comme suit le fichier suivant (index.html et style.css ne sont pas modifiés) et testez cet exemple en "glissant-déposant" différents types de fichiers (image, texte...) :
script.js
var zone;
function setup(){
noCanvas();
zone=select("#zone");
zone.drop(fichierCharge);
}
function draw(){
}
function fichierCharge(file){
createP("Le fichier '"+file.name+"' a été déposé. Ce fichier est de type '"+file.type+"' et a pour taille "+file.size+" octets");
}
Tout cela n'aurait pas grand intérêt s'il n'était pas possible de récupérer le contenu du fichier : cela peut être fait grâce à "file.data".
Modifier comme suit le fichier suivant (index.html et style.css ne sont pas modifiés) et testez cet exemple en "glissant-déposant" différents types de fichiers (image, texte...) :
script.js
var zone;
function setup(){
noCanvas();
zone=select("#zone");
zone.drop(fichierCharge);
}
function draw(){
}
function fichierCharge(file){
createP("Le fichier '"+file.name+"' a été déposé. Ce fichier est de type '"+file.type+"' et a pour taille "+file.size+" octets");
if (file.type=="image"){
img = createImg(file.data);
img.size(100,100);
}
else {
createP("Désolé ce fichier n'est pas un fichier de type image");
}
}
Dans cet exemple, nous utilisons la fonction "createImg" pour la première fois, si vous voulez en savoir plus sur son utilisation, n'hésitez pas à consulter la documentation officielle
Il est aussi possible de récupérer les données présentes dans un fichier de type "text" (ces fichiers n'ont pas forcément l'extension ".txt"). Dans ce cas, "file.data" est une chaîne de caractères. Cette chaîne de caractères correspond au contenu du fichier texte.
Modifier comme suit le fichier suivant (index.html et style.css ne sont pas modifiés) et testez cet exemple en "glissant-déposant" différents types de fichiers (image, texte...) :
script.js
var zone;
function setup(){
noCanvas();
zone=select("#zone");
zone.drop(fichierCharge);
}
function draw(){
}
function fichierCharge(file){
createP("Le fichier '"+file.name+"' a été déposé. Ce fichier est de type '"+file.type+"' et a pour taille "+file.size+" octets");
if (file.type=="image"){
img = createImg(file.data);
img.size(100,100);
}
else if (file.type=="text"){
createP("contenu du fichier texte :");
createP(file.data);
}
else {
createP("Désolé, ce format de fichier n'est pas pris en charge");
}
}
P5js propose deux autres listeners qui pourraient vous être utiles :
Créez un programme permettant d'obtenir ceci (testez bien le cas où le fichier n'est pas de type "image") :
Il est possible d'utiliser les images récupérées par "glisser-déposer" dans un canvas :
Modifier comme suit le fichier suivant (index.html et style.css ne sont pas modifiés) et testez cet exemple en "glissant-déposant" différents types de fichiers (image, texte...) :
script.js
var zone;
var can;
var msg;
function setup(){
zone=select("#zone");
zone.drop(fichierCharge);
msg=createP("");
can=createCanvas(200,200);
background(0);
}
function draw(){
}
function fichierCharge(file){
if (file.type=="image"){
msg.html("");
img = createImg(file.data);
img.hide();
image(img,0,0,200,200);
}
else {
msg.html("Désolé ce fichier n'est pas un fichier de type image");
}
}
Nous utilisons la fonction "image" qui permet d'afficher une image dans un canvas (voir ici pour plus d'explications sur cette fonction).
Notez l'utilisation de la fonction "hide" qui permet de rendre un élément html invisible. Ici, nous rendons invisible "img" afin que l'image n'apparaisse que dans le canvas.