Html2canvas

Bonjour,
J'essai de créer une image à partir d'une DIV. J'utilise la librairie html2canvas qui me permet de faire cela parfaitement. Voici la fonction utilisée :

function downloadimage(id,name) {
        var container = document.getElementById(id);
        html2canvas(container, { allowTaint: true }).then(function (canvas) {
            var link = document.createElement("a");
            document.body.appendChild(link);
            link.download = name;
            link.href = canvas.toDataURL();
            link.target = '_blank';
            link.click();
        });
    }

Actuellement, mon imge.jpg se télécharge dans mon dossier téléchargement, ce qui est le dossier par défaut de Chrome.
Est-il possible de spécifier un dossier ? Le but étant de ranger les image.jpg dans différent dossier car j'appelle cette fonction dans un foreach

foreach ($codes as $code) {?>
                    <div class="vignette_color" id=<?php echo $code['id'];?> style="background:<?php echo $code['color_hex'];?>"></div>
                </div>
                <script>downloadimage(<?php echo $code['id'];?>,'<?php echo fctRetirerAccents($str);?>' );
            <?php } ?>

Merci par avance pour vos retours et je reste dispo

Salut,

urlien a écrit :

...
Actuellement, mon imge.jpg se télécharge dans mon dossier téléchargement, ce qui est le dossier par défaut de Chrome.
Est-il possible de spécifier un dossier ?
...

Non, tu n'as pas accès au dossier local de Mme Michu

Merci pour vos réponses.
Cette lib ressemble bcp à html2canvas il me semble. Je regarde le Gît. Mais du coup, comment et où je peux spécifier un dossier de téléchargement ? Dans cette ligne ?

link.download = 'my-image-name.jpeg';

Par :

link.download = '.. /folder/my-image-name.jpeg';

?
++

A priori tu ne peux pas, c'est la personne qui va sur ton site qui doit configurer son navigateur web pour choisir si c'est automatiquement le dossier téléchargement ou si cela lui demande où elle doit enregistrer.

Je suppose que tu dois pouvoir créer un zip qui contiendra directement la bonne arborescence et les images dedans, ça devrait permettre d’éviter d'avoir une flopée de téléchargements ?

Créer un *. zip ? Je ne comprend pas ce que tu veux dire. Pour moi ça serait comme un dossier non ?

Je ne sais pas exactement, ton problème ne m'a pas l'air très clair
De ce que j'en comprends tu génères des images et tu les télécharges une par une pour les ranger dans une arborescence.

Je suppose que tu dois pouvoir générer directement un zip qui va contenir ton arborescence et les images aux bons endroits.

Yes,
En fait je code une liste de div qui ont simplement un fond coloré. J'ai besoin de créer des image de à partir de ces div.

<div style:"background=#???";>rouge 1</div>
<div style:"background=#???";>rouge 2</div>
<div style:"background=#???";>rouge 3</div>
<div style:"background=#???";>bleu 1</div>
<div style:"background=#???";>bleu 2</div>
<div style:"background=#???";>bleu 3</div>

Avec la librairie htmltocanvas j'arrive donc à créer une image *.jpg (rouge1.jpg, rouge2.jpg...) et effectivement elles se téléchargent dans le dossier download sélectionné par le navigateur "en vrac".
Pour l'heure j'ai fait un petit formulaire qui me permet de définir la couleur que je veux traiter, comme cela je créer toutes les images rouge puis je les copie/colle dans mon dossier ROUGE.
Ce que j'aimerai c'est effectivement créer automatiquement le dossier (Rouge, Bleu,...) et copier les image correspondante dedans, et ce automatiquement !
C'est peut-être plus clair non

Je suis parti de cette page la : https://www.designnominees.com/blog/how-to-download-html-dom-node-as-image-or-zip-file-in-react et j'ai bidouillé une solution avec ton exemple
Bon c'est crade, il faudrait faire au moins un tableau et des boucles pour les ids pour que cela soit plus facilement utilisable, et rajouter un bouton pour lancer la fonction qui provoque le téléchargement, la ça part directement à dl le zip , mais c'est surtout pour l'exemple de ce que ça peut donner :
Du coup il faut les 3 libs indiqués dans l'article dom-to-image , file-saver et jszip

<div id="#F00" style="background:#F00;">rouge 1</div>
<div id="#F80" style="background:#F80;">rouge 2</div>
<div id="#FF0" style="background:#FF0;">rouge 3</div>
<div id="#00F" style="background:#00F;">bleu 1</div>
<div id="#08F" style="background:#08F;">bleu 2</div>
<div id="#0FF" style="background:#0FF;">bleu 3</div>

let promises = [];
let images = [];

promises.push(domtoimage.toBlob(document.getElementById('#F00')).then(function (blob) {images.push(blob);}));
promises.push(domtoimage.toBlob(document.getElementById('#F80')).then(function (blob) {images.push(blob);}));
promises.push(domtoimage.toBlob(document.getElementById('#FF0')).then(function (blob) {images.push(blob);}));
promises.push(domtoimage.toBlob(document.getElementById('#00F')).then(function (blob) {images.push(blob);}));
promises.push(domtoimage.toBlob(document.getElementById('#08F')).then(function (blob) {images.push(blob);}));
promises.push(domtoimage.toBlob(document.getElementById('#0FF')).then(function (blob) {images.push(blob);}));

Promise.all(promises).then(function(){
      let zip = new JSZip();
      zip.file('Rouge/F00.png', images[0], { binary: true });
      zip.file('Rouge/F80.png', images[1], { binary: true });
      zip.file('Rouge/FF0.png', images[2], { binary: true });
      zip.file('Bleu/00F.png', images[3], { binary: true });
      zip.file('Bleu/08F.png', images[4], { binary: true });
      zip.file('Bleu/0FF.png', images[5], { binary: true });
      zip.generateAsync({ type: "blob" })
      .then(function callback(blob) {
        saveAs(blob, "images.zip");
      })
    });

Et le jsfiddle qui illustre ça : https://jsfiddle.net/jryno24m/

OK, merci, j'en demandez pas tant ????????????. Je vais "tenter" de cleaner cela en suivant tes conseils. Je viendrais poster cela ici !
Un grand merci.

De rien, et je n'ai pas fait grand chose au final, j'ai juste cherché un code existant qui fait du zip de canvas et je l'ai vaguement adapté à ton mini exemple (de manière un peu crade )

Idéalement il faut nettoyer le code en javascript, mais vu que tu as l'air de faire du php dans un de tes postes précédents, tu dois également pouvoir facilement générer ma solution crade directement depuis php

Hop nouvelle version plus propre en rajoutant un tableau qui contient les infos des couleurs voulus et 2 petites boucles pour remplacer les longues listes à rallonge toute nulles : https://jsfiddle.net/z65va4q1/

<div id=couleurs>
</div>

let couleurs = [
{id : '1' , colorName : 'rouge1' , colorHex :'#F00' , dossier : 'rouge' },
{id : '2' , colorName : 'rouge2' , colorHex :'#F80' , dossier : 'rouge'},
{id : '3' , colorName : 'rouge3' , colorHex :'#FF0' , dossier : 'rouge'},
{id : '4' , colorName : 'bleu1' , colorHex :'#00F' , dossier : 'bleu'},
{id : '5' , colorName : 'bleu2' , colorHex :'#08F' , dossier : 'bleu'},
{id : '6' , colorName : 'bleu3' , colorHex :'#0FF' , dossier : 'bleu'},
]
let promises = [];

//On crée les divs de chaque couleur, on push les promises en même temps et on stockera le blob directement dans le tableau de chaque couleur
couleurs.forEach(couleur => {
const div = document.createElement('div');
div.setAttribute('id', couleur.id);
div.setAttribute('style', 'background:'+couleur.colorHex);
div.textContent= couleur.colorName;

document.getElementById("couleurs").appendChild(div);

promises.push(domtoimage.toBlob(document.getElementById(couleur.id)).then(function (blob) {couleur.blob = blob;}));
}
)

Promise.all(promises).then(function(){
      let zip = new JSZip();

			//on fait une boucle pour crée les file dans le zip
      couleurs.forEach(couleur => {
      zip.file(couleur.dossier+'/'+couleur.colorName+'.png', couleur.blob, { binary: true });
      })
      
      zip.generateAsync({ type: "blob" })
      .then(function callback(blob) {
        saveAs(blob, "images.zip");
      })
      
    });