Image et code JavaScript

Bonjour,

J'ai une fonction JavaScript qui me construit une image que je veux télécharger suite à un clic sur un bouton. Je fais comme suit :

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
function showImage() {
    var sHtml = '';
    var oDoc = window.open('', 'PRINT_MAP'); var strHTML = '';
 
    // les donnÃ©es utiles sont contenues dans data.routes[0]
    if (directionsDisplay.directions) {
        var oRecup = directionsDisplay.directions.routes[0];
        // rÃ©cup donnÃ©es carte
        var centre = map.getCenter(),
          zoom = map.getZoom(),
          size = map.getDiv(),
          maptype = map.getMapTypeId();
        // init URL de l'image
        var imageURL = ['http://maps.googleapis.com/maps/api/staticmap?'];
        imageURL.push('center=' + centre.toUrlValue());
        imageURL.push('zoom=' + zoom);
        imageURL.push('size=' + size.offsetWidth + 'x' + size.offsetHeight);
        if (maptype !== 'roadmap') {
            imageURL.push('maptype=' + maptype);
        }
        var i, nbLegs = oRecup.legs.length;
        // marker de debut
        imageURL.push('markers=label:A|' + oRecup.legs[0].start_location.toUrlValue());
        // marker de fin
        imageURL.push('markers=label:B|' + oRecup.legs[nbLegs - 1].end_location.toUrlValue());
        // traitement des wayPoints
        for (i = 1; i < nbLegs; i++) {
            imageURL.push('markers=color:green|' + oRecup.legs[i].start_location.toUrlValue());
        }
        // l'itinÃ©raire encrytÃ©
        imageURL.push('path=weight:6|color:0x0066ff80|enc:' + oRecup.overview_polyline.points);
        // le reste
        //imageURL.push('scale=2');
        imageURL.push('sensor=false');
        imageURL = imageURL.join('&');
        // affiche l'image
        //oImage.src = imageURL;
 
        sHtml += '<!doctype html><html><head><title style="text-align:right">Station de services de la ville de KENITRA</title>';
        sHtml += '</head><body onload="self.print()">';
        sHtml += '<img src="' + imageURL + '">';
        sHtml += strHTML;
        sHtml += '</body></html>';
        oDoc.document.open();
        oDoc.document.write(sHtml);
        oDoc.document.close();
        oDoc.focus();
    }
}

Code:

1
2
<asp:Button id="btnImg" cssclass="button" Text="To Image" runat="server" 
                     OnClientClick="javascript:showImage(); return false;" />

J'ai réussi à afficher mon image lors du clic sur un autre onglet et puis je passe à l'impression.

Mes problèmes sont les suivants :

je veux détecter le dimensionnement de l'écran et afficher le format adéquat de l'image, pas une image carrée ;
si je clique pour une première fois sur le bouton, mon image s'affiche sur un autre onglet et si je fais un deuxième clic, rien ne s'affiche même si je ferme l'onglet créé lors du premier clic ;
au lien d'afficher mon image dans un nouvel onglet, je veux faire sortir la fenêtre de téléchargement et permettre à l'utilisateur de l'enregistrer là où il veut.

quand je vérifie l'element size = 1735x700 mais l'image est petite de taille

Merci pour vos orientations.