保存图表图像用开闪光灯chart2

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

题

我使用打开Flash图2 来创建一些图表。我希望能够保存图形，其中OFC2提供了一些方法来做到这一点的图像。我用在现场OFC2的示例直接显示在页面上的原始图像数据，但是，这并不在IE6，其中大部分的使用者在使用（I知道，我知道）。

工作

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

这显然是Adobe的错误 - 见此页面 。由于此错误，该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方法的作品，所以我不认为这个问题是存在的？

提前感谢！

有帮助吗？

解决方案

我似乎已经偶然到该溶液中。

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

其他提示

我已经得到了太多的麻烦，使用IE6和OFC2保存图像...所以这里是我使用（JavaScript的+ PHP）

脚本

我知道这是不是很美丽，但jQuery的不希望通过创建一个弹出工作 window.open（“”）的在我的IE6，所以我决定使用“老学法”来得到它... 

// 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丹斯选择 “图片另存本地” 的FLAHS图表上automaticaly调用） 图表的图像被tranfered到弹出和数据（二进制的base64图像）发布到PHP脚本的 /ofc/base64post.php 该rander图片：

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

希望帮助别人！

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top