0

Open FlashChart2を使用していくつかのグラフを作成しています。グラフの画像を保存できるようにしたいのですが、OFC2はこれを実現するためのいくつかのメソッドを提供しています。OFC2サイトの例を使用して、生の画像データをページに直接表示しましたが、ほとんどのユーザーが使用しているIE6では機能しません(私は知っています)。

post_image生の画像データをサーバーに送信するために、OFC2方式を使用するように切り替えました。Perlスクリプトを使用して画像データを受信し、ファイルに保存すると、画像を表示できます。このメソッドの使用に関する不幸な部分post_imageは、画像の保存時にActionScriptがエラーをスローすることです。エラー#2101:URLVariables.decode()に渡される文字列は、名前と値のペアを含むURLエンコードされたクエリ文字列である必要があります。

これは明らかにAdobeのバグです-このページを参照してください。このエラーのため、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

私は解決策に出くわしたようです。

これが私の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 に答える
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()関数(右クリックすると自動的に呼び出されます)を使用すると、グラフの画像がポップアップに転送され、データ(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 に答える