├── HtmlToJpeg.php
├── README.md
├── download.php
├── index.php
├── js
    └── render.js
├── temp
    └── index.html
└── test.html


/HtmlToJpeg.php:
--------------------------------------------------------------------------------
  1 | <?php
  2 | 
  3 | /**
  4 |  * @author Eray Akartuna - http://github.com/erayakartuna
  5 |  * Class HtmlToJpeg
  6 |  * Html To Jpeg Converter With html2canvas javascript library
  7 |  */
  8 | class HtmlToJpeg
  9 | {
 10 | 
 11 |     /**
 12 |      * @var array
 13 |      */
 14 | 
 15 |     private $config = array();
 16 | 
 17 |     /**
 18 |      * @var array
 19 |      */
 20 | 
 21 |     private $html_contents = array();
 22 | 
 23 |     /**
 24 |      * Construct method
 25 |      */
 26 | 
 27 |     public function __construct()
 28 |     {
 29 |         $this->config = array(
 30 |             'folder' => 'temp',
 31 |             'action_url' => 'download.php',
 32 |             'hidden_image_names' => 'img_values',
 33 |             'content_class_name' => 'htmltojpeg-container',
 34 |             'form_id' => 'myForm',
 35 |             'download_button_label' => 'Save and Download Images',
 36 |             'append_scripts' => array(
 37 |                 'js/render.js'
 38 |             ));
 39 |     }
 40 | 
 41 |     /**
 42 |      * Output Method
 43 |      * Form Creator
 44 |      * @return string
 45 |      */
 46 | 
 47 | 
 48 |     public function output()
 49 |     {
 50 |         $output = '<form id="' . $this->config['form_id'] . '" action="' . $this->config['action_url'] . '" method="POST">';
 51 | 
 52 |         foreach ($this->html_contents as $i => $htm) {
 53 |             $output .= '<div class="' . $this->config['content_class_name'] . '" id="page-' . $i . '">' . $htm . '</div>';
 54 |         }
 55 | 
 56 |         $output .= '<button type="submit">' . $this->config['download_button_label'] . '</button>';
 57 |         $output .= '</form>';
 58 | 
 59 |         $output .= "<script>"
 60 |             . '   var hidden_image_names = "' . $this->config['hidden_image_names'] . '";'
 61 |             . '   var content_class_name = "' . $this->config['content_class_name'] . '";'
 62 |             . '   var form_id = "' . $this->config['form_id'] . '";'
 63 |             . "</script>";
 64 | 
 65 |         $output .= $this->appendJsFiles();
 66 | 
 67 |         return $output;
 68 |     }
 69 | 
 70 | 
 71 |     /**
 72 |      * @param string $html
 73 |      */
 74 | 
 75 |     public function renderHtml($html = '')
 76 |     {
 77 |         $this->html_contents[] = $html;
 78 |     }
 79 | 
 80 |     /**
 81 |      * View renderer
 82 |      * @param string $src
 83 |      */
 84 | 
 85 |     public function renderView($src = '')
 86 |     {
 87 |         try {
 88 | 
 89 |             if (!file_exists($src)) {
 90 |                 throw new Exception ($src . ' does not exist');
 91 |             } else {
 92 |                 ob_start();
 93 |                 include($src);
 94 |                 $content = ob_get_contents();
 95 |                 ob_end_clean();
 96 |             }
 97 | 
 98 |         } catch (Exception $e) {
 99 |             echo "Message : " . $e->getMessage();
100 |             echo "Code : " . $e->getCode();
101 |             die();
102 |         }
103 | 
104 |         return $this->renderHtml($content);
105 |     }
106 | 
107 |     /**
108 |      * Download images as a zip
109 |      */
110 | 
111 |     public function download()
112 |     {
113 |         $zipname = $this->saveImages();
114 | 
115 |         if ($zipname == "") {
116 |             echo "error";
117 |             die;
118 |         }
119 | 
120 |         header('Content-Type: application/zip');
121 |         header('Content-disposition: attachment; filename=' . $zipname);
122 |         header('Content-Length: ' . filesize($zipname));
123 |         readfile($zipname);
124 |     }
125 | 
126 |     /**
127 |      * Save Images as a Zip From Post
128 |      * @return string
129 |      */
130 |     public function saveImages()
131 |     {
132 |         $posts = isset($_POST[$this->config['hidden_image_names']]) ? $_POST[$this->config['hidden_image_names']] : array();
133 | 
134 |         if (empty($posts)) {
135 |             return "";
136 |         }
137 | 
138 |         $imageprefix = uniqid(rand(), true);
139 |         $zipname = uniqid(rand(), true) . '.zip';
140 | 
141 | 
142 |         foreach ($posts as $key => $post) {
143 |             $files[] = $this->base64_to_jpeg($post, $imageprefix . '-' . $key . '.jpg', $this->config['folder']);
144 |         }
145 | 
146 |         if (!$this->create_zip($files, $zipname, $this->config['folder'])) {
147 |             return "";
148 |         }
149 | 
150 |         return $zipname;
151 |     }
152 | 
153 |     /**
154 |      * @param string $base64_string
155 |      * @param string $output_file
156 |      * @param string folder
157 |      * @return mixed
158 |      */
159 | 
160 |     private function base64_to_jpeg($base64_string, $output_file, $folder = "")
161 |     {
162 |         $ifp = fopen($folder . '/' . $output_file, "wb");
163 |         $data = explode(',', $base64_string);
164 | 
165 |         fwrite($ifp, base64_decode($data[1]));
166 |         fclose($ifp);
167 | 
168 |         return $output_file;
169 |     }
170 | 
171 |     /**
172 |      * @param array $files
173 |      * @param string $destination
174 |      * @param string $folder
175 |      * @return bool
176 |      */
177 | 
178 |     private function create_zip($files = array(), $destination = '', $folder = "")
179 |     {
180 | 
181 |         $valid_files = array();
182 | 
183 |         if (is_array($files)) {
184 | 
185 |             foreach ($files as $file) {
186 |                 //make sure the file exists
187 |                 if (file_exists($folder . '/' . $file)) {
188 |                     $valid_files[] = $file;
189 |                 }
190 |             }
191 |         }
192 | 
193 |         if (count($valid_files)) {
194 | 
195 |             $zip = new ZipArchive();
196 |             if ($zip->open($destination, ZIPARCHIVE::CREATE) !== true) {
197 | 
198 |                 return false;
199 |             }
200 | 
201 |             foreach ($valid_files as $file) {
202 |                 $zip->addFile($folder . '/' . $file, $file);
203 |             }
204 | 
205 |             $zip->close();
206 | 
207 |             return file_exists($destination);
208 |         } else {
209 |             return false;
210 |         }
211 |     }
212 | 
213 |     /**
214 |      * @return string
215 |      */
216 | 
217 |     private function appendJsFiles()
218 |     {
219 |         $htm = '';
220 |         $scripts = $this->config['append_scripts'];
221 | 
222 |         foreach ($scripts as $script) {
223 |             $htm .= '<script src="' . $script . '"></script>';
224 |         }
225 | 
226 |         return $htm;
227 |     }
228 | 
229 |     /**
230 |      * @param string $key
231 |      * @param string $value
232 |      */
233 | 
234 |     public function setConfig($key, $value = "")
235 |     {
236 |         $this->config[$key] = $value;
237 |     }
238 | }
239 | 
240 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | # Html to Jpeg with Php and html2canvas
 2 | Multiple html pages convert to jpeg with html2canvas and PHP. 
 3 | You can easily convert your html or php pages to jpeg with this library.
 4 | 
 5 | [Demo](http://eray.info/demo/html-to-jpeg-php)
 6 | 
 7 | ##Example
 8 | 
 9 | You need to create 2 php files.I named "index.php" and "download.php". You have to define your html pages into the "index.php" and after that you should call download function on "download.php" .You can easily change file names with library config.
10 | 
11 | ###Index.php
12 | 
13 | Define to html2canvas and jquery scripts.
14 | ```html
15 | 
16 |   <script src="https://code.jquery.com/jquery-2.x-git.min.js"></script>
17 |   <script src="http://eray.info/demo/html-to-jpeg-php/js/html2canvas.js"></script>
18 | 
19 | ```
20 | 
21 | Add these codes into to body
22 | ```php
23 |  include('HtmlToJpeg.php');
24 |  $html2Jpeg = new HtmlToJpeg();
25 |  
26 |  //Pages
27 |  $html2Jpeg->renderHtml("<h1>Page 1</h1><div style='width:200px;height:300px;background:blue'></div>");//You can write html
28 |  $html2Jpeg->renderView("test.html");//you can add html or php files as a page
29 |  $html2Jpeg->renderHtml("<h1>Page 3</h1><div style='width:200px;height:300px;background:blue'></div>");//You can write html
30 |  
31 |  echo $html2Jpeg->output();
32 | ```
33 | 
34 | ###Download.php
35 | 
36 | ```php
37 | include "HtmlToJpeg.php";
38 | $html2jpeg = new HtmlToJpeg();
39 | $html2jpeg->download();//starting download
40 | ```
41 | 
42 | Thats it!
43 | 
44 | Write Html as a page
45 | 
46 | ```php
47 |  $html2Jpeg->renderHtml("<h1>Page</h1><div style='width:200px;height:300px;background:blue'></div>");
48 | ```
49 | 
50 | Add a view as a page
51 | ```php
52 |  $html2Jpeg->renderView("test.php");
53 | ```
54 | 
55 | 
56 | 
57 | 
58 | 
59 | 


--------------------------------------------------------------------------------
/download.php:
--------------------------------------------------------------------------------
1 | <?php
2 | include "HtmlToJpeg.php";
3 | $html2jpeg = new HtmlToJpeg();
4 | //download file
5 | $html2jpeg->download();
6 | //$html2jpeg->saveImages(); //get to zip link
7 | 


--------------------------------------------------------------------------------
/index.php:
--------------------------------------------------------------------------------
 1 | <Html>
 2 | <head>
 3 |     <title></title>
 4 |     <script src="https://code.jquery.com/jquery-2.x-git.min.js"></script>
 5 |     <script src="http://eray.info/demo/html-to-jpeg-php/js/html2canvas.js"></script>
 6 | 
 7 |     <style>
 8 |         .se-pre-con {
 9 |             position: fixed;
10 |             left: 0px;
11 |             top: 0px;
12 |             width: 100%;
13 |             height: 100%;
14 |             z-index: 9999;
15 |             background: url("img/loader.gif") center no-repeat #fff;
16 |         }
17 |     </style>
18 | 
19 | </head>
20 | <body>
21 |     <div class="se-pre-con"></div>
22 |     <?php
23 |         include('HtmlToJpeg.php');
24 | 
25 |         $html2Jpeg = new HtmlToJpeg();
26 | 
27 |         //Example code
28 |             $html2Jpeg->renderView("test.html");
29 |             $html2Jpeg->renderView("test.html");
30 |             $html2Jpeg->renderView("test.html");
31 |             $html2Jpeg->renderHtml("<h1>Test</h1><div style='width:200px;height:300px;background:blue'></div>");
32 |             $html2Jpeg->renderHtml("<h1>Test</h1><div style='width:200px;height:300px;background:blue'></div>");
33 |             $html2Jpeg->renderView("test.html");
34 |             $html2Jpeg->renderHtml("<h1>Test</h1><div style='width:200px;height:300px;background:blue'></div>");
35 | 
36 | 
37 |         //Form creating
38 |         echo $html2Jpeg->output();
39 |     ?>
40 | </body>
41 | </Html>
42 | 


--------------------------------------------------------------------------------
/js/render.js:
--------------------------------------------------------------------------------
 1 | 
 2 | 
 3 | $(document).ready(function(){
 4 |     var i = 0;
 5 |     $('.'+content_class_name).each(function() {
 6 |         html2canvas(this,{
 7 |             onrendered: function (canvas) {
 8 |                 //Set hidden field's value to image data (base-64 string)
 9 |                 $('#'+form_id).append('<input type="hidden" rel="'+i+'" name="'+hidden_image_names+'[]" value="'+canvas.toDataURL("image/png")+'"/>');
10 |                 i++;
11 |                 console.log(i);
12 |             }
13 | 
14 |         });
15 | 
16 |     });
17 | 
18 |     var timer = setInterval(function () {
19 |         if(i == $('.'+content_class_name).length){
20 |             $('.se-pre-con').hide();
21 |             $('.'+content_class_name).hide();
22 |             clearInterval(timer);
23 |         }
24 |     }, 1000);
25 | });
26 | 
27 | 
28 | 
29 | 
30 | 
31 | 


--------------------------------------------------------------------------------
/temp/index.html:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/erayakartuna/html-to-jpeg-php/bc39b72d6f39d4dc482346d1be546681d316bff9/temp/index.html


--------------------------------------------------------------------------------
/test.html:
--------------------------------------------------------------------------------
 1 | 
 2 | <HR>
 3 | <a href="http://somegreatsite.com">Link Name</a>
 4 | is a link to another nifty site
 5 | <H1>This is a Header</H1>
 6 | <H2>This is a Medium Header</H2>
 7 | Send me mail at <a href="mailto:support@yourcompany.com">
 8 |     support@yourcompany.com</a>.
 9 | <P> This is a new paragraph!
10 | <P> <B>This is a new paragraph!</B>
11 |     <BR> <B><I>This is a new sentence without a paragraph break, in bold italics.</I></B>
12 | <HR>


--------------------------------------------------------------------------------