imagem do gráfico Salvar com Chart2 de flash aberto
-
12-09-2019 - |
Pergunta
Eu estou usando Open Flash Chart 2 para criar alguns gráficos. Eu quero ser capaz de salvar uma imagem do gráfico, que OFC2 fornece alguns métodos para alcançar este objetivo. Eu usei o exemplo no site OFC2 para diretamente exibir os dados de imagem não processados ??na página, mas isso não funciona no IE6, que a maioria dos nossos usuários estão usando (eu sei, eu sei).
I passou a usar o OFC2 método, post_image
para postar os dados de imagem raw para o servidor. Eu uso um script Perl para receber os dados de imagem, salve-o em um arquivo, e eu posso ver a imagem. A parte triste sobre como usar o método post_image
é que ActionScript lança um erro ao salvar a imagem:
Erro # 2101:. A String passada para URLVariables.decode () deve ser uma string codificada como URL contendo pares nome / valor
O que aparentemente é um erro no Adobe - veja desta página . Devido a esse erro, o método post_image
não for concluída com êxito, de modo que o callback javascript nunca vai fogo - eu basicamente não tem uma maneira de dizer se a imagem foi salva com sucesso
Então, eu pensei que eu iria usar o método get_img_binary
de OFC2 para obter os dados binários da imagem, e usar jQuery para postar os dados binários para o meu script Perl.
Eu não consigo descobrir como enviar os dados binários corretamente, ou como deixar o meu script Perl receber os dados binários corretamente, ou ambos.
Aqui é a minha função 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 );
}
});
Você pode ver alguns dos meus comentadas linhas que eu tentei várias ContentTypes e outras configurações da chamada Ajax.
A chamada Ajax é o envio de alguns dados, mas não parecem ser binário. Eu acho que é uma representação Base64 dos dados binário.
Alguém tem alguma idéia sobre como enviar dados binários de javascript para o servidor?
O script Perl que eu tenho funciona bem para o método post_image
, então eu não acho que o problema é que há?
Agradecemos antecipadamente!
Solução
Eu pareço ter tropeçado na solução.
Aqui está minha chamada 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 aqui está a minha Perl trecho de processo / salvar a imagem:
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
Eu tinha que decodificar a representação base64 do arquivo PNG, e depois salvá-lo em um arquivo.
Outras dicas
Eu tenho problemas demais com o uso IE6 e OFC2 para salvar a imagem ... Então, aqui estão os scripts que eu uso (javascript + PHP)
Eu sei que não é muito bonita, mas jQuery não querem trabalhar em um pop-up criado através de window.open ( '') no meu IE6, então eu decidi usar um "método old school" para obtê-lo ...
// 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
}
Assim, quando usamos o save_image () função (que é automaticamente chamado quando você direito, selecione dans clic "Salvar imagem localmente" no gráfico flahs) a imagem do gráfico é tranfered para o pop-up e os dados (base64 imagem binária) são enviados para um script php /ofc/base64post.php que rander a imagem :
<?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;
?>
esperança que ajuda alguém!