PDA

View Full Version : Add images or screenshots to a html doc


guiismiti
8th February 2015, 18:32
Hello,

What I'm trying to do - print a PDF with my app logo, a chart (widget or image of the widget - any of those will do it) and the results - the chart is a container widget, I'm using QCustomPlot.

What I'm doing right now - I'm writing a html and saving it as PDF.

The problems:
1 - I don't know how to insert images from my resources into the doc (solved);
2 - I don't know how to insert the chart (or a screenshot of the chart) into the doc;
3 - (minor problem) I need to remove the page number.


Here's the code I have so far:


QTextDocument doc;
doc.setHtml(
"<h1 align='center'>App Title</h1><br>"
"<img src='path_to_applogo/applogo.png'>"
+ui->result_R->text()
);

QPrinter printer(QPrinter::HighResolution);
printer.setOutputFileName(filename);
printer.setOutputFormat(QPrinter::PdfFormat);
doc.print(&printer);


As you can see, I'm using an image from the user's computer, and not an image from the app's resources.
Also, I don't know how to insert the chart or a screenshot of the chart into the html code, since the code will only accept strings.


Thanks in advance.


Problem 1 solved - After some more researching I found out i need to use the URL like this:


"<p align='center'><img src=':/images/applogo.png'></p>"
d_stranz
8th February 2015, 19:31
For the first issue, I think you basically need to convert your png into a base64-encoded string and embed that into the HTML. So instead of using


<img src="path_to_file" />

you would use


<img src="data:image/png;base64,<image in base64 encoding>", width="xxx", height="yyy" />

where the "<image in base64 encoding>" bit is replaced by the actual base64 string. So you want to read your PNG file into an unsigned char string, convert that to a base64 QString, and then write that into your HTML.

There's an example of what this looks like here (http://stackoverflow.com/questions/2807251/can-i-embed-a-png-image-into-an-html-page).

For the chart / widget, you probably need to do something similar, writing it out to a buffer in PNG format, then converting the buffer to a base64 QString.
guiismiti
8th February 2015, 19:33
I'm currently trying to use pixmap, spent a couple of hours on it already.
d_stranz
8th February 2015, 19:47
You can use QPixmap, but you have to use QPixmap::save() to save it to a buffer (i.e. a QIODevice mapped to an in-memory buffer), then pass that buffer to a base64 encoder that will return the string. In order for the HTML to make sense of it, it has to be an exact copy of what a PNG file on disk looks like, when converted to base64. Simply writing out the bytes of a QPixmap won't work, it has to be converted to an image type that is recognized by the <img/> element.
ChrisW67
8th February 2015, 20:16
QWidget::grab() to get an image of the widget
Save the image to a temporary file (QTemporaryFile maybe)
QUrl::fromLocalFile() to get a URL you can use in the src attribute of the img element.

I do not know of a way to suppress the page number when using the print() convenience function.

You will likely get a better quality result by directly rendering to a QPrinter or similar, but this is more work.
guiismiti
8th February 2015, 21:28
I'm saving the pixmap inside C:/Temp, but I'm gonna use QTemporaryFile instead.

And now I've got a another problem. It's with my HTML code.
It is not recognizing some tags for the images I'm using.

Both "alt" (first image) and "width" and "height" (second image) are not working.


"<html>"
"<body>"
"<font size='4' face='Arial'>"
"<h1 align='center'>Title 1</h1>"
"<p align='center'><img src=':/images/applogo.png' alt='applogo'></p>" //this is the app logo
"<h2 align='center'>Title 2</h2>"
"<p align='center'>Chart title"
"<br><img src='C:/Temp/temp.png' height='241' width='621'></p>" //this is the chart
"</font>"
"</body>"
"</html>"


I really need the width/height tags to work, since the chart is being stretched to the page size, and the resolution isn't good, especially for papers.
Any ideas?
d_stranz
8th February 2015, 21:44
The <img> tags aren't valid HTML - the closing ">" is missing the "/" ("/>") Likewise with the "<br>" tag. (Although I'm not an HTML expert - I know HTML syntax is sloppy compared to the requirements of XML and SGML).
guiismiti
8th February 2015, 21:45
The <img> tags aren't valid HTML - the closing ">" is missing the "/" ("/>") Likewise with the "<br>" tag. (Although I'm not an HTML expert - I know HTML syntax is sloppy compared to the requirements of XML and SGML).

I have just noticed that and tried to correct it, still won't work.
Also tried to remove the ' from the width/height values, nothing.
d_stranz
8th February 2015, 21:55
Maybe it is because the "img" tags are inside the "font" tags? But I'm guessing, too - I don't do HTML, so I don't know the proper syntax or semantics. Or maybe your browser simply doesn't understand these attributes?
guiismiti
9th February 2015, 00:21
No browser involved.

The doc is being written as html but saved as pdf.

Also tried removing the font tag, still nothing.

I have just manually written a html file with the code and images from my app, and the image size attributes worked.

Added after 47 minutes:

This is my printer settings, if that's any help



QPrinter printer(QPrinter::HighResolution);
printer.setOutputFileName(filename);
printer.setOutputFormat(QPrinter::PdfFormat);
doc.print(&printer);
printer.newPage();
ChrisW67
9th February 2015, 04:09
Perhaps it simply does not understand 'C:/Temp/temp.png' rather than a valid file:// URL as the src attribute.
Try file:///c:/temp/temp.png
guiismiti
9th February 2015, 04:54
Still nothing.

I tried using height='20' and width='40', and the image was very short - which indicates that the html tags are not being ignored.

The thing is, either QTextDocument or QPrinter is stretching the file when it's drawn on the pdf. Been on it for all these hours now, can't find anything.
d_stranz
9th February 2015, 18:56
Maybe it has nothing to do with the HTML attributes, but is a setting on either QTextDocument or QPrinter that needs to be changed. When doing ordinary printing in Windows (ie. not through Qt, but Adobe Reader for example) some printer drivers give the option of "fit to page" or something like that. Perhaps this is what is going on.

What happens if you print to an actual piece of paper (not through a PDF printer, but a real physical one)?

Sorry we can't be of more help. I know it is frustrating.
guiismiti
9th February 2015, 19:31
My printer is damaged right now, can't test it.

When I open the PDF file with acrobat, copy the chart and paste it on paint, I get a 621x241 image, which is the unstretched resolution... I tried opening the pdf with chrome or with the linux viewer, and the image is still stretched.

I had to use a workaround - got the image new size and determined the approximate stretching proportion, and reduced the width and height that are set in the html tags. The resolution is almost perfect now, it will be enough.