Question

我正在使用Open Flash Chart 2来创建一些图表。我希望能够保存图形的图像，OFC2提供了一些方法来实现这一目标。我使用OFC2站点上的示例直接在页面上显示原始图像数据，但这在我们大多数用户正在使用的IE6中不起作用（我知道，我知道）。

我切换到使用OFC2方法post_image将原始图像数据发布到服务器。我使用Perl脚本接收图像数据，将其保存到文件中，然后我可以查看图像。使用post_image方法的不幸部分是ActionScript在保存图像时抛出错误：错误＃2101：传递给URLVariables.decode（）的String必须是包含名称/值对的URL编码查询字符串。

这显然是Adobe中的一个错误 - 请参阅this page。由于此错误，post_image方法无法成功完成，因此javascript回调将不会触发 - 我基本上没有办法判断图像是否已成功保存。

所以，我想我会使用OFC2的get_img_binary方法来获取图像的二进制数据，并使用jQuery将二进制数据发布到我的Perl脚本中。

我无法弄清楚如何正确发送二进制数据，或者如何让我的Perl脚本正确地接收二进制数据，或两者兼而有之。

这是我的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 );
        }
    });

您可以从我注释掉的一些内容中看到，我尝试了各种contentTypes和Ajax调用的其他设置。

Ajax调用正在发送一些数据，但它似乎不是二进制的。我认为它是二进制数据的base64表示。

有没有人对如何将二进制数据从javascript发送到服务器有任何想法？

Perl脚本我对post_image方法工作正常，所以我认为问题不存在？

提前致谢！

Answer 1

我似乎偶然发现了解决方案。

这是我的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 );
    }
});

这是我处理/保存图片的Perl片段：

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

我必须解码PNG文件的base64表示，然后将其保存到文件中。

Answer 2

我使用IE6和OFC2来保存图像也遇到了麻烦...所以这里是我使用的脚本（javascript + PHP）

我知道它不是很漂亮但是jQuery不想在我的IE6上通过 window.open（''） 创建的弹出窗口中工作所以我决定使用“旧学校方法”来获得它......

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

所以，当我们使用 save_image（） 函数时（当你右边的clic dans自动调用时，在flahs图表上选择“本地保存图像”）图表的图像被转移到弹出窗口，数据（base64二进制图像）被发布到php脚本 /ofc/base64post.php ，其中包含图片：< / p>

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

希望能帮助别人！

使用打开的flash chart2保存图表图像

2 个答案: