How to deploy PHANTOMJS separately on the server side

How to deploy PHANTOMJS separately on the server sideArticle Directory

1. I. Allow me to analyze (Lao Dao) a few words
2. Two. Service-side look here
   1. Service-side PHANTOMJS Building
   2. Web-side building and how to call PHANTOMJS
3. Three. Effects Show

Hey,every one, for a long time did not share the technical type of article, and today to take a moment.

I. Allow me to analyze (Lao Dao) a few words

Previously, I wrote 2 articles highcharts combined with the PHANTOMJS back end to generate pictures,
http://www.peng8.net/2014/07/21/render-charts-serverside/
http://www.peng8.net/2014/11/24/highchart-table-export-image-by-phantomjs/
The first one, the pure back-end generation, dynamically generates JSON, and the JSON exists in the file, back-end calls phantomjs.exe , the resulting JSON file into the PHANTOMJS.
The second, is triggered by the front end, the page rendered on the chart and table all together to create a picture, in fact, this can also be placed in the back-end execution.
The above 2 ways, there will be a drawback, is that when the number of images generated, or request a lot of pages, we want to repeat once to call phantomjs.exe this thing, consumption of memory, time, until yesterday suddenly a group of people asked me, in the service side of a separate deployment phantomjs.exe , open a port, it has been running , as long as there is a request to it, it generates a Base64 string back, in fact, the official has provided the method will be phantomjs.exe deployed separately, so I studied some, and finally share to everyone. Okay, nagging over, let's see how it's done?

Two. Service-side look here

I use. NET creates a new solution that contains 2 projects, one Web project, the other is a WinForm project, and of course you can get 2 Web projects without impacting deployment.

<1> Service End PHANTOMJS Construction

2. Some preparation documents
   phantomjs.exeAndhighcharts工具包
4. The WinForm interface writes out
   Service Interface
5. WinForm back-End core code

   1

   #region START Process p = new process (); p.StartInfo.FileName = environment.currentdirectory + "//phantomjs//phantomjs_1.9v.exe"; String excutearg = Environment.currentdirectory + "//script//highcharts-convert.js-host 127.0.0.1-port 3003"; P.startinfo.arguments = string. Format (EXCUTEARG); P.startinfo.createnowindow = false; P.startinfo.useshellexecute = false; REDIRECT Standard output P.startinfo.redirectstandardoutput = true; REDIRECT Error output P.startinfo.redirectstandarderror = false;; P.startinfo.windowstyle = Processwindowstyle.normal; String[] result = {}; if (!p.start ()) {throw new Exception ("Cannot start headless test engine."); } result = P.standardoutput.readtoend (). Split (new char[] {' \ r ', ' \ n '}); if (result. Length = = 0) {Result[0] = "started successfully, but no data"; } foreach (string s in result) {LIST_MSG.ITEMS.ADD (s); #endregion

<2> web-side building and how to call PHANTOMJS

2. Web Page Setup
   Web interface
   In fact, this step can be omitted, just to show the returned data, after all, can be pure back-end generation.

3. Core code to initiate a POST request to PHANTOMJS

   1

   private string Httppostnew (String Url, String postdatastr) {HttpWebRequest request = (HttpWebRequest) webrequest.create ( URL); Request. Method = "POST"; Request. ContentType = "application/x-www-form-urlencoded"; Request. ContentLength = Encoding.UTF8.GetByteCount (POSTDATASTR); Stream Myrequeststream = Request. GetRequestStream (); StreamWriter mystreamwriter = new StreamWriter (Myrequeststream, encoding.getencoding ("gb2312")); Mystreamwriter.write (POSTDATASTR); Mystreamwriter.close (); HttpWebResponse response; try {response = (HttpWebResponse) request. GetResponse (); } catch (WebException ex) {response = (HttpWebResponse) ex. Response; } Stream Myresponsestream = response. GetResponseStream (); StreamReader Mystreamreader = new StreamReader (Myresponsestream, encoding.getencoding ("Utf-8")); String retstring = Mystreamreader.readtoend (); Mystreamreader.close (); Myresponsestream.close (); return retstring;}

   1. The calling code of the button

      1

      String url = "http://localhost:3003/"; String param= "{\" infile\ ": \" {xaxis: {categories: [' Jan ', ' Feb ', ' Mar ', ' Apr ', ' may ', ' June ', ' Jul ', ' ', ' Sep ', ' Oct ', ' Nov ', ' Dec ']},series: [{data: [29.9, 71.5, 106.4, 129.2, 144.0, 176.0, 135.6, 148.5, 216.4, 194.1, 95.6, 54.4]}; \ ", \" callback\ ": \" function (chart) {Chart.renderer.arc (-math.pi, 0). attr ({fill: ' #FCFFC5 ', Stroke: ' Black ', ' Stroke-width ': 1}). Add (); } \ ", \" constr\ ": \" chart\ "}"; textbox1.text= httppostnew (URL, param); MemoryStream stream = new MemoryStream (convert.frombase64string (TextBox1.Text)); Bitmap bmp = new Bitmap (stream); String randomname = System.DateTime.Now.ToString ("yyyymmddhhssmm") + ". png"; String saveurl = Server.MapPath ("/images/") +randomname; Bmp. Save (Saveurl, imageformat.png); Stream. Dispose (); Stream. Close (); Bmp. Dispose (); Image1.imageurl = "~/images/" + randomname;

Three. Effects Show

Finally convert the Base64 into a picture

DEMO: Click I download

How to deploy PHANTOMJS separately on the server side