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

Version imprimable

22/08/2018, 10h18
lefou123456

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

Bonjour ! :mrgreen:

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/
22/08/2018, 10h34
mathieu

pour récupérer un fichier de l'ordinateur, vous devez passer par un champ "input type=file".
22/08/2018, 10h37
dbroqua

Salut,

Si tu rajoutais un input de type file ? :D

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

EDIT : grillé !
22/08/2018, 10h39
lefou123456

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 ! :mrgreen:

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

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.

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:

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>

24/08/2018, 14h41
lefou123456

Merci à tous pour votre aide ! :mrgreen: