0

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

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

这显然是 Adob​​e 中的一个错误 - 请参阅此页面。由于这个错误，该post_image方法没有成功完成，所以javascript回调永远不会触发——我基本上没有办法判断图像是否保存成功。

所以，我想我会使用get_img_binaryOFC2的方法来获取图像的二进制数据，并使用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 );
        }
    });

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

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

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

我拥有的 Perl 脚本适用于该post_image方法，所以我认为不存在问题吗？

提前致谢！

4

2 回答 2

0

我在使用 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()函数（当您在 flahs 图表上右键单击但选择“本地保存图像”时会自动调用该函数）时，图表的图像被传输到弹出窗口并且数据（base64 二进制图像）是发布到 php 脚本/ofc/base64post.php对图片进行排序：

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

希望对某人有所帮助！

于 2010-02-23T08:48:43.493 回答
0

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

这是我的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 表示，然后将其保存到文件中。

于 2009-12-03T17:32:53.433 回答