개방형 플래시 차트로 차트 이미지를 저장합니다 2

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

문제

나는 사용 중입니다 오픈 플래시 차트 2 그래프를 만듭니다. 그래프의 이미지를 저장할 수 있기를 원합니다. OFC2는 이것을 달성하기위한 몇 가지 방법을 제공합니다. OFC2 사이트의 예제를 사용하여 페이지에 원시 이미지 데이터를 직접 표시했지만 대부분의 사용자가 사용하는 IE6에서는 작동하지 않습니다 (알고 있습니다. 알고 있습니다).

OFC2 방법을 사용하여 전환했습니다. post_image 원시 이미지 데이터를 서버에 게시합니다. Perl 스크립트를 사용하여 이미지 데이터를 수신하고 파일에 저장 한 다음 이미지를 볼 수 있습니다. 사용에 대한 불행한 부분 post_image 메소드는 이미지를 저장할 때 Actionscript가 오류를 던지는 것입니다. 오류 #2101 : urlvariables.decode ()에 전달 된 문자열은 이름/값 쌍이 포함 된 URL에 인코딩 된 쿼리 문자열이어야합니다.

분명히 Adobe의 버그는 참조하십시오 이 페이지. 이 오류로 인해 post_image 메소드가 성공적으로 완료되지 않으므로 JavaScript 콜백이 시작되지 않습니다. 기본적으로 이미지가 성공적으로 저장되었는지 알 수있는 방법이 없습니다.

그래서 나는 내가 사용할 것이라고 생각했다 get_img_binary OFC2의 방법 이미지의 이진 데이터를 가져오고 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 호출의 다른 설정을 시도한 것을 볼 수 있습니다.

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
}

그래서 우리가 사용할 때 이미지를 저장() 기능 (오른쪽 CLIC DANS를 선택할 때 자동으로 호출되는 것은 FLAHS 차트에서 "이미지 저장"을 선택) 차트의 이미지가 팝업으로 변환되고 데이터 (Base64 Binary Image)가 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;
?>

누군가를 도와주기를 바랍니다!

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top