Discussion :

[Goltar]

Bonjour à tous.
Je cherche à downloader une image affichée sur ma page. Cette image est au format base64.
Je parviens à le faire via la commande:

Code :

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

1
2
 
window.location.href = 'data:application/octet-stream;base64,' + $Picture;

$Picture = le code base64 de l'image

par contre j'aimerais modifier le nom du fichier, qui dans l'état actuel est inébranlablement "Unknown.jpg"
en le remplaçant par le contenu d'une variable $NomFich.

Quelqu'un aurait-il amabilité de me mettre sur la voie?
D'avance merci

[eleydet]

Bonsoir,

window.open() crée une nouvelle fenêtre secondaire de navigation, dans laquelle on peut écrire ce qu'on veut. C'est peut-être une solution?

Sinon, le PHP permet de modifier un fichier en y plaçant le contenu de son choix. Il faut commencer par créer ce fichier avant d'utiliser l'instruction window.location.href=...

[Goltar]

en me basant sur le post : https://gist.github.com/madhums/e749dca107e26d72b64d
après installation du fs.js trouvé: https://gist.github.com/nasser/5a430...bf03fbf054263a
j'essaie d'adapter le code:

Code :

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

1
2
3
4
5
6
7
8
 
var $Photo = "data:image/jpg;base64, " + $Picture;
var fs = require('fs');
var img = $Photo;
// strip off the data: url prefix to get just the base64-encoded bytes
var data = img.replace(/^data:image\/\w+;base64,/, "");
var buf = new Buffer(data, 'base64');
fs.writeFile($NomFich, buf);

J'obtient l'erreur: Can't find variable: Buffer
Il semblerait que Buffer() soit déprécié et remplacé par Buffer.from(), mais dans les deux cas cela ne fonctionne pas.
Une idée?
D'avance merci

[Beginner.]

Salut,

Tu utilises Node.js ?

[Goltar]

Salut,
Non, je devrais?

[Beginner.]

Ben le code que tu as posté utilises Node.js...

J'obtient l'erreur: Can't find variable: Buffer

Tu n'as que cette erreur ? Tu n'as pas eu d’erreur concernant la fonction require() par exemple ?

[Goltar]

OK merci pour l'info, c'est bloquant car mode.js est dépendant de la machine (windows, os, linux)
Ce n'est donc pas la bonne solution ! Je reprend ma pelle pour creuser ailleurs alors!
Toute lumière sont bienvenues, c'est plus facile de voir si on attaque pas le béton ;-)

Tu n'as pas eu d’erreur concernant la fonction require() par exemple ?

non car j'ai inclus require.js et fs.js

[Beginner.]

Je ne sais pas si c'est possible mais pourquoi as-tu besoin de donner un nom à l'image sachant que tu as le code base64 de l'image stocké dans une variable ? Pourquoi ne pas utiliser cette variable et si à un moment donné tu veux ajouter cette image dans une page web il suffira je pense de "créer" une balise <img> et l'ajouter au DOM après avoir renseigner le source (l’attribut src de l'image)...

[Goltar]

Le but est de lire une carte d'identité électronique de récupérer la photo (en base64) et da la sauver sous le nom, prénom du détenteur.
Ceci afin de pouvoir l'utiliser pour la création d'une nouvelle carte de membre d'une assoc.
La récupération et l'affichage fonctionnent à merveille, il ne me reste plus qu'a la sauvegarder sur clic d'un bouton.

[Beginner.]

Ah mais pour ça il va falloir écrire dans le disque dur pour stocker l'image sous forme de fichier or on ne peut pas faire ça en JS pour des raisons de sécurité (mais il me semble que certains ont trouvé des astuces...) d'ailleurs le code que tu as posté utilise le module "fs" de Node pour faire ça...

[Watilin]

On ne peut pas toucher directement au système de fichier, en revanche on peut inviter la personne à enregistrer un fichier. C’est alors elle qui décide de l’emplacement et du nom du fichier, mais on peut lui suggérer un nom par défaut avec l’attribut download des éléments <a>.

Voici un exemple utilisant une URL blob:, mais ça devrait fonctionner pareil avec les URL data:.

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
fetch("/")
  .then((response) => response.blob())
  .then((blob) => {
    let blobUrl = URL.createObjectURL(blob);
 
    let $a = document.createElement("a");
    $a.href = blobUrl;
    $a.download = "fichier-trop-chouette";
 
    document.body.appendChild($a);
    $a.click();
    $a.remove();
 
    URL.revokeObjectURL(blobUrl);
  });

[Goltar]

Merci pour la piste Watilin.
Il y a matière à recherche.
Commençons par le fetch.then()
il est bien question de celui-ci: https://github.com/github/fetch/blob/master/fetch.js

[Watilin]

Le lien que tu donnes est un polyfill. Fetch c’est la version moderne de XMLHttpRequest et c’est un futur standard. Si tes navigateurs sont à jour, tu y as accès de base.
https://developer.mozilla.org/fr/doc...PI/Using_Fetch
https://caniuse.com/#search=fetch

[Goltar]

Si tes navigateurs sont à jour, tu y as accès de base.

Malheureusement pas sous safari 11.0
Mais je continue à creuser !

[Watilin]

Si tu te sers de Safari pour développer, fetch est le cadet de tes soucis.

Edit : ok, je reconnais que j’utilise un peu un argument de groupe social et c’est mal. Cela dit, j’ai un argument impartial : je viens de re-vérifier le site CanIUse dont j’ai déjà donné le lien dans mon précédent post, et il indique que Safari supporte fetch depuis sa version 10.1. Donc soit le site ment, soit tu as fait une erreur quelque part.

Edit 2 : après relecture de la discussion complète, je ne suis pas sûr que tu aies besoin de fetch ou toute autre forme de requête réseau, car il apparaît que tu as déjà les données de l’image côté client. Tout ce qu’il te faut faire, c’est simplement les ajouter à un lien et mettre un attribut download sur ce lien.

Code :

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

1
2
3
4
5
6
let $a = document.createElement("a");
$a.href = "data:image/jpg;base64, " + $Picture;
$a.download = "photo.jpg";
document.body.appendChild($a);
$a.click();
$a.remove();

[Goltar]

J'ai certainement fait une erreur, car même dans Netbeans Fetch n'est pas reconnu.

Je suis loin de maîtriser, je continue à creuser.
Par contre ce qui m'inquiète, c'est qu'il est dit que cette fonction est expérimentale et risque d'être modifiée.

Edit: Désolé je n'avais pas vu ton edit2.
En effet c'est beaucoup plus simple, par contre merci pour le fetch qui me semble très interessant, je vais certainement approfondir le sujet (pour le plaisir) ;-)

[Watilin]

Oui, c’est un template du site MDN, probablement ajouté automatiquement (comme les « bandeaux » de Wikipédia). Il fait référence au fait que fetch est un futur standard qui est encore en cours de discussion, et va sans doute évoluer.
C’est une question d’appréciation personnelle de savoir dans quelle direction le vent souffle. Dans le cas de fetch, on peut être quasiment certain que la syntaxe .then va rester telle quelle car elle fait partie du système de Promise qui a été largement débattu et a atteint un solide consensus.

De la même manière, l’aspect réseau de fetch, tout ce qui le fait ressembler à XMLHttpRequest, est déjà massivement utilisé dans l’API des Service Workers, donc s’il y a un changement dans le standard fetch, il faudrait qu’il y ait également un changement dans les SW, ce qui paraît moins probable (mais pas impossible).

D’un autre côté, on peut se pencher sur les raisons pour lesquelles fetch est encore en cours de discussion. Notamment, une des fonctionnalités encore attendue est la possiblité d’annuler une requête, chose qui était possible avec XMLHttpRequest. On peut s’attendre à voir cette fonctionnalité ajoutée à fetch dans un avenir proche.


Pour résumer, quand il est dit qu’une fonctionnalité est expérimentale, il ne faut pas en conclure que ça va être complètement réécrit dans un mois et que ça ne vaut pas la peine d’investir du temps dedans ; il faut se renseigner pour comprendre pourquoi c’est marqué expérimental, et quels aspects sont susceptibles de changer.

[Goltar]

Merci pour ton aide Watilin cela fonctionne parfaitement !