In the project used the Amcharts,amcharts icon statistics plug-in is implemented using SVG, which comes with the download PNG feature, but does not support ie the following browser. The result of this study is that SVG is converted to PNG, and the end result is that Amcharts generates a PNG to write to an Excel and provide the download.
1.SVG Introduction:SVG means a scalable vector graphic (Scalable vector graphics). To be blunt is to use XML to define graphics.
SVG defines an image using XML format.
For example, a simple circle:
<HTML><Body><H1>My First SVG</H1><svgxmlns= "Http://www.w3.org/2000/svg"version= "1.1"> <CircleCX= "+"Cy= " the"R= "Max"Stroke= "BLACK"Stroke-width= "2"Fill= "Red" /></svg></Body></HTML>
Results:
Note: If the parent tag of SVG is removed it is also used normally, for example:(open a file with a browser with the suffix suffix svg below)
<svgxmlns= "Http://www.w3.org/2000/svg"version= "1.1"> <CircleCX= "+"Cy= " the"R= "Max"Stroke= "BLACK"Stroke-width= "2"Fill= "Red" /></svg>
Results:
However, if you remove the xmlns attribute of the SVG root tag, it will not appear as a graphic, for example:
< svg version = "1.1" > < circle cx = " Cy = " R = "+" stroke = "Black" Stroke-width = "2" fill = "Red" /> </ svg >
Summary: SVG if normal display as graphics, need to introduce xmlns= "Http://www.w3.org/2000/svg" in the SVG root tag
For more information on using SVG, Novice tutorial: http://www.runoob.com/svg/svg-tutorial.html
convert 2.SVG to PNGWill study foreground JS generation and background using batik to generate PNG. All used JS and Lib or others will be available at the end of the GitHub connection.
2.1 Foreground conversion (ie not supported)JS:saveSvgAsPng.js, the front desk is also relatively easy to download. Support Chrome, Firefox and other mainstream browsers (ie is not mainstream .....) )
A simple test:
<HTML> <Body> <H1>My First SVG</H1> <Div> <svgxmlns= "Http://www.w3.org/2000/svg"version= "1.1"ID= "Testsvg"> <CircleCX= "+"Cy= " the"R= "Max"Stroke= "BLACK"Stroke-width= "2"Fill= "Red" /> </svg> </Div> <Buttononclick= "Downloadsvg ()">Download</Button> </Body> <Scriptsrc= "Savesvgaspng.js"type= "Text/javascript"CharSet= "Utf-8"></Script> <Scripttype= "Text/javascript"> functiondownloadsvg () {//Download Method--The first parameter is the top-level element of SVG, the second parameter is the file namesavesvgaspng (document.getElementById ("Testsvg"), "Diagram.png"); } </Script></HTML>
2.2 Converting SVG to PNG in the background
The background conversion is the conversion of Svgcode to PNG, note that Svgcode is required for the xmlns attribute, otherwise the conversion fails:
1. Dependent jar Package: (Commons-io package is to read Svgcode)
2. Engineering Structure
3. Svgcode to be converted:
<svgxmlns= "Http://www.w3.org/2000/svg"version= "1.1"> <CircleCX= "+"Cy= " the"R= "Max"Stroke= "BLACK"Stroke-width= "2"Fill= "Red" /></svg>
Direct Browser Open effect:
4. The converted code and test:
Packagecn.qlq.svg2png;ImportJava.io.ByteArrayInputStream;ImportJava.io.File;ImportJava.io.FileOutputStream;Importjava.io.IOException;ImportJava.io.OutputStream;Importorg.apache.batik.transcoder.TranscoderException;ImportOrg.apache.batik.transcoder.TranscoderInput;ImportOrg.apache.batik.transcoder.TranscoderOutput;ImportOrg.apache.batik.transcoder.image.ImageTranscoder;ImportOrg.apache.batik.transcoder.image.PNGTranscoder;Importorg.apache.commons.io.FileUtils;/*** Convert SVG to PNG-formatted picture * **/ Public Abstract classSvg2pngutils {/*** Convert SVG string to PNG * *@paramSvgcode * SVG code *@parampngFilePath * Saved path *@throwstranscoderexception * SVG code exception *@throwsioexception * IO error*/ Public Static voidConverttopng (String Svgcode, String pngfilepath)throwsIOException, transcoderexception {file file=NewFile (pngFilePath); FileOutputStream OutputStream=NULL; Try{file.createnewfile (); OutputStream=Newfileoutputstream (file); Converttopng (Svgcode, OutputStream); } finally { if(OutputStream! =NULL) { Try{outputstream.close (); } Catch(IOException e) {e.printstacktrace (); } } } } /*** Convert Svgcode to PNG file, direct output to stream * *@paramSvgcode * SVG code *@paramOutputStream * Output stream *@throwstranscoderexception * Exception *@throwsIOException * IO exception*/ Public Static voidConverttopng (String svgcode, OutputStream outputstream)throwstranscoderexception, IOException {Try { byte[] bytes = Svgcode.getbytes ("Utf-8"); Pngtranscoder T=NewPngtranscoder (); Transcoderinput input=NewTranscoderinput (Newbytearrayinputstream (bytes)); Transcoderoutput Output=NewTranscoderoutput (OutputStream); //increase the picture's property settings (in pixels)---The following is written dead, the actual should be based on the size of SVG dynamic settings, the default width is the height ofT.addtranscodinghint (Imagetranscoder.key_width,NewFloat (941)); T.addtranscodinghint (Imagetranscoder.key_height,NewFloat (800)); T.transcode (input, output); Outputstream.flush (); } finally { if(OutputStream! =NULL) { Try{outputstream.close (); } Catch(IOException e) {e.printstacktrace (); } } } } Public Static voidMain (string[] args)throwsIOException, transcoderexception {ClassLoader ClassLoader= Svg2pngutils.class. getClassLoader (); String FilePath= Classloader.getresource ("Cn/qlq/svg2png/svgtest.svg"). GetPath (); String Svgcode= Fileutils.readfiletostring (NewFile (FilePath), "UTF-8"); Converttopng (Svgcode,"E:/test.png"); }}
As a result, PNG is generated. (Re-emphasize the SVG file's xmlns must write)
This enables SVG to be converted to PNG, in the Web application we can send the svgcode to background processing to generate a PNG and provide the download, and then go into a little bit can be written in Excel to provide download.
Svg2png (convert SVG to PNG in foreground background, perfect for IE8 download)--amcharts export png
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
