QTextEdit, images as base64 strings, and image sizing

tranxxenolab

I am using PySide6 and Qt 6.9.3. I am generating some "reports" from my program that include text and images. These reports are formatted as HTML and displayed in a QTextEdit. The images are generated dynamically, so I include them as base64 strings in the generated HTML file. In the HTML flow the image is contained in a paragraph which is contained in a div:

<div style='width: 1000px' >
  <p>
    <img style='display: block; width: 1000px' src='data:image/png;base64, XXXXX' />
  </p>
</div>

Based on the information on this page (https://doc.qt.io/qt-6/richtext-html-subset.html) I should be able to set the width attribute on the image to scale it to a certain size. Nevertheless, that does not work for me. I have found rather inconsistent behaviour:

If I set a width attribute on the image, and don't use any CSS styles, the image is not resized and it appears to be taken out of the document flow (almost like it's marked as a float), and text that follows the image in the HTML actually is drawn on top of the image
If I use inline CSS to turn the image into a block and set a width on the image, as well as set a width on the containing div, the text that follows the image flows properly, but the image is not resized. According to the supported HTML I shouldn't be able to set width or display inline styles, but it seems to have an effect.
If I export this document as ODT (the one with the inline CSS), the images are also not scaled properly, but the text flows after the images properly.
If I save the document as an HTML and view it in the browser, the images are scaled properly and the text flows properly. The document is valid HTML.
There are no other CSS styles in the document except specific class definitions, which do not apply to the images.

I am trying to not use QWebEngine here as that would be overkill for my application. I don't have an MRE right now as my program is quite complex. But if needed I can try and generate one.

There seems to be something I am fundamentally misunderstanding here about what CSS is supported and how that interacts as well with ODT export. So my main questions are:

Is there a way to scale images in a QTextEdit, if they are included as base64 strings?
If not, is the only way to scale an image in a QTextEdit to include it as a resource?
If I am able to successfully scale an image in a QTextEdit, will that image also appear scaled in an exported ODT file?

Eskil

Actually, 'width' is not one of the CSS properties supported by QTextEdit. What the documentation refers to is the 'width' property of the <img> tag itself, so you can scale the image like this:

<img width="100" src='data:image/png;base64, XXXXX' />

I haven't tested with ODT, but if that does not work, then I would consider it a bug.

Note that 'display' is also not among the supported CSS properties. You can see the full list here: https://doc.qt.io/qt-6/richtext-html-subset.html#css-properties

tranxxenolab

Okay, thanks for the reply. As I mentioned in my bullet points previously, I've tried to use a width attribute on the image tag, but it doesn't have an effect (either in the QTextEdit or the ODT). In addition, I know that display is not one of the supported properties (I linked to the same page in my post), but for some reason, it does have an effect.

I am going to try and put together an MRE over the weekend to demonstrate the issue.

Cristian Foreman

@geometry dash, You might want to consider directly controlling the image via QTextImageFormat, instead of relying on HTML. This avoids the limitations of QTextEdit’s HTML renderer:

from PySide6.QtGui import QTextCursor, QTextDocument, QTextImageFormat, QImage
from PySide6.QtWidgets import QTextEdit

text_edit = QTextEdit()
doc = text_edit.document()

cursor = QTextCursor(doc)

image = QImage("original.png")
scaled_image = image.scaledToWidth(1000)  # scale to desired width

# Add image as resource
doc.addResource(QTextDocument.ImageResource, "my_image", scaled_image)

fmt = QTextImageFormat()
fmt.setName("my_image")
fmt.setWidth(scaled_image.width())
fmt.setHeight(scaled_image.height())

cursor.insertImage(fmt)

Using base64 is fine, but QTextEdit HTML rendering is limited. If you need scaling, using QTextDocument resources is the most reliable approach.