February 19, 2011

kibsoft kibsoft
Lab Rat
66 posts

How to save an image from QML Image element?


Hi everyone. Is there a way to save cached image from Image element?

Thanks in advance.

8 replies

February 19, 2011

kibsoft kibsoft
Lab Rat
66 posts

I found this in the doc(QDeclarativeEngine::addImageProvider):

Note that images loaded from a QDeclarativeImageProvider are cached by QPixmapCache, similar to any image loaded by QML.

But how I can get an image from QPixmapCache? It requires Key (in the find function). I tried to use URL as Key, but it failed.

February 20, 2011

ngocketit ngocketit
Lab Rat
24 posts

There seems to be no direct way to save cached image of an Image element. However, you can make Image element paint on a QImage and then save the QImage to a file.

February 20, 2011

ngocketit ngocketit
Lab Rat
24 posts

Something like this:

  1. class ImageSaver : public QObject
  2. {
  3.     Q_OBJECT
  4. public:
  5.     explicit ImageSaver(QObject *parent = 0);
  7. public slots:
  8.     void save(QObject *item, const QString &path);
  10. };
  12. void ImageSaver::save(QObject *imageObj, const QString &path)
  13. {
  14.     QGraphicsObject *item = qobject_cast<QGraphicsObject*>(imageObj);
  16.     if (!item) {
  17.         qDebug() << "Item is NULL";
  18.         return;
  19.     }
  21.     QImage img(item->boundingRect().size().toSize(), QImage::Format_RGB32);
  22.     img.fill(QColor(255, 255, 255).rgb());
  23.     QPainter painter(&img);
  24.     QStyleOptionGraphicsItem styleOption;
  25.     item->paint(&painter, &styleOption);
  26.     img.save(path);
  27. }

And then in QML:

  1. import Qt 4.7
  3. Rectangle {
  4.     width: 640
  5.     height: 480
  6.     color: "white"
  8.     Image {
  9.         id: imgItem
  10.         fillMode: Image.PreserveAspectFit
  11.         source: "test.jpg"
  12.     }
  14.     MouseArea {
  15.         anchors.fill: parent
  16.         onClicked: {
  17.             imageSaver.save(imgItem, "/home/meego/saved-test.jpg");
  18.         }
  19.     }
  20. }

with imageSaver is an instance of ImageSaver and set as context property.


February 21, 2011

kibsoft kibsoft
Lab Rat
66 posts

ngocketit, thanks! It works very nice!

March 17, 2011

ciffa ciffa
Lab Rat
2 posts


I’m have a problem with this code. I can’t get it to work… When I try to paint the QGraphicsObject onto the QImage, I end up with the color (white in this case) that was filled in the image before the paint job. I’m using the code just as shown above. I would therefore guess that the paint method does not work. Is there any difference between doing this on the Desktop platform or the Symbian platform? Is there anything else that could make my situation different?

  1.     QGraphicsObject *item = qobject_cast<QGraphicsObject*>(imageObj);
  3.     if (!item) {
  4.         qDebug() << "Item is NULL";
  5.         return false;
  6.     }
  8.     QImage img(item->boundingRect().size().toSize(), QImage::Format_RGB32);
  9.     img.fill(QColor(255, 255, 255).rgb());
  10.     QPainter painter(&img);
  11.     QStyleOptionGraphicsItem styleOption;
  12.     item->paint(&painter, &styleOption);
  14.     // Then I add the image to a database, but that should be irrelevant

I really, really need some help! …I’m drawing a complete blank on this one (pun intended).

March 23, 2011

ciffa ciffa
Lab Rat
2 posts

Yay. I figured it out!

The problem was that I was calling this save method when Image.onProgressChanged() fired and Image.progress 1. This proved however to be before the Image was actually drawn onto the screen. The solution was to call the method when Image.onPaintedGeometryChanged() fired and Image.progress 1.

October 25, 2011

cmer4 cmer4
Lab Rat
109 posts

Hi folks,

The snippet works but I am unsure how the path variable works on Symbian?
What drive the image saves to when it says “saved”.

Is there a way to set a proper folder like e:\folder on symbian^3?

October 28, 2011

simonpena simonpena
Lab Rat
4 posts

Hey @ngocketit, thanks a lot! It worked great :)


My Harmattan applications:
* Butaca: cinema information - http://bit.ly/nJGBg0
* Meneamigo: a Meneame client - http://bit.ly/qD4Bss

  ‹‹ installing qt-components      Jump to an item in PathView ››

You must log in to post a reply. Not a member yet? Register here!