Html vers Image et Google Maps

Version imprimable

17/05/2016, 14h55
filoulebauju

Html vers Image et Google Maps

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.
17/05/2016, 15h59
NoSmoking

Bonjour,

Citation:

Envoyé par html2canvas

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/...
17/05/2016, 17h29
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 !

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

Code:

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:

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 :-)

17/05/2016, 19h19
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
18/05/2016, 09h20
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.
19/05/2016, 19h10
NoSmoking

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