사용자가 내보낼 수 있도록 dojox.charting.Chart를 PNG 이미지로 변환하는 방법은 무엇입니까?

Question

DOJO가 개발 한 프로젝트에서 사용자가 차트를 PNG 이미지로 내보낼 수있는 새로운 요구 사항이 있습니다. 내가 연구했고 2 아이디어를 찾았습니다 :

1, DOJO API에서 PNG 이미지로 직접 내보내려면 적절한 방법을 찾으십시오. (이미지로 내보내기위한 API 메소드를 제공하는 Ext JS와 비슷하기 때문에) 하지만 DOJO 차트에는이를 수행 할 방법이 없습니다.

이미지를 그리기 위해 dojox.fx 또는 dojox.gfx와 같은 DOJO API를 사용하지만 이미지를 생성 할 수 없습니다. 그래서 나는 이런 식으로 포기한다.

2 타사 플러그인을 사용하십시오. 먼저 'dojox.gfx.utils.toSvg (chart.surface) .then'메소드를 사용하여 차트의 표면 컨텐츠를 가져온 다음 Apache의 Batik 플러그인을 사용하여 SVG 컨텐츠를 PNG 이미지로 변환합니다. 아래 SVG sample.svg의

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(); 

내용 : 같은 것을 할

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 :

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) 

두 번째 해결책은 http://xmlgraphics.apache.org/batik/using/transcoder.html의 공식 사례를 따릅니다. 나는 아무 것도 모른다. 그리고 나에게 지도력을주는 거기의 누군가를 바란다. 고마워.

Answer 1

이전 브라우저를 지원하려는 의도가있는 경우 svg를 사용하는 것은 단순히 옵션이 아닙니다. 2006 년 이전의 대부분의 브라우저 버전에는 몇 가지 기본적인 지원이 있습니다. 그러나 인터넷 익스플로러의 경우 IE8 이상에서는 SVG 컨텐츠를 렌더링하기 위해 플러그인이 필요합니다.

@ 바틱 예외; 외부 소스 구문 분석이 실패한 것 같습니다 (이 문제점을 검색하고 구문을 스타일링하는 버그가 있음). 위의 onliner 중 하나를 중지하기는 어렵지만 xmlns를 다운로드하고 sample.svg와 동일한 도메인에서 서비스를 시도하십시오 (또는 그대로 두십시오). proposed here

아마도 접근법은 약간 꺼져있을 수 있습니다. 같은 모양과 느낌을 내기위한 이미지. 차트에 사용되는 계열을 사용하여 SVG를 변환하는 대신 JFreeChart 또는 그와 비슷한 그림을 만들 수 있습니다.

어느 쪽이든, 당신은 자바 스크립트가 PNG를 생성하는 기대할 수 없다, 관련 알고리즘은 ... encoumbersome :

, 차트 매우 간단 페이지를 떠나, 프레임 렌더링 데이 마지막 옵션 빠르게 렌더링됩니다 (100 개 이상의 요청을 피하기 위해 도장기를 만듭니다). 그런 다음 클라이언트가 이미지 내보내기를 요청하면 serverside에서이 프레임의 '스냅 샷'을 가져옵니다. 이렇게하면 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

에 대한 프로젝트입니다