I want to export a webpage to PDF.
I'm using the wp-mpdf plugin which is based upon mpdf.
The problem that I'm having is that I want to be able to export a high ress image if that is on the page.
E.g.
The user uploaded a high ress image in a page. If WordPress saves images, by default it saves 3 different resolutions. So if the page is loaded in a browser the "small" image gets loaded. If the user clicks the 'export to PDF' button I want the highress image to be in the PDF. So what I did is create a new template that str_replace() the added image size in the filename. So if the export is made the High-ress image is loaded. Because the </span> around the image contains a class that tells the image to be loaded on the assigned size (300px x 300px) it shows the highress image on the right image size.
Now the problem is that a highress image is 11MB. If the image is scaled to 300px x 300px the image is 18MB. This is just one image. If the user has multiple images you can imagine how big the PDF becomes.
So my question is if it would be possible to have a Highress image exported to PDF but with a reasonable filesize.
Here is what I did in code:
<?php
//Standard Plan Template
global $post;
global $pdf_output;
global $pdf_header;
global $pdf_footer;
global $pdf_template_pdfpage;
global $pdf_template_pdfpage_page;
global $pdf_template_pdfdoc;
global $pdf_html_header;
global $pdf_html_footer;
//Set a pdf template. if both are set the pdfdoc is used. (You didn't need a pdf template)
$pdf_template_pdfpage = ''; //The filename off the pdf file (you need this for a page template)
$pdf_template_pdfpage_page = 1; //The page off this page (you need this for a page template)
$pdf_template_pdfdoc = ''; //The filename off the complete pdf document (you need only this for a document template)
$pdf_html_header = false; //If this is ture you can write instead of the array a html string on the var $pdf_header
$pdf_html_footer = false; //If this is ture you can write instead of the array a html string on the var $pdf_footer
$pdf_output = '<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>' . get_bloginfo() . '</title>
</head>
<body>
<div id="header">
<div id="headerimg">
<img src="'.get_bloginfo('template_directory').'/images/logo.png" />
<h1>'.get_bloginfo('name') . '</h1>
<div class="description">
' . get_bloginfo('description') . '
</div>
</div>
</div>
<div id="content" class="widecolumn">';
if(have_posts()) : while (have_posts()) : the_post();
$pdf_output .= '<div class="post">
<h2>' . the_title() . '</h2>';
ob_start();
the_content('Read the full post',true);
$postOutput = str_replace('-300x300', '', ob_get_contents());
ob_end_clean();
$pdf_output .= '<div class="entry">' . wpautop($postOutput, true) . '</div>';
// the following is the extended metadata for a single page
$pdf_output .= '</div> <!-- post -->';
endwhile;
else : endif;
$pdf_output .= '</div> <!--content-->';
$pdf_output .= '
</body>
</html>';
?>
I hope somebody understands my pain and can help :-)
jpeg_qualityto change the compression qualitity.str_replacethe -300x300 with nothing so the original High ress image is loaded.