Add images or screenshots to a html doc
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:
Code:
doc.setHtml(
"<h1 align='center'>App Title</h1><br>"
"<img src='path_to_applogo/applogo.png'>"
+ui->result_R->text()
);
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:
Code:
"<p align='center'><img src=':/images/applogo.png'></p>"
Re: Add images or screenshots to a html doc
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
Code:
<img src="path_to_file" />
you would use
Code:
<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.
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.
Re: Add images or screenshots to a html doc
I'm currently trying to use pixmap, spent a couple of hours on it already.
Re: Add images or screenshots to a html doc
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.
Re: Add images or screenshots to a html doc
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.
Re: Add images or screenshots to a html doc
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.
Code:
"<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?
Re: Add images or screenshots to a html doc
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).
Re: Add images or screenshots to a html doc
Quote:
Originally Posted by
d_stranz
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.
Re: Add images or screenshots to a html doc
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?
Re: Add images or screenshots to a html doc
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
Code:
printer.setOutputFileName(filename);
printer.
setOutputFormat(QPrinter::PdfFormat);
doc.print(&printer);
printer.newPage();
Re: Add images or screenshots to a html doc
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
Re: Add images or screenshots to a html doc
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.
Re: Add images or screenshots to a html doc
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.
Re: Add images or screenshots to a html doc
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.
