Importation d'une image depuis l'ordinateur sur une page hébergée

**lefou123456** · 22/08/2018, 10h18

Bonjour !

Je suis en train de créer un éditeur de sprites, j'ai donc décider de le poster sur Github.
Mais maintenant, je ne peux plus importer d'images depuis mon ordinateur (une question de sécurité sans doutes...)
Si je rentre l'adresse d'une image sur le net, ça marche parfaitement ! Mais c'est pas vraiment le but...

Je suis sûr qu'il y a une manière de contourner ce problème, mais comment ?

page : https://louis700.github.io/sprite-splitter/

**mathieu** · 22/08/2018, 10h34

pour récupérer un fichier de l'ordinateur, vous devez passer par un champ "input type=file".

**dbroqua** · 22/08/2018, 10h37

Salut,

Si tu rajoutais un input de type file ?

Une fois qu'un file est sélectionné tu le convertit en base64 pour pouvoir le manipuler dans ton canvas.

EDIT : grillé !

**lefou123456** · 22/08/2018, 10h39

J'ai déjà essayé, mais après ça je ne pouvais pas charger l'image dans le canvas puisque l'adresse est masquée !
Il existe peut-être une manière de récupérer directement le fichier chargé et pas son adresse à partir de cet élément ?

Ah, je vais chercher de ce côté alors, merci !

**mathieu** · 22/08/2018, 16h11

pour lire le contenu du fichier choisi dans un champ "input", vous pouvez utiliser ce code par exemple

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
var lecteur = new FileReader();
 
lecteur.addEventListener("loadend", function() {
 
	// le contenu du fichier est dans lecteur.result
 
});
 
 
lecteur.readAsBinaryString(champInput.files[0].slice());

édition à 21 h 52 : laissez tombez ce code, celui de Watilin ci dessous à l'air plus efficace.

**Watilin** · 22/08/2018, 16h33

Bonjour,
je propose cette solution :

Convertir le file en blob avec URL.createObjectURL ;
Passer l’URL du blob à un élément <img> ;
Utiliser cette <img> avec la méthode drawImage du canevas.

C’est une solution relativement simple qui ne nécessite pas l’emploi d’un FileReader. Je t’invite à lire également le guide du MDN Utiliser des fichiers à partir d’applications web.

Code html :

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
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="utf-8" />
  <title>Input file &amp; Canvas</title>
  <style>
 
  input { display: block; }
  canvas { outline: dotted thin silver; }
 
  </style>
</head>
<body>
 
<!-- "multiple" n’est pas obligatoire -->
<input type="file" multiple />
<canvas width="400" height="300">
  Canvas ne marche pas…
  Se pourrait-il que votre navigateur soit obsolète&#x202f;?
</canvas>
 
<script> "use strict";
 
let $canvas = document.querySelector("canvas");
let $input  = document.querySelector("input");
 
let cx = $canvas.getContext("2d");
 
$input.addEventListener("change", () => {
  // la boucle for va avec l’attribut "multiple"
  // pour un seul fichier, on peut se contenter de "$input.files[0]",
  // mais il faut d’abord tester son existence
  for (let file of $input.files) {
    // comme dans le guide MDN, on s’assure que le fichier est bien une image
    if (/^image\//i.test(file.type)) {
      let blobUrl = URL.createObjectURL(file);
      let $img = document.createElement("img");
 
      $img.onerror = (errorEvent) => {
        URL.revokeObjectURL(blobUrl);
        console.log(errorEvent);
      };
 
      $img.onload = () => {
        URL.revokeObjectURL(blobUrl);
        cx.drawImage($img, 0, 0);
      };
 
      $img.src = blobUrl;
    }
  }
});
 
</script>
</body>
</html>

**lefou123456** · 24/08/2018, 14h41

Merci à tous pour votre aide !

Importation d'une image depuis l'ordinateur sur une page hébergée

JavaScript

Discussions similaires

Partager

Partager