Salva immagine con grafico aperto chart2 Flash

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

Domanda

Open Flash Chart 2 per creare alcuni grafici. Voglio essere in grado di salvare l'immagine del grafico, che OFC2 fornisce alcuni metodi per raggiungere questo obiettivo. Ho usato l'esempio sul sito OFC2 per visualizzare direttamente i dati di immagine grezzi sulla pagina, ma che non funziona in IE6, che la maggior parte dei nostri utenti utilizzano (lo so, lo so).

sono passato ad utilizzare il metodo di OFC2, post_image per pubblicare i dati di immagine grezzi al server. Io uso uno script Perl per ricevere i dati di immagine, salvarlo in un file, e posso visualizzare l'immagine. La parte sfortunata sull'utilizzo del metodo post_image è che ActionScript genera un errore durante il salvataggio dell'immagine: Errore # 2101:. La stringa passata a URLVariables.decode () deve essere una stringa di query con codifica URL che contiene coppie nome / valore

che a quanto pare è un bug in Adobe - vedi questa pagina . A causa di questo errore, il metodo post_image non viene completata correttamente, in modo che il callback JavaScript non sarà mai il fuoco - io in fondo non hanno un modo per capire se l'immagine è stata salvata con successo

.

Così, ho pensato di utilizzare il metodo di get_img_binary OFC2 per ottenere i dati binari dell'immagine, e utilizzare jQuery per inviare i dati binari al mio script Perl.

Non riesco a capire come inviare i dati binari in modo corretto, o il modo di lasciare il mio script Perl ricevere i dati binari in modo corretto, o entrambi.

Ecco la mia funzione di 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 );
        }
    });

Si può vedere da alcune delle mie righe di commento che ho provato vari ContentTypes e altre impostazioni della chiamata Ajax.

La chiamata Ajax sta inviando alcuni dati, ma non sembra essere binario. Penso che sia una rappresentazione base64 dei dati binari.

Qualcuno ha qualche idea su come inviare i dati binari dal javascript per il server?

Lo script Perl che ho funziona bene per il metodo post_image, quindi non credo che il problema c'è?

Grazie in anticipo!

È stato utile?

Soluzione

mi sembra di aver inciampato sulla soluzione.

Ecco la mia chiamata 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 );
    }
});

E qui è il mio frammento di Perl per elaborare / salvare l'immagine: 

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

ho dovuto decodificare la rappresentazione Base64 del file PNG, e quindi salvarlo in un file.

Altri suggerimenti

Ho problemi anche con l'utilizzo di IE6 e OFC2 per il salvataggio di immagini ... Così qui sono gli script che uso (javascript + PHP)

So che non è molto bella, ma jQuery non vuole lavorare in un popup creato tramite window.open ( '') sul mio IE6 così ho deciso di utilizzare un "metodo di vecchia scuola" per farlo ... 

// 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
}

così, quando usiamo il save_image () di funzione (che viene automaticamente chiamato quando si fa dans Clic seleziona "Salva immagine Localmente" sul grafico flahs) l'immagine del grafico è tranfered per il popup ei dati (base64 immagine binaria) sono iscritti ad uno script php /ofc/base64post.php che Rander l'immagine: 

<?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;
?>

speranza che aiutare qualcuno!

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top