HTML to CANVAS

Bonjour,

Je viens de nouveau vers vous pour vous demander votre aide.
J'essai tant bien que mal de convertir un graph Google Chart en image en passant par Canvas.
Pour aller vite, ça fonctionne parfaitement sous Chrome, mais sous IE et Mozilla, le rendu n'est pas bon, bien que l'image soit "lisible".

D'abord la méthode JS :

function getImgData(chartContainer) {
        var chartArea = chartContainer.getElementsByTagName('svg')[0].parentNode;
        var svg = chartArea.innerHTML;
        var chartDoc = chartContainer.ownerDocument;
        var canvas = chartDoc.createElement('canvas');
        canvas.setAttribute('width', '1000');
        canvas.setAttribute('height', '400');


        canvas.setAttribute(
            'style',
            'position: absolute; ' +
            'top: ' + (-chartArea.offsetHeight * 2) + 'px;' +
            'left: ' + (-chartArea.offsetWidth * 2) + 'px;');
        chartDoc.body.appendChild(canvas);
        canvg(canvas, svg);
        var imgData = canvas.toDataURL('image/png');
        $.ajax({
          type: "POST",
          url: "ajax.php",
          data: {
             img: imgData
          }
        }).done(function(o) {
          console.log(o);
        });
      }

La fichier PHP appelé par AJAX :

<?php
    define('UPLOAD_DIR', 'images/');
    $img = $_POST['img'];
    echo $img;
    $img = str_replace('data:image/png;base64,', '', $img);
    $img = str_replace(' ', '+', $img);
    $data = base64_decode($img);
    $file = UPLOAD_DIR . 'graph.png';
    $success = file_put_contents($file, $data);
    file_put_contents($file, $data);
    print $success ? $file : 'Impossible de sauvegarder l'image.';
?>

le console log me sort quelque chose d'assez éclairant sur mon problème, mais je ne sais pas pourquoi.

Le data:image recueilli par DataUrl dans Chrome ressemble à :

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA+gAAAGQCAYAAAA9TUphAAAgAElEQVR4Xu3dX+gl9X038DHJoq6Lm9y05clFyLKBwpPSil51E2+SVrwQVoJgjf/SbREMiwRMXEJXt+Qqka7E1JRdGtz0qt0gKLiw9qIRsRcLLgXxIUGCXuWxNnYlafCiGPfp9/jML/ObnTNnfuc3M+f75/W7SdYzZ+b7eX2+Z868z8yZc9Xl//mr/BEgQIAAAQIECBAgQIAAAQIbFbhKQN+ov40TIECAAAECBAgQIECAAIGFgIBuIhAgQIAAAQIECBAgQIAAgQgEBPQImmAIBAgQIECAAAECBAgQIEBAQDcHCBAgQI...

Le data:image de IE et Mozilla ressemble plus à :

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAA+gAAAGQCAYAAAA9TUphAAAGJklEQVR4nO3BgQAAAADDoPlTn+AGVQEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA[avec des A jusqu'au bout]

Au final, chrome me sort une image du graph propre, lisible et à la bonne taille.
IE et Mozilla me sortent une image toute transparente, lisible et à la bonne taille.

Pourquoi ?

Merci d'avance pour votre aide qui me serais précieuse.
Modifié par Kikimagik (11 Apr 2014 - 10:48)