We use TYPO3 9.5.13, GraphicsMagick 1.3.29, Ghostscript 9.27, BK2K\\BootstrapPackage 11.0.1
Using PDFs as normal images is no problem.
But now I want a 'preview' of the PDFs in full column width (~1000px). And although the PDF has a high resolution, the generated Image has a width of 595px only and any text is nearly unreadable.
The problem occurs with Image-CEs like in the uploads CE, which I want to enhance:
each time I want the image using the full column width it renders in a bad resolution and the image seems distorted.
here a small area from the generated image:
and the same area from the PDF as shown in PDF-reader:
The fluid part:
<img loading="lazy"
src="{f:uri.image(image: file, cropVariant: 'default', maxWidth: 1100)}"
width="{bk2k:lastImageInfo(property: 'width')}"
height="{bk2k:lastImageInfo(property: 'height')}"
intrinsicsize="{bk2k:lastImageInfo(property: 'width')}x{bk2k:lastImageInfo(property: 'height')}"
title="{file.properties.title}"
alt="{file.properties.alternative}">
which results in something like:
<img loading="lazy"
src="/fileadmin/_processed_/3/2/csm_Warum_D-Arzt_6afd8ad8d4.png"
intrinsicsize="595x842"
title=""
alt=""
width="595"
height="842">
Edit:
In case of using this FLUID:
<img loading="lazy"
src="{f:uri.image(image: file, cropVariant: 'default', width: 1100)}"
width="{bk2k:lastImageInfo(property: 'width')}"
height="{bk2k:lastImageInfo(property: 'height')}"
intrinsicsize="{bk2k:lastImageInfo(property: 'width')}x{bk2k:lastImageInfo(property: 'height')}"
title="{file.properties.title}"
alt="{file.properties.alternative}">
I get:
<img loading="lazy"
src="/fileadmin/_processed_/3/2/csm_Warum_D-Arzt_2ffb63b15f.png"
intrinsicsize="1100x1557"
title=""
alt=""
width="1100"
height="1557">
the image is bigger (and overflow the container) but the quality is worse the same, notice the bigger pixels:
Actually, a PDF is NOT an image. It is a container format which can contain vectors and images with different colorspaces and dimensions. A bitmap image has fixed dimensions width, height, density, a PDF not. Originally, it was created and optimized to work for printers, not for screens.
TYPO3 reflects that with a message in the backend:
IMHO, there is no perfect way of handling PDFs to behave like images, as you know the output format, but not the input format (properly). Two ways to get acceptable results:
Extend content elements or create new ones and add a second image slot for PDF preview images. Create the preview images yourself with a graphical program.
Write your own viewhelper and create your own thumbnails
Solution 1 will lead to more work for editors. Would be no best practise for me.
I would go with an own viewhelper.
Add your own render type for PDFs:
<f:switch expression="{file.type}">
<f:case value="5">
<f:render partial="Media/Type/Pdf" arguments="{file: file, dimensions: dimensions, data: data, settings: settings}" />
</f:case>
<f:defaultCase>
<f:render partial="Media/Type/Image" arguments="{file: file, dimensions: dimensions, data: data, settings: settings}" />
</f:defaultCase>
</f:switch>
Partial Media/Type/Pdf
{namespace cv=Conversion\HelperUtils\ViewHelpers}
<html xmlns:f="http://typo3.org/ns/TYPO3/CMS/Fluid/ViewHelpers" xmlns:ce="http://typo3.org/ns/TYPO3/CMS/FluidStyledContent/ViewHelpers" data-namespace-typo3-fluid="true">
<cv:forEachPdfThumbnail document="{file}" pages="1" as="pdfPreviewPage">
<f:image src="{pdfPreviewPage}" alt="" />
</cv:forEachPdfThumbnail>
</html>
ViewHelper:
This viewhelper convert multiple pages from a PDF, using the CommandUtility::imageMagickCommand. You can raise the density to a higher value to improve quality.
As mentioned, this viewhelper was developed a few years ago and could be improved (e.g. saving to fileadmin/processed instead of typo3temp. Feel free to clone and improve: https://github.com/conversion1/t3-pdfthumbnailviewhelper/blob/master/ForEachPdfThumbnailViewHelper.php
public static function renderStatic(array $arguments, \Closure $renderChildrenClosure, RenderingContextInterface $renderingContext)
{
$templateVariableContainer = $renderingContext->getVariableProvider();
/** #var \TYPO3\CMS\Core\Resource\FileReference $document */
$document = $arguments['document'];
$pages = explode(',', str_replace(' ', '', $arguments['pages']));
$colorspace = TRUE === isset($GLOBALS['TYPO3_CONF_VARS']['GFX']['colorspace']) ? $GLOBALS['TYPO3_CONF_VARS']['GFX']['colorspace'] : 'RGB';
$absFilePath = GeneralUtility::getFileAbsFileName($document->getOriginalFile()->getPublicUrl());
$destinationPath = 'typo3temp/';
$destinationFilePrefix = 'pdf-prev_' . $document->getOriginalFile()->getNameWithoutExtension();
$destinationFileExtension = 'png';
$output = '';
foreach ($pages as $pageNumber) {
if($pageNumber > 0) {
$pageNumber = intval($pageNumber);
} else {
$pageNumber = 1;
}
$destinationFileSuffix = '_page-' . $pageNumber;
$absDestinationFilePath = GeneralUtility::getFileAbsFileName($destinationPath . $destinationFilePrefix . $destinationFileSuffix . '.' . $destinationFileExtension);
$imgArguments = '-colorspace ' . $colorspace;
$imgArguments .= ' -density 300';
$imgArguments .= ' -sharpen 0x.6';
$imgArguments .= ' "' . $absFilePath . '"';
$imgArguments .= '['. intval($pageNumber - 1) .']';
$imgArguments .= ' "' . $absDestinationFilePath . '"';
if(!file_exists($absDestinationFilePath)) {
$command = CommandUtility::imageMagickCommand('convert', $imgArguments);
CommandUtility::exec($command);
}
$thumbnail = substr($absDestinationFilePath, strlen(Environment::getPublicPath()));
$templateVariableContainer->add($arguments['as'], $thumbnail);
$output .= $renderChildrenClosure();
$templateVariableContainer->remove($arguments['as']);
}
return $output;
}
Edit:
A third way: You can use a JavaScript library to generate thumbnails on the fly. E.g. https://github.com/mozilla/pdf.js
Related
I finally got my html2pdf to work showing my web page just how I want it in the pdf(Any other size was not showing right so I kept adjusting the format size until it all fit properly), and the end result is exactly what I want it to look like... EXCEPT even though my aspect ratio is correct for a landscape, it is still using a very large image and the pdf is not standard letter size (Or a4 for that matter), it is the size I set. This makes for a larger pdf than necessary and does not print well unless we adjust it for the printer. I basically want this exact image just converted to a a4 or letter size to make a smaller pdf. If I don't use the size I set though things are cut off.
Anyway to take this pdf that is generated and resize to be an a4 size(Still fitting the image on it). Everything I try is not working, and I feel like I am missing something simple.
const el = document.getElementById("test);
var opt = {
margin: [10, 10, 10, 10],
filename: label,
image: { type: "jpeg", quality: 0.98 },
//pagebreak: { mode: ["avoid-all", "css"], after: ".newPage" },
pagebreak: {
mode: ["css"],
avoid: ["tr"],
// mode: ["legacy"],
after: ".newPage",
before: ".newPrior"
},
/*pagebreak: {
before: ".newPage",
avoid: ["h2", "tr", "h3", "h4", ".field"]
},*/
html2canvas: {
scale: 2,
logging: true,
dpi: 192,
letterRendering: true
},
jsPDF: {
unit: "mm",
format: [463, 600],
orientation: "landscape"
}
};
var doc = html2pdf()
.from(el)
.set(opt)
.toContainer()
.toCanvas()
.toImg()
.toPdf()
.save()
I have been struggling with this a lot as well. In the end I was able to resolve the issue for me. What did the trick for me was setting the width-property in html2canvas. My application has a fixed width, and setting the width of html2canvas to the width of my application, scaled the PDF to fit on an A4 paper.
html2canvas: { width: element_width},
Try adding the above option to see if it works. Try to find out the width of your print area in pixels and replace element_width with that width.
For completeness: I am using Plotly Dash to create web user interfaces. On my interface I include a button that when clicked generates a PDF report of my dashboard. Below I added the code that I used for this, in case anybody is looking for a Dash solution. To get this working in Dash, download html2pdf.bundlemin.js and copy it to the assets/ folder. The PDF file will be downloaded to the browsers default downloads folder (it might give a download prompt, however that wasn't how it worked for me).
from dash import html, clientside_callback
import dash_bootstrap_components as dbc
# Define your Dash app in the regular way
# In the layout define a component that will trigger the download of the
# PDF report. In this example a button will be responsible.
app.layout = html.Div(
id='main_container',
children = [
dbc.Button(
id='button_download_report',
children='Download PDF report',
className='me-1')
])
# Clientside callbacks allow you to directly insert Javascript code in your
# dashboards. There are also other ways, like including your own js files
# in the assets/ directory.
clientside_callback(
'''
function (button_clicked) {
if (button_clicked > 0) {
// Get the element that you want to print. In this example the
// whole dashboard is printed
var element = document.getElementById("main_container")
// create a date-time string to use for the filename
const d = new Date();
var month = (d.getMonth() + 1).toString()
if (month.length == 1) {
month = "0" + month
}
let text = d.getFullYear().toString() + month + d.getDay() + '-' + d.getHours() + d.getMinutes();
// Set the options to be used when printing the PDF
var main_container_width = element.style.width;
var opt = {
margin: 10,
filename: text + '_my-dashboard.pdf',
image: { type: 'jpeg', quality: 0.98 },
html2canvas: { scale: 3, width: main_container_width, dpi: 300 },
jsPDF: { unit: 'mm', format: 'A4', orientation: 'p' },
// Set pagebreaks if you like. It didn't work out well for me.
// pagebreak: { mode: ['avoid-all'] }
};
// Execute the save command.
html2pdf().from(element).set(opt).save();
}
}
''',
Output(component_id='button_download_report', component_property='n_clicks'),
Input(component_id='button_download_report', component_property='n_clicks')
)
I want to optimize the size of the images sent by the Instagram feed of a module on my prestashop shop.
How can I request images in smaller sizes, like 134x134px or 150x150px ...
My origin picture is :
https://scontent-cdt1-1.cdninstagram.com/vp/2c273bea214e232de2a2d6ded00cfd57/5D306C5B/t51.2885-15/sh0.08/e35/c135.0.809.809/s640x640/52890210_803725976651019_6529311483719815543_n.jpg?_nc_ht=scontent-cdt1-1.cdninstagram.com
But i will just, this picture is resized in HTML or CSS from 640x640 to 135x135.
Serving a scaled image could save 91.4KiB (95% reduction).
The imagecopyresampled() PHP function is perfect for this task, here is an example:
<?php
$filename = './test-instagram-orig.jpg';
$dest_filename = './test-instagram-resized.jpg';
$new_width = 150;
$new_height = 150;
$my_instagram_image = file_put_contents($filename, file_get_contents('https://scontent-sjc3-1.cdninstagram.com/vp/9844eb2fd4f4012141feef47d2eb97b2/5D389B06/t51.2885-15/sh0.08/e35/s640x640/10249289_1618492008409419_392402572_n.jpg?_nc_ht=scontent-sjc3-1.cdninstagram.com'));
list($width, $height) = getimagesize($filename);
$image_p = imagecreatetruecolor($new_width, $new_height);
$image = imagecreatefromjpeg($filename);
imagecopyresampled($image_p, $image, 0, 0, 0, 0, $new_width, $new_height, $width, $height);
imagejpeg($image_p, $dest_filename, 100);
imagedestroy($image_p);
echo '<img src="'.$filename.'" alt="" /> <img src="'.$dest_filename.'" alt="" />';
Voila! Of course you should integrate the following code into your module and make the appropriate changes.
I'm looking for good CMS for publishing software manuals.
Requirements:
publish manual pages as web pages with thumbnails and shows full resolution after click on image,
exporting manual pages to a pdf file with full resolution images instead to thumbnails.
I found IMHO best wiki system named Tiki Wiki (https://info.tiki.org/) but when I export to pdf then I gets low resolution thumbnail.
I solve this problem by very simple Tiki Wiki code modification:
Modify lib/wiki-plugins/wikiplugin_img.php to force using full image resolution instead to thumbnail in print page mode (inserted code 1) and rescale images in generated HTML by 0.5 factor (inserted code 2):
[...]
function wikiplugin_img( $data, $params )
{
[...]
$imgdata = array_merge($imgdata, $params);
// inserted code 1 (~410 line)
if ($GLOBALS['section_class']=="tiki_wiki_page print"){
$imgdata['thumb'] = '';
}
// end of inserted code 1
//function calls
if ( !empty($imgdata['default']) || !empty($imgdata['mandatory'])) {
[...]
$fwidth = '';
$fheight = '';
if (isset(TikiLib::lib('parser')->option['indexing']) && TikiLib::lib('parser')->option['indexing']) {
$fwidth = 1;
$fheight = 1;
} else {
// inserted code 2 (~410 line)
if ($GLOBALS['section_class']=="tiki_wiki_page print"){
$fwidth = $imageObj->get_width() / 2;
$fheight = $imageObj->get_height() / 2;
} else {
$fwidth = $imageObj->get_width();
$fheight = $imageObj->get_height();
}
// end of inserted code 2 (~638 line)
}
[...]
Now, after printing to pdf by wkhtmltopdf we gets pdf with small but full resolution images.
Additional modifies:
Adds following lines to cms/cssmenus.css (or other css included in print mode) for increase bottom margin of image caption:
div.thumbcaption {
margin-bottom: 5mm;
}
Removes lines from 171 to ~175 in templates/tiki-show_content.tpl for remove the "The original document is available at" foot.
I've got a strange problem connected with content rendering.
I use following code to grab the content:
lib.otherContent = CONTENT
lib.otherContent {
table = tt_content
select {
pidInList = this
orderBy = sorting
where = colPos=0
languageField = sys_language_uid
}
renderObj = COA
renderObj {
10 = TEXT
10.field = header
10.wrap = <h2>|</h2>
20 = TEXT
20.field = bodytext
20.wrap = <div class="article">|</div>
}
}
and everything works fine, except that I'd like to use also predefined column-content templates other than simple text (Text with image, Images only, Bullet list etc.).
The question is: with what I have to replace renderObj = COA and the rest between the brackets to let the TYPO3 display it properly?
Thanks,
I.
The available cObjects are more or less listed in TSRef, chapter 8.
TypoScript for rendering Text w/image can be found in typo3/sysext/css_styled_content/static/v4.3/setup.txt at line 724, and in the neighborhood you'll find e.g. bullets (below) and image (above), which is referenced in textpic line 731. Variants of this is what you'll write in your renderObj.
You will find more details in the file typo3/sysext/cms/tslib/class.tslib_content.php, where e.g. text w/image is found at or around line 897 and is called IMGTEXT (do a case-sensitive search). See also around line 403 in typo3/sysext/css_styled_content/pi1/class.cssstyledcontent_pi1.php, where the newer css-based rendering takes place.
I am using TCPDF to generate the PDF in one of my projects. I simply create a HTML file and give it to the TCPDF to handle the PDF generation. But now I have some HTML where multiple certificates are added one after the other and I want to have a page break in it. Page Break should be decided by HTML i.e. I want to know if there is any identifier in HTML which TCPDF understands and then accordingly adds a page break into the generated PDF.
How could I do this?
I'm using <br pagebreak="true"/>.
Find method writeHTML and code
if ($dom[$key]['tag'] AND isset($dom[$key]['attribute']['pagebreak'])) {
// check for pagebreak
if (($dom[$key]['attribute']['pagebreak'] == 'true') OR ($dom[$key]['attribute']['pagebreak'] == 'left') OR ($dom[$key]['attribute']['pagebreak'] == 'right')) {
// add a page (or trig AcceptPageBreak() for multicolumn mode)
$this->checkPageBreak($this->PageBreakTrigger + 1);
}
if ((($dom[$key]['attribute']['pagebreak'] == 'left') AND (((!$this->rtl) AND (($this->page % 2) == 0)) OR (($this->rtl) AND (($this->page % 2) != 0))))
OR (($dom[$key]['attribute']['pagebreak'] == 'right') AND (((!$this->rtl) AND (($this->page % 2) != 0)) OR (($this->rtl) AND (($this->page % 2) == 0))))) {
// add a page (or trig AcceptPageBreak() for multicolumn mode)
$this->checkPageBreak($this->PageBreakTrigger + 1);
}
}
You might use TCPDF's AddPage() method in combination with explode() and a suitable delimiter:
$pdf = new TCPDF(PDF_PAGE_ORIENTATION, PDF_UNIT, PDF_PAGE_FORMAT, true, 'UTF-8',
false);
// TCPDF initialization code (...)
$delimiter = '<h1>';
$html = file_get_contents('./test.html');
$chunks = explode($delimiter, $html);
$cnt = count($chunks);
for ($i = 0; $i < $cnt; $i++) {
$pdf->writeHTML($delimiter . $chunks[$i], true, 0, true, 0);
if ($i < $cnt - 1) {
$pdf->AddPage();
}
}
// Reset pointer to the last page
$pdf->lastPage();
// Close and output PDF document
$pdf->Output('test.pdf', 'I');
I tried using
<br pagebreak="true" />
or
<tcpdf method="AddPage" />
each of them resulted not in starting new page at the top of the page but adding the full A4-page empty space in between HTML text. So if text ended in the middle of the page and then page break was inserted, the new text was written from the middle of the next page. Which I didn't want.
What worked was this (found it here TCPDF forcing a new page):
$pdf->writeHTML($content, true, 0, true, 0);
$pdf->AddPage();
$pdf->setPage($pdf->getPage());
This now starts with writing text on top of the page.
TCPDF support the 'pagebreak' attribute for HTML tags and CSS properties 'page-break-before' and 'page-break-after'.
For example you can use <br pagebreak="true" />.
Check the official http://www.tcpdf.org website and forums for further information.
With version 5.9.142 from 2011-12-23 we could use the page-break-before, page-break-inside css properties, like this:
<div style="page-break-inside:avoid;">
some non breakable text
</div>
For someone who still has the same problem with page-break TCPDF library
You can use <div style="page-break-before:always"></div> OR <br pagebreak="true"/>
to break page manually in your HTML content.
Use $tcpdf->AddPage() to break page manually in your code.
When you set SetAutoPageBreak(TRUE, 10); that means: when the height of document reach to (bottom - 10) then move the cursor to new page. So if you want to have more space, just reduce the number into 0. It will draw until the end of the document without any margin from bottom.
Remember that TCPDF only accept the double quote (") for attributes of tags. Don't use single quote (') for your tag.
<div style='page-break-before:always' => WRONG
<div style="page-break-before:always" => RIGHT
It takes 8 hours from me because this issue :(
According to http://www.tcpdf.org/examples/example_049.phps you can use something like this
$html .= '<tcpdf method="AddPage" /><h2>Graphic Functions</h2>';
You need to verify that parameter K_TCPDF_CALLS_IN_HTML in TCPDF configuration file is true.
You can also follow this method to accomplish your needs:
$htmlcontent1="CERTIFICATE NUMBER 1 IMAGE HERE";
// output the HTML content
$pdf->writeHTML($htmlcontent1, true, 0, true, 0);
// reset pointer to the last page
$pdf->lastPage();
// - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
// Print a table
// add a page
$pdf->AddPage();
$htmlcontent1="CERTIFICATE NUMBER 1 IMAGE HERE";
// output the HTML content
$pdf->writeHTML($htmlcontent1, true, 0, true, 0);
// reset pointer to the last page
$pdf->lastPage();
// ---------------------------------------------------------
//Close and output PDF document
$pdf->Output('textcertificate.pdf', 'D');
Hopes it helps someone :)
Thanks
Giving your element the page-break-after, page-break-before or page-break-inside property via CSS will apply the attribute pagebreak or pagebreakafter to the html tag during TCPDF runtime.
// page-break-inside
if (isset($dom[$key]['style']['page-break-inside']) AND ($dom[$key]['style']['page-break-inside'] == 'avoid')) {
$dom[$key]['attribute']['nobr'] = 'true';
}
// page-break-before
if (isset($dom[$key]['style']['page-break-before'])) {
if ($dom[$key]['style']['page-break-before'] == 'always') {
$dom[$key]['attribute']['pagebreak'] = 'true';
} elseif ($dom[$key]['style']['page-break-before'] == 'left') {
$dom[$key]['attribute']['pagebreak'] = 'left';
} elseif ($dom[$key]['style']['page-break-before'] == 'right') {
$dom[$key]['attribute']['pagebreak'] = 'right';
}
}
// page-break-after
if (isset($dom[$key]['style']['page-break-after'])) {
if ($dom[$key]['style']['page-break-after'] == 'always') {
$dom[$key]['attribute']['pagebreakafter'] = 'true';
} elseif ($dom[$key]['style']['page-break-after'] == 'left') {
$dom[$key]['attribute']['pagebreakafter'] = 'left';
} elseif ($dom[$key]['style']['page-break-after'] == 'right') {
$dom[$key]['attribute']['pagebreakafter'] = 'right';
}
}