Results 1 to 14 of 14

Thread: Add images or screenshots to a html doc

  1. #1
    Join Date
    Jan 2015
    Posts
    22
    Thanks
    18
    Qt products
    Qt5
    Platforms
    Unix/X11 Windows

    Default 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:
    Qt Code:
    1. doc.setHtml(
    2. "<h1 align='center'>App Title</h1><br>"
    3. "<img src='path_to_applogo/applogo.png'>"
    4. +ui->result_R->text()
    5. );
    6.  
    7. QPrinter printer(QPrinter::HighResolution);
    8. printer.setOutputFileName(filename);
    9. printer.setOutputFormat(QPrinter::PdfFormat);
    10. doc.print(&printer);
    To copy to clipboard, switch view to plain text mode 

    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:
    Qt Code:
    1. "<p align='center'><img src=':/images/applogo.png'></p>"
    To copy to clipboard, switch view to plain text mode 
    Last edited by guiismiti; 8th February 2015 at 20:31.

  2. #2
    Join Date
    Jan 2008
    Location
    Alameda, CA, USA
    Posts
    4,691
    Thanks
    257
    Thanked 750 Times in 740 Posts
    Qt products
    Qt5
    Platforms
    Windows Android

    Default 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

    Qt Code:
    1. <img src="path_to_file" />
    To copy to clipboard, switch view to plain text mode 

    you would use

    Qt Code:
    1. <img src="data:image/png;base64,<image in base64 encoding>", width="xxx", height="yyy" />
    To copy to clipboard, switch view to plain text mode 

    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.

  3. The following user says thank you to d_stranz for this useful post:

    guiismiti (8th February 2015)

  4. #3
    Join Date
    Jan 2015
    Posts
    22
    Thanks
    18
    Qt products
    Qt5
    Platforms
    Unix/X11 Windows

    Default Re: Add images or screenshots to a html doc

    I'm currently trying to use pixmap, spent a couple of hours on it already.

  5. #4
    Join Date
    Jan 2008
    Location
    Alameda, CA, USA
    Posts
    4,691
    Thanks
    257
    Thanked 750 Times in 740 Posts
    Qt products
    Qt5
    Platforms
    Windows Android

    Default 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.

  6. #5
    Join Date
    Mar 2009
    Location
    Brisbane, Australia
    Posts
    7,670
    Thanks
    13
    Thanked 1,595 Times in 1,523 Posts
    Qt products
    Qt4 Qt5
    Platforms
    Unix/X11 Windows
    Wiki edits
    17

    Default 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.

  7. The following user says thank you to ChrisW67 for this useful post:

    guiismiti (8th February 2015)

  8. #6
    Join Date
    Jan 2015
    Posts
    22
    Thanks
    18
    Qt products
    Qt5
    Platforms
    Unix/X11 Windows

    Default 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.
    Qt Code:
    1. "<html>"
    2. "<body>"
    3. "<font size='4' face='Arial'>"
    4. "<h1 align='center'>Title 1</h1>"
    5. "<p align='center'><img src=':/images/applogo.png' alt='applogo'></p>" //this is the app logo
    6. "<h2 align='center'>Title 2</h2>"
    7. "<p align='center'>Chart title"
    8. "<br><img src='C:/Temp/temp.png' height='241' width='621'></p>" //this is the chart
    9. "</font>"
    10. "</body>"
    11. "</html>"
    To copy to clipboard, switch view to plain text mode 

    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?

  9. #7
    Join Date
    Jan 2008
    Location
    Alameda, CA, USA
    Posts
    4,691
    Thanks
    257
    Thanked 750 Times in 740 Posts
    Qt products
    Qt5
    Platforms
    Windows Android

    Default 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).

  10. #8
    Join Date
    Jan 2015
    Posts
    22
    Thanks
    18
    Qt products
    Qt5
    Platforms
    Unix/X11 Windows

    Default Re: Add images or screenshots to a html doc

    Quote Originally Posted by d_stranz View Post
    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.

  11. #9
    Join Date
    Jan 2008
    Location
    Alameda, CA, USA
    Posts
    4,691
    Thanks
    257
    Thanked 750 Times in 740 Posts
    Qt products
    Qt5
    Platforms
    Windows Android

    Default 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?

  12. #10
    Join Date
    Jan 2015
    Posts
    22
    Thanks
    18
    Qt products
    Qt5
    Platforms
    Unix/X11 Windows

    Default 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

    Qt Code:
    1. QPrinter printer(QPrinter::HighResolution);
    2. printer.setOutputFileName(filename);
    3. printer.setOutputFormat(QPrinter::PdfFormat);
    4. doc.print(&printer);
    5. printer.newPage();
    To copy to clipboard, switch view to plain text mode 
    Last edited by guiismiti; 9th February 2015 at 01:21.

  13. #11
    Join Date
    Mar 2009
    Location
    Brisbane, Australia
    Posts
    7,670
    Thanks
    13
    Thanked 1,595 Times in 1,523 Posts
    Qt products
    Qt4 Qt5
    Platforms
    Unix/X11 Windows
    Wiki edits
    17

    Default 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

  14. #12
    Join Date
    Jan 2015
    Posts
    22
    Thanks
    18
    Qt products
    Qt5
    Platforms
    Unix/X11 Windows

    Default 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.

  15. #13
    Join Date
    Jan 2008
    Location
    Alameda, CA, USA
    Posts
    4,691
    Thanks
    257
    Thanked 750 Times in 740 Posts
    Qt products
    Qt5
    Platforms
    Windows Android

    Default 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.

  16. The following user says thank you to d_stranz for this useful post:

    guiismiti (9th February 2015)

  17. #14
    Join Date
    Jan 2015
    Posts
    22
    Thanks
    18
    Qt products
    Qt5
    Platforms
    Unix/X11 Windows

    Default 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.

Similar Threads

  1. Why the images from the HTML file is not loaded??
    By rleojoseph in forum Qt Programming
    Replies: 8
    Last Post: 2nd March 2011, 12:29
  2. How to use html to show overlapped images in QToolTip
    By LorenLiu in forum Qt Programming
    Replies: 0
    Last Post: 19th April 2010, 09:52
  3. GIF or MNG images for use in html for QTextBrowser
    By manojmka in forum Qt Programming
    Replies: 3
    Last Post: 2nd January 2008, 17:30
  4. Loading images in html in a QTextBrowser
    By BasicPoke in forum Newbie
    Replies: 1
    Last Post: 6th June 2007, 22:51
  5. getting images out of html
    By hijinks in forum Qt Programming
    Replies: 1
    Last Post: 16th June 2006, 00:17

Tags for this Thread

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
Digia, Qt and their respective logos are trademarks of Digia Plc in Finland and/or other countries worldwide.