Discussion :

[filoulebauju]

Bonjour,
je suis actuellement en train de développer un code me permettant d'enregistrer en image une div HTML.

J'ai trouvé pas mal de petits codes sur le net mais aucun ne répond à mon problème.
En effet, ma div contient une carte Google Maps ainsi qu'une trace.

Quand je lance mon js, seule la trace est récupérée, les "tuiles" google maps ne le sont pas.

Est-ce que quelqu'un pourrait m'aider svp ?
Je pense que c'est un soucis de z-index, ou de div superposées mais je ne suis vraiment pas sur.

Voici le code: https://jsfiddle.net/sah7s2te/3/
Merci d'avance.

[NoSmoking]

Bonjour,

Limitations
All the images that the script uses need to reside under the same origin for it to be able to read...

donc limitations atteinte pour les images issues de http://tile.opencyclemap.org/...

[filoulebauju]

Mince, je n'avais pas vu ça.

Il faudrait donc que je "rapatrie" les images à la volée avant de générer mon image.
Je vais essayer.
Merci !

[filoulebauju]

Du coup, j'ai récupéré cette fonction:

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
16
17
18
// Code taken from MatthewCrumley (http://stackoverflow.com/a/934925/298479)
      function getBase64Image(img) {
        // Create an empty canvas element
        var canvas = document.createElement("canvas");
        canvas.width = img.width;
        canvas.height = img.height;
 
        // Copy the image contents to the canvas
        var ctx = canvas.getContext("2d");
        ctx.drawImage(img, 0, 0);
 
        // Get the data-URL formatted image
        // Firefox supports PNG and JPEG. You could check img.src to guess the
        // original format, but be aware the using "image/jpg" will re-encode the image.
        var dataURL = canvas.toDataURL("image/png");
 
        return dataURL.replace(/^data:image\/(png|jpg);base64,/, "");
      }

qui est appelée comme ça:

Code :

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

1
2
3
4
5
6
7
$('#carte img').each(function(index, img){
        var image = new Image();
        image.src = getBase64Image(img);
        image.className = 'canvas';
        image.style.width = '256px';
        image.style.height = '256px';
        $('#carte img').find('src:eq('+index+')').replaceWith(image);

Malheureusement, j'ai cette erreur dans ma console:
"SecurityError: The operation is insecure.
var dataURL = canvas.toDataURL("image/png");"

Je ne comprends pas ce qui l'embête dans le fait de convertir une image en data binaire.

Merci beaucoup pour l'aide :-)

[NoSmoking]

C'est le même problème de domaine même si tu places d'abord l'image dans un <canvas>.

Si tu utilises toujours les mêmes images, héberges en une copie sur ton site, encodes les via un outils comme

• Image converted to data URI format
• Convert Image Base64 Encoder
• ...etc..

[filoulebauju]

Justement non, ce ne sont jamais les mêmes images.
C'est bien ça qui m'ennuie.

Du coup c'est impossible de faire une image d'un code HTML contenant des images hébergées ailleurs en js ?

Je peux essayer en php mais je ne suis pas sur que ce soit possible du coup.

[NoSmoking]

Tu as encore la possibilité d'utiliser Google Maps Image APIs et de l'enregistrer coté serveur.