Generieren von HTML-Canvas-Bilddaten-server-Seite?

Den Titel dieser Frage ist möglicherweise etwas irreführend, aber ich bin mir nicht sicher, was der beste Titel wäre (da kann ich nicht erraten, doch eine Lösung).

Grundsätzlich ist das system ich bin die Entwicklung stützt sich stark auf Leinwand Graphen. Diese Graphen werden erzeugt durch javascript, und werden mit Daten gezogen über ajax von einer API-server.

Der schwierige Teil ist, ich möchte in der Lage sein, um diese E-Mail-Diagramme, um Nutzer von diesem system, ohne Sie tatsächlich zu gehen, um die web-Seite überhaupt. So, während ich bin mir bewusst, dass es möglich ist, um die Base64-Wert, der ein Bild generiert, mit javascript in einem browser, was ist, wenn niemand da ist zu laufen, dass javascript?

Ich würde gerne halten die generierten Diagramme in javascript/canvas, anstatt Sie in einem gemeinsamen server-Seite-Grafik-Bibliothek (GD, ImageMagick). Die Canvas-Diagramme sind dynamisch und ermöglichen Interaktion über javascript. Obwohl ich nicht wollen, dass diese Funktionalität in die E-Mail-Benachrichtigung, die ich tun will, dass Sie identisch wären (zumindest im Aussehen).

Also die Frage ist, wie bekomme ich diese Grafiken in einer E-Mail?

Zu diesem Zeitpunkt meine einzige Vermutung ist, dass ich brauchen würde, um buchstäblich eine website, die nicht von AJAX-Anfragen für "Graphen zu Rendern", macht diesen Graphen, und sendet die Ergebnisse an den server. Dann bräuchte ich einen "server", der sitzt nur dort auf dieser web-Seite und Kannen aus Graphen. Ist das die einzige Lösung hier?

  • Check out github.com/learnboost/node-canvas - es ist ein Knoten implementiert Leinwand, die verwendet Kairo als image-Prozessor.
  • Ich verstehe nicht ganz. Wollen Sie eine server-side-Grafik-Bibliothek, die ist API-kompatibel mit dem HTML5 canvas-Element, so dass Sie verwenden können, den gleichen code im browser und auf dem server?
  • Ziemlich viel, ja. Ich war nicht vertraut mit der node-canvas und nodejs, ist das die Lösung?
  • Ich habe mit Knoten-Leinwand (und fabric.js oben auf, dass zu generieren, Bilder aus Leinwand auf einem server und es funktioniert ziemlich gut.
InformationsquelleAutor GoldenNewby | 2012-02-23
  1. 6

    Ich phantomJs verwendet (wie node.js aber anders) serverseitig ausführen genau die gleichen code wie client-Seite, und das gleiche Ergebnis erhalten. alles, was Sie brauchen, ist eine einzige exe-Datei (wie ein webkit stand-alone-web-brower)

    Dem folgenden Programm (in Perl, aber sollte machbar sein übersetzen Ihnen bevorzugte Sprache) dauert einige Daten, einfügen in eine web-Seite (könnte ajax ' ed) und sendet die Webseite an den client, oder speichert Sie in einer temporären Datei, und beginnt PhantomJs auf der gleichen Seite. Dann Fragen Sie PhantomJs zu generieren, ein jpg, dass dann auch abgeholt (und in diesem Fall sendt an den client).

    #!/usr/bin/perl

use strict;
use File::Temp;
$|=1;
#this script returns a graph, either as html +js web page to render client side,
#or renders the same page server side, and returns the jpg image.

#files needed:
#.\phantom_srv_client.pl  #this script
#.\phantomjs.exe          #the webkit runtime stand alone file, from http://phantomjs.org/
#.\Scripts\excanvas.min.js #canvas simulator for IE8-
#.\Scripts\jquery.min.js   #jQuery as we know it
#.\Scripts\jquery.jqplot.min.js #graph library on top of jQuery from http://www.jqplot.com/(Flot or any can be used)


#do we want client side rendering (html + js), or server side rendering (jpg)
#jpg seems to render nicer than png on some pages?
use CGI;
my $show_as_jpg = CGI::param("jpg");

#path to javascript libraries (jQuery etc). 
#Must be absolute file location for server rendering, relative for web
use FindBin;
my $script_path = $show_as_jpg 
    ? $FindBin::Bin."/Scripts" 
    : './Scripts';


#data to send to graph (two sets)
my $data = [[2,5,4], [6,4,5]];

#use json to get this as a javascript text
my $json_data;
eval {require JSON; $json_data=JSON::to_json($data)};
#in case JSON is not installed, get the json/javascript data manually (just for demo)
$json_data ||= "[[2,5,4], [6,4,9]]"; #here 9 at the end to see a difference

#The following is the web page that renders the graph, client or server side 
#(links to scripts must be abolute to work serverside, as temp-files may go anywhere, $script_path keeps track of that)
#$json_data is the Perl data structure converted to JSON (aka javascript, but not)
my $graph_html =qq|
<!DOCTYPE html>
<html>
<head>
    <!--[if lt IE 9]><script language="javascript" type="text/javascript" src="$script_path/excanvas.min.js"></script><![endif]-->
    <script class="include" type="text/javascript" src="$script_path/jquery.min.js"></script>
    <script class="include" type="text/javascript" src="$script_path/jquery.jqplot.min.js"></script>

    <script class="code" type="text/javascript" language="javascript">
        jQuery(document).ready(function(){
            /*data from perl (\$json_data) inserted here */
            var data = $json_data;
            jQuery.jqplot("chart1", data );
        });
    </script>
    </head>
<body>
    <div id="chart1" style="width:600px; height:400px;"></div>
    <a href='?jpg=1'>View as jpg</a>
</body>
</html>
|;


#this is the javascript that tells PhantomJs what to do (ie open a doc and render it to bitmap)
my $phantom_doc_js =qq|
    var system = require('system');
    //read from commandline which files to open, and write to
    var open_doc = system.args[1];
    var return_doc = system.args[2];
    var page = require('webpage').create();
    page.open(open_doc, function () {
        page.render(return_doc);
        phantom.exit();
    });
|;

#see if we shall render this page serverside
if ($show_as_jpg) {
    #get temporary filenames with related file handlers
    #where to put phantomjs script (generic so could be a static file)
    my ($phantom_doc_filehandler, $phantom_doc_filename) = File::Temp::tempfile(  SUFFIX => '.js', TMPDIR => 1);
    #where to put web page with data to render and ref to javascripts etc
    my ($phantom_graph_filehandler, $phantom_graph_filename) = File::Temp::tempfile(SUFFIX => '.html', TMPDIR => 1);
    #also get a filename with no handler, so phantomjs can return the jpg file. Extention must be .jpg!
    my (undef, $image_filename) = File::Temp::tempfile( SUFFIX => '.jpg',TMPDIR => 1, OPEN => 0);

    #store file content and close files
    print $phantom_doc_filehandler $phantom_doc_js; close $phantom_doc_filehandler;
    print $phantom_graph_filehandler $graph_html;   close $phantom_graph_filehandler;

    #now call PhantomJs with filenames to read from and write to.
    #Next version should support piping, which would simplify a lot

    #use absolute path to phantomjs.exe in case web-server does not use current path
    system($FindBin::Bin.'\\phantomjs', $phantom_doc_filename, $phantom_graph_filename, $image_filename) == 0 
        or die "system failed: $?";

    #read the entire image file
    my $img = slurp_file($image_filename);
    print "Content-Type: image/jpeg\nPragma: no-cache\n\n".$img;

    #The temp files are no more needed
    unlink $phantom_doc_filename, $phantom_graph_filename, $image_filename;

} else { # just render client side
    print "Content-Type: text/html\nPragma: no-cache\n\n".$graph_html;
}

#slurp is not always std perl   
sub slurp_file{
  my $filename = shift;
  my $string;
  local $/ = undef;
  open FILE, $filename or die "Couldn't open file: $!";
  binmode FILE;
  $string = <FILE>;
  close FILE;
  return $string;
}
    • Ich mag es, ich werde give it a shot
    InformationsquelleAutor FtLie
Schreibe einen Kommentar