Etablir l'image d'un <div>

L’auteur de ce sujet a trouvé une solution à son problème.
Auteur du sujet

Bonjour,

Imaginons un bloc <div> comme suit sur une page HTML5 :

<div id="monDiv">
    <p>Paragraphe de texte</p>
    <img src="image.png" alt="">
    <p>Autre paragraphe</p>
</div>
<input type="button" value="Capture" onclick="maCapture();">

Serait-il possible, en JavaScript, qu’en appuyant sur le bouton « Capture », on puisse créer une image (png ou jpg) de monDiv sans prendre en compte les éléments extérieurs au div en question ?

Merci.

PS : Sans utiliser la balise <canvas> !

Édité par Green

+0 -0

Cette réponse a aidé l’auteur du sujet

Il n’y a pas de méthode propre pour faire ça, à ma connaissance (pas d’API standardisée ou quoi).

J’avais vu cette bibliothèque, dom-to-image, bien que je ne l’ai jamais testée personnellement, je l’ai déjà vue utilisée et ça marchait pas trop mal à l’époque. Elle se base sur la recréation du DOM dans un élément SVG, en important tous les styles et autres, l’élément SVG pouvant ensuite être exporté dans tous les formats d’image. Je ne l’ai jamais testée, cela dit. Et de ce que j’ai rapidement lu sur le README, ça ne fonctionne que sur Firefox et Chrome (ce qui couvre déjà une bonne partie du marché, certes…).

Il se peut qu’il y ait d’autres possibilités que j’ignore, cela dit. Une rapide recherche m’a proposé d’autres solutions, mais ne les connaissant pas, je ne vais pas m’avancer dessus.

Édité par Amaury

#JeSuisArius ⋅ Mon blog scientifiqueLe Pitit Bac

+0 -0
Vous devez être connecté pour pouvoir poster un message.
Connexion

Pas encore inscrit ?

Créez un compte en une minute pour profiter pleinement de toutes les fonctionnalités de Zeste de Savoir. Ici, tout est gratuit et sans publicité.
Créer un compte