2

I made a web application which allow the user to create an image dynamically in JavaScript.
It use jQuery to allow the user to place div, resize them and drag them into a <div> Container.
When the user finished to place all div, he can press the "Generate" button which send the <div> Container outerHTML code into a local database. Then the user can use another script, in php, and past in parameter the id in the database of which render he want to display, then the php script create a page using the code in the database.

My problem is now I want to take the code of this generated html page, then convert it into a png image.

I looked at some other posts and found something interesting : Phantom.js

But what I tried doesn't seem to work. Here is my code :

<html>
    <head>
        <title>Test</title>
        <LINK rel='stylesheet' type='text/css' href='style.css'>
        <script type='text/javascript' src='jquery/jquery.js'></script>
        <script type='text/javascript' src='jquery-ui/jquery-ui.js'></script>
    </head>

    <body>
    <script>
        var page = require('webpage').create();
        page.open('http://10.237.35.10/maxime/affichage.php?afficheur=0', function() {
            page.render('affichageTest.png');
            phantom.exit();
        });
    </script>
    </body>
</html>

So we have the database with the div outerHTML code contained at the id '0'. "affichage.php" take in parameter a variable "afficheur" then it ask the database to get the code from this variable. For example, afficheur=0 will return the div code contained in the database at the id=0.
When I go to "http://10.237.35.10/maxime/affichage.php?afficheur=0" I have a html page with the render I want. But when I try to run the script I'd posted higher, I haven't any "affichageTest.png" rendered in my folder.

What do I have to do? Do I have to import anything else to run Phantom.js? Or maybe I need to add something to my code?

Mr Lister
  • 45,515
  • 15
  • 108
  • 150
M. Ozn
  • 1,018
  • 1
  • 19
  • 42
  • 1
    phantomjs is a binary, you will have to install it and then call it with a command line. For'example if you put your code in test.js you will then call : phantomjs test.js – Laurent Fauvel Jan 14 '16 at 07:39
  • Is there an alternative way to make it only in script ? I'm working on a server and I don't have any right to install program, but I can use portable programs. But surely I would prefer a full-script solution... – M. Ozn Jan 14 '16 at 07:41
  • 1
    The binary does not require to be installed on windows actually you can call it right after unzipping it. Might be the same thing on linux. You just have to specify the whole path to the binary when calling it. If you want to call it in php you could use the exec() function. – Laurent Fauvel Jan 14 '16 at 07:46
  • I'll try it, thanks ! – M. Ozn Jan 14 '16 at 07:48
  • Ok with your trick, I need : - One file which generate the database entry - One php file which can be accessed by it own url and passing the variables values in GET method - One file with the Phantom.js script to call the previous php file - One php file with exec() to call Phantom.js to the previous script - Then surely another script to deal with the generated image. Have you any suggestions to reduce the file number ? Maybe I can put some function in one script, but which ? – M. Ozn Jan 14 '16 at 09:45
  • If your goal is to transform an html page into an image on the client side. I will recommand to use html2canvas, an exemple here : http://stackoverflow.com/questions/5621907/how-to-screenshot-website-in-javascript-client-side-how-google-did-it-no-nee – Laurent Fauvel Jan 14 '16 at 11:40
  • Not on the client side, all on the server – M. Ozn Jan 14 '16 at 12:26
  • What you can do to reduce files (even if I am not sure why files count matter), is to produces the image directly when you save the drawing and save it in database (base64), then when the user ask for a specific display, to load the image directly. Doing it this way will allow you to reduce the charge on the server (the image will be generated one time on save, instead of generating it for each display). – Laurent Fauvel Jan 14 '16 at 12:41
  • Ok I'm sorry I didn't explain the project in deep. The web app will generate a template with the placement the user wanted. Then the template will be refreshed all x seconds, to update the values on the images. I need to generate an image from this template (the same face, but others variables values) I succeed to display the render with the right values updated, but for the displaying I need to convert it in image. It's why I need to use different script, because the whole code of the generated html will change, and the image won't never be the same – M. Ozn Jan 14 '16 at 12:51

2 Answers2

2

PhantomJS is a binary not a javascript librarie (it is actually a headless webkit), I can not test it here atm, but here the main idea :

First download the PhantomJS binary, upload it somewhere and make it executable (chmod +x).

Create a file named test.js with this code below :

var page = require('webpage').create();
        page.open('http://10.237.35.10/maxime/affichage.php?afficheur=0', function() {
            page.render('affichageTest.png');
            phantom.exit();
        });

Create a file named display.php with this code below :

<?php
  $file_path = exec('/path/to/phantomjs test.js');
?>
<html>
    <head>
        <title>Test</title>
        <LINK rel='stylesheet' type='text/css' href='style.css'>
        <script type='text/javascript' src='jquery/jquery.js'></script>
        <script type='text/javascript' src='jquery-ui/jquery-ui.js'></script>
    </head>

    <body>
<img src="<?php $file_path ?>" alt="test">
    </body>
</html>

Visit the display.php page to see the screen capture

Laurent Fauvel
  • 631
  • 6
  • 12
1

If you need a full script solution, as you have said in comments, your only hope is Image Magic php extension. This in conjunction with HTML2PDF can be used to device html to image conversion for non-complex markup.

The trick is to create a pdf out of html first:

$html2pdf = new HTML2PDF('P', 'A4');
$html2pdf->writeHTML($html_content);
$file = $html2pdf->Output('temp.pdf','F');

Now you can get this pdf file and convert it image using Image Magic

$im = new imagick('temp.pdf');
$im->setImageFormat( "jpg" );
$img_name = time().'.jpg';
$im->setSize(800,600);
$im->writeImage($img_name);
$im->clear();
$im->destroy();

Installation of Image Magic extensions and support libraries could be painstaking. Please read the installation notes carefully.

The complexity of the html markup which could be converted is limited. You can do a fairly good job. But you can't call it a day if you need to convert ANY html.

Charlie
  • 22,886
  • 11
  • 59
  • 90
  • Thanks for your answer. the "$html_content" variable is the html code of the future image ? Can I pass an url instead of a source code ? – M. Ozn Jan 14 '16 at 08:03
  • $html_content is a string which contain the markup. You can use a function which converts url in to markup. – Charlie Jan 14 '16 at 08:08
  • Ok I tried your code but it seems to required intallations of both HTML2PDF ans Image Magic, right ? – M. Ozn Jan 14 '16 at 09:40
  • Both are php scripts which you can use without installation. Please refer the links I have given you. – Charlie Jan 14 '16 at 10:03
  • Ok I'm firstly trying to install html2pdf. I downloaded the zip file, unzipped it on the server folder, then I imported the html2pdf php file to my project. Now I get an error that's saying html2pdf haven't his dependances, but I can't download and run "Composer" to install dependances. Where can I just download the dependances files and put it manually on the html2pdf folder ? Thanks a lot for your help. – M. Ozn Jan 14 '16 at 10:27
  • Edit : I found dependances : tcpdf. It was easy finally... But now I don't know where to put it to make it works with html2pdf – M. Ozn Jan 14 '16 at 10:43
  • Installation and configuration process of these scripts can be long and tiresome. You might have to refer many external sources to get these done correctly. This is especially true for ImageMagic. Please prepare to spend some hours ahead. – Charlie Jan 14 '16 at 10:49
  • IT's really annoying... sorry to ask that but, can you send me a html2pdf folder with the dependances installed by the Composer ? On my working computer I can't install composer, it's boring to think that it's just take 3 clicks to install but I have to spend some hours just because I can't use the easy way... – M. Ozn Jan 14 '16 at 10:51