개방형 플래시 차트로 차트 이미지를 저장합니다 2
-
12-09-2019 - |
문제
나는 사용 중입니다 오픈 플래시 차트 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;
?>
누군가를 도와주기를 바랍니다!