1

DOJOによって開発されている私のプロジェクトには、ユーザーがチャートをPNG画像としてエクスポートできるという新しい要件があります。私は調査を行い、2つのアイデアを見つけました：

1、DOJO APIでPNG画像に直接エクスポートする適切な方法を見つけてみてください（画像にエクスポートするためのAPIメソッドを提供するExt JSと似ているため）が、DOJOチャートにはそれを行う方法がありません。

dojox.fxやdojox.gfxなどのDOJOAPIを使用して画像を描画しますが、これらは画像を生成できません。だから私はこの方法をあきらめます。

2、サードパーティのプラグインを使用してそれを行います。まず、メソッド'dojox.gfx.utils.toSvg（chart.surface）.then'でグラフの表面コンテンツを取得し、次にApacheのプラグインBatikを使用してSVGコンテンツをPNG画像に変換します。以下は私の試したコードです：

dojox.gfx.utils.toSvg(chart.surface).then(function(svg) {
    var args = {
        url : "chart/doExportChart.action",
        content : {
            svgContent : svg
        },
        handleAs : "json",
        load : function(response) {
            // Do something like exporting the responded image.
        },
        error : function(error) {
            // Error handling
        }
    };

    dojo.xhrPost(args);
    }, 
    function(error) {
        // Error handling
    }
);

そして、メソッドdoExportChartは次のようなことをします。

JPEGTranscoder t = new JPEGTranscoder();

// Set the transcoding hints.
t.addTranscodingHint(JPEGTranscoder.KEY_QUALITY, new Float(.8));

// Create the transcoder input.
String svgURI = new File("c:/sample.svg").toURL().toString();
TranscoderInput input = new TranscoderInput(svgURI);

// Create the transcoder output.
OutputStream ostream = new FileOutputStream("c:/sample.jpg");
TranscoderOutput output = new TranscoderOutput(ostream);

 // Save the image.
 t.transcode(input, output);

// Flush and close the stream.
 ostream.flush();
ostream.close();

以下のSVGsample.svgのコンテンツ：

svg xmlns=httpwww.w3.org2000svg width=1200 height=589defsrect fill=rgb(255, 255, 255) fill-opacity=1 stroke=none stroke-opacity=0 stroke-width=1 stroke-linecap=butt stroke-linejoin=miter stroke-miterlimit=4 x=41.5 y=13.666666666666666 width=1142 height=528.5 fill-rule=evenoddg transform=matrix(1.00000000,0.00000000,0.00000000,0.00000000,0.00000000,541.16666667)gpolyline fill=none fill-opacity=0 stroke=rgb(204, 204, 204) stroke-opacity=1 stroke-width=1.7 stroke-linecap=butt stroke-linejoin=miter stroke-miterlimit=4 points=42.50000000 14.66666667 90.00000000 242.63573883 137.50000000 191.97594502 185.00000000 126.84192440 232.50000000 242.63573883 280.00000000 201.02233677 327.50000000 159.40893471 375.00000000 541.16666667 422.50000000 343.95532646 470.00000000 220.92439863 517.50000000 146.74398625 565.00000000 224.54295533 612.50000000 240.82646048 660.00000000 110.55841924 707.50000000 249.87285223 755.00000000 161.21821306 802.50000000 195.59450172 850.00000000 320.43470790 897.50000000 318.62542955 945.00000000 282.43986254 992.50000000 286.05841924 1040.00000000 349.38316151 1087.50000000 210.06872852 1135.00000000 286.05841924 1182.50000000 329.48109966 stroke-dasharray=none polyline fill=none fill-opacity=0 stroke=rgb(191, 19, 19) stroke-opacity=1 stroke-width=1.5 stroke-linecap=butt stroke-linejoin=miter stroke-miterlimit=4 points=42.50000000 14.66666667 90.00000000 242.63573883 137.50000000 191.97594502 185.00000000 126.84192440 232.50000000 242.63573883 280.00000000 201.02233677 327.50000000 159.40893471 375.00000000 541.16666667 422.50000000 343.95532646 470.00000000 220.92439863 517.50000000 146.74398625 565.00000000 224.54295533 612.50000000 240.82646048 660.00000000 110.55841924 707.50000000 249.87285223 755.00000000 161.21821306 802.50000000 195.59450172 850.00000000 320.43470790 897.50000000 318.62542955 945.00000000 282.43986254 992.50000000 286.05841924 1040.00000000 349.38316151 1087.50000000 210.06872852 1135.00000000 286.05841924 1182.50000000 329.48109966 stroke-dasharray=none ggrect fill=rgb(255, 255, 255) fill-opacity=1 stroke=none stroke-opacity=0 stroke-width=1 stroke-linecap=butt stroke-linejoin=miter stroke-miterlimit=4 x=0 y=0 width=42.5 height=590 fill-rule=evenoddrect fill=rgb(255, 255, 255) fill-opacity=1 stroke=none stroke-opacity=0 stroke-width=1 stroke-linecap=butt stroke-linejoin=miter stroke-miterlimit=4 x=1182.5 y=0 width=18.5 height=591 fill-rule=evenoddrect fill=rgb(255, 255, 255) fill-opacity=1 stroke=none stroke-opacity=0 stroke-width=1 stroke-linecap=butt stroke-linejoin=miter stroke-miterlimit=4 x=0 y=0 width=1201 height=14.666666666666666 fill-rule=evenoddrect fill=rgb(255, 255, 255) fill-opacity=1 stroke=none stroke-opacity=0 stroke-width=1 stroke-linecap=butt stroke-linejoin=miter stroke-miterlimit=4 x=0 y=541.1666666666666 width=1201 height=49.83333333333333 fill-rule=evenoddgline fill=none fill-opacity=0 stroke=rgb(51, 51, 51) stroke-opacity=1 stroke-width=1 stroke-linecap=butt stroke-linejoin=miter stroke-miterlimit=4 x1=42.5 y1=541.1666666666666 x2=1182.5 y2=541.1666666666666 stroke-dasharray=none ggline fill=none fill-opacity=0 stroke=rgb(51, 51, 51) stroke-opacity=1 stroke-width=1 stroke-linecap=butt stroke-linejoin=miter stroke-miterlimit=4 x1=42.5 y1=541.1666666666666 x2=42.5 y2=14.666666666666666 stroke-dasharray=none line fill=none fill-opacity=0 stroke=rgb(102, 102, 102) stroke-opacity=1 stroke-width=1 stroke-linecap=butt stroke-linejoin=miter stroke-miterlimit=4 x1=42.5 y1=427.1821305841924 x2=36.5 y2=427.1821305841924 stroke-dasharray=none text fill=rgb(51, 51, 51) fill-opacity=1 stroke=none stroke-opacity=0 stroke-width=1 stroke-linecap=butt stroke-linejoin=miter stroke-miterlimit=4 x=32.5 y=430.91546391752576 text-anchor=end text-decoration=none rotate=0 kerning=auto text-rendering=optimizeLegibility font-style=normal font-variant=normal font-weight=normal font-size=7pt font-family=Tahoma fill-rule=evenodd100textline fill=none fill-opacity=0 stroke=rgb(102, 102, 102) stroke-opacity=1 stroke-width=1 stroke-linecap=butt stroke-linejoin=miter stroke-miterlimit=4 x1=42.5 y1=246.25429553264598 x2=36.5 y2=246.25429553264598 stroke-dasharray=none text fill=rgb(51, 51, 51) fill-opacity=1 stroke=none stroke-opacity=0 stroke-width=1 stroke-linecap=butt stroke-linejoin=miter stroke-miterlimit=4 x=32.5 y=249.9876288659793 text-anchor=end text-decoration=none rotate=0 kerning=auto text-rendering=optimizeLegibility font-style=normal font-variant=normal font-weight=normal font-size=7pt font-family=Tahoma fill-rule=evenodd200textline fill=none fill-opacity=0 stroke=rgb(102, 102, 102) stroke-opacity=1 stroke-width=1 stroke-linecap=butt stroke-linejoin=miter stroke-miterlimit=4 x1=42.5 y1=65.32646048109962 x2=36.5 y2=65.32646048109962 stroke-dasharray=none text fill=rgb(51, 51, 51) fill-opacity=1 stroke=none stroke-opacity=0 stroke-width=1 stroke-linecap=butt stroke-linejoin=miter stroke-miterlimit=4 x=32.5 y=69.05979381443295 text-anchor=end text-decoration=none rotate=0 kerning=auto text-rendering=optimizeLegibility font-style=normal font-variant=normal font-weight=normal font-size=7pt font-family=Tahoma fill-rule=evenodd300textgsvg

そして、上記のコードを実行すると、エラーが発生します。

Exception in thread "main" org.apache.batik.transcoder.TranscoderException: null
Enclosed Exception:
Content is not allowed in prolog.
    at org.apache.batik.transcoder.XMLAbstractTranscoder.transcode(XMLAbstractTranscoder.java:136)
    at org.apache.batik.transcoder.SVGAbstractTranscoder.transcode(SVGAbstractTranscoder.java:156)
    at com.ibm.crl.poc.util.PocImageUtil.main(PocImageUtil.java:142)

2番目の解決策は、http： //xmlgraphics.apache.org/batik/using/transcoder.htmlの公式例に従います。私にはわからないので、私に指導をしてくれる人がいることを願っています。どうもありがとう。

4

1 に答える 1

0

古いブラウザーをサポートすることが目的である場合、svg を使用することは単に選択肢ではありません。ただし、2006 年より前のほとんどのブラウザー バージョンでは、いくつかの基本的なサポートが提供されています。ただし、Internet Explorer IE8 以前では、SVG コンテンツをレンダリングするためのプラグインが必要です。

@バティック例外; 外部ソースの解析に失敗したようです (この問題とスタイル構文を検索するためのバグがあります)。上記の onliner で停止するのは難しいですが、ここで提案されているように、xmlns をダウンロードして、sample.svg と同じドメインで提供してみてください (または除外してみてください)。

画像のルック アンド フィールがまったく同じである必要がない限り、アプローチが少しずれている可能性があります。チャートに使用されるシリーズを利用し、SVG の変換の代わりに、JFreeChartなどを介してプロットを作成できます。

いずれにせよ、javascript が PNG を生成することを期待することはできません。関連するアルゴリズムは...厄介です:)

最後のオプションは、チャートをフレーム内にレンダリングして、ページを非常にシンプルで迅速にレンダリングすることです (100 以上のリクエストを避けるために dojolayer を作成します)。次に、クライアントが画像のエクスポートを要求したら、サーバー側からこのフレームの「スナップショット」を取得します。これにより、SVG のサポートが存在し、シリアル化された結果が得られることが保証されます。例として：

クライアント側：

<iframe
     width=700
     height=400
     src="chart/doRenderChart.action?unid=howto_identify_graph"></iframe>

サーバー側で、ユーザーが「エクスポート」をクリックすると:

doExportAction(HttpServletRequest req, HttpServletResponse resp) throws IOException {
   String chart = req.getParameter('url') 
         = "chart/doRenderChart.action?unid=howto_identify_graph";
   int width = 700;
   int height = 400;
   File f = File.createTempFile("prefix",null,myDir);
   String tmpfile = f.getName();
   f.delete();
   Process p=Runtime.getRuntime().exec("/path/to/bin/wkhtmltoimage "+
        "--crop-h " + height + 
        " --crop-w " + height + " " +
          chart + 
        " -f png " + 
          tmpfile
   ); 
   p.waitFor();
   // get and serve 'tmpfile' contents
}

これがWKHtmlToXXのプロジェクトです

于 2012-09-25T10:43:28.703 に答える