Enregistrer l'image graphique avec chart2 flash ouvert

StackOverflow https://stackoverflow.com/questions/1841001

Question

J'utilise Open Flash Chart 2 pour créer des graphiques. Je veux être en mesure d'enregistrer une image du graphique, qui OFC2 fournit quelques méthodes pour y parvenir. J'ai utilisé l'exemple sur le site OFC2 pour afficher directement les données d'images brutes sur la page, mais cela ne fonctionne pas dans IE6, dont la plupart de nos utilisateurs utilisent (je sais, je sais).

I passé à l'aide de la méthode OFC2, post_image pour afficher les données d'image brutes au serveur. J'utilise un script Perl pour recevoir les données d'image, l'enregistrer dans un fichier, et je peux voir l'image. La partie fâcheuse sur l'utilisation de la méthode de post_image est que ActionScript renvoie une erreur lors de l'enregistrement de l'image: Error # 2101:. La chaîne passée à URLVariables.decode () doit être une chaîne de requête codée d'URL contenant des paires nom / valeur

Ce qui est apparemment un bug dans Adobe - voir cette page . Je ne fondamentalement pas un moyen de savoir si l'image a été enregistrée avec succès

- En raison de cette erreur, la méthode post_image ne, de sorte que le rappel javascript ne sera jamais le feu termine pas avec succès.

Alors, je pensais utiliser la méthode get_img_binary de OFC2 pour obtenir les données binaires de l'image, et utiliser jQuery pour afficher les données binaires à mon script Perl.

Je ne peux pas comprendre comment envoyer les données binaires correctement, ou comment laisser mon script Perl recevoir les données binaires correctement, ou les deux.

Voici ma fonction jQuery: 

    var chartObj = $("#chart_object").get(0);
    $.ajax({
        type: "POST",
        url: 'download_image.pl',
        //contentType: 'application/octet-stream',
        contentType: 'image/png',
        //processData: false,
        //data: { imgData: chartObj.get_img_binary() },
        data: chartObj.get_img_binary(),
        dataType: "text",
        success: function(data) {
            console.log( data );
        }
    });

Vous pouvez voir quelques-unes de mes lignes commentées que j'ai essayé diverses ContentTypes et d'autres paramètres de l'appel Ajax.

L'appel Ajax envoie des données, mais il ne semble pas être binaire. Je pense qu'il est une représentation base64 des données binaires.

Est-ce que quelqu'un a des idées sur la façon d'envoyer des données binaires de javascript au serveur?

Le script Perl je fonctionne bien pour la méthode post_image, donc je ne pense pas que le problème est là?

Merci d'avance!

Était-ce utile?

La solution

Il me semble avoir trébuché sur la solution.

Voici mon appel ajax: 

var chartObj = $("#chart_object").get(0);
$.ajax({
    type: "POST",
    url: 'download_image.pl',
    contentType: 'application/octet-stream',
    processData: false,
    data: imgData,
    dataType: "text",
    success: function(data) {
        console.log( data );
    }
});

Et voici mon extrait Perl pour traiter / enregistrer l'image: 

use CGI qw(:standard);
use MIME::Base64;

...
my $img64 = param('POSTDATA');
my $img = decode_base64( $img64 );
...
#then print $img out to a file in binary mode

Je devais décoder la représentation base64 du fichier PNG, puis enregistrez-le dans un fichier.

Autres conseils

J'ai du mal aussi avec l'utilisation de IE6 et OFC2 pour sauver l'image ... Voici donc les scripts que j'utilise (javascript + PHP)

Je sais que ce n'est pas très beau mais jQuery ne veut pas travailler dans une fenêtre contextuelle créée par window.open ( « ») sur mon IE6 alors j'ai décidé utiliser une « méthode ancienne école » pour l'obtenir ... 

// javascript in the page displaying the flash chart
OFC = {};
OFC.jquery = {
    name: "jQuery",
    image: function(src) { return '<img src="data:image/png;base64,' + $('#'+src)[0].get_img_binary() + '" \/>'},
    popup: function(src) {
     var img_tag = OFC.jquery.image(src);
     var img_win = window.open('', 'imagesave');
     img_win.document.write('<html><head><title>imagesave<\/title><\/head><body>'+ img_tag + '<\/body><\/html>'); 
     img_win.document.close();
    },
    popupie: function(src) {
     var img_data = "image/png;base64,"+$("#"+src)[0].get_img_binary();
     var img_win = window.open('', 'imagesave');
     with(img_win.document) {
      write('<html>');
      write('<head>');
      write('<title>imagesave<\/title>');
      write('<\/head>');
      write('<body onload="document.forms[0].submit()">');
      write('<form action="\/ofc\/base64post.php" method="post">');
      write('<input type="hidden" name="d" id="data" value="'+img_data+'" \/>');
      write('<\/form>');    
      write('<div><img src="\/ofc\/ajax-loader.gif" border="0" alt="" \/><\/div>');
      write('<div style="font-family: Verdana;">Please wait<br \/>After you can save the   image<\/div>');
      write('<\/body>');
      write('<\/html>');
     }
     img_win.document.close();
    }
}

function save_image() { // this function is automatically called
  if ($.browser.msie)
    OFC.jquery.popupie("my_chart"); // only for IE navigators
  else
    OFC.jquery.popup("my_chart"); // for the others
}

, lorsque nous utilisons le save_image () fonction (qui est appelée lorsque vous automaticaly Dans clic droit sélectionnez "Enregistrer l'image localement" sur le tableau de Flahs) l'image du graphique est tranfered à la fenêtre et les données (base64 image binaire) sont affichés à un script php /ofc/base64post.php RANDER l'image: 

<?php
// base64post.php
$data = split(';', $_POST['d']);
$type = $data[0];
$data64 = split(',', $data[1]);
$pic = base64_decode($data64[1]);
header("Content-type: $type");
echo $pic;
?>

espoir aider quelqu'un!

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top