Save image from qml



  • I am using snippet from this link
    http://qt-project.org/forums/viewthread/3948
    It works very well in Qt 4.7 . Now I am using Qt 5.0.1 . I changed qdeclarative view to qquick view no other changes are made. I am getting Item is null from qdebug(image.cpp). Here is the code. what is error pls

    image.h
    @
    #ifndef IMAGE_H
    #define IMAGE_H

    #include <QtWidgets>
    #include<QGraphicsObject>
    #include<QGraphicsObject>
    #include<QObject>

    class mainwindow:public QWidget
    {
    Q_OBJECT
    public:

    mainwindow(QWidget *parent=0);
    Q_INVOKABLE void save(QObject *item, const QString &path);
    

    };
    #endif // IMAGE_H
    @

    image.cpp
    @
    #include"image.h"
    #include<QtCore>
    #include<QGraphicsObject>
    #include<QImage>
    #include<QPainter>

    mainwindow::mainwindow(QWidget *parent):QWidget(parent)

    {

    }

    void mainwindow::save(QObject *imageObj, const QString &path)
    {

    QGraphicsObject *item=qobject_cast<QGraphicsObject*>(imageObj);
    
    if (!item) {
        qDebug() << "Item is NULL";
        return;
    }
    
    QImage img(item->boundingRect().size().toSize(), QImage::Format_RGB32);
    img.fill(QColor(255, 255, 255).rgb());
    QPainter painter(&img);
    QStyleOptionGraphicsItem styleOption;
    item->paint(&painter, &styleOption);
    img.save(path);
    

    }
    @

    main.cpp
    @
    #include"image.h"
    #include <QGuiApplication>
    #include <QQuickView>
    #include <QQmlEngine>
    #include <QApplication>
    #include <QQuickView>
    #include <QQmlContext>

    int main(int argc,char *argv[])
    {
    QApplication app(argc,argv);

    mainwindow window;
    

    QQuickView view;
    view.rootContext()->setContextProperty("myObject", &window);

    view.setSource(QUrl::fromLocalFile&#40;"Test.qml"&#41;);
    view.showMaximized();
    
    return app.exec();
    

    }
    @

    Test.qml
    @

    import QtQuick 2.0

    Rectangle {
    width: 640
    height: 480
    color: "white"

    Image {
        id: imgItem
        fillMode: Image.PreserveAspectFit
        source: "/home/bts-007/Desktop/test1.jpg"
    }
    
    MouseArea {
        anchors.fill: parent
        onClicked: {
            myObject.save(imgItem, "/home/bts-007/Desktop/test_duplicate.jpg");
        }
    }
    

    }
    @

    One more change I have to mention. In Test.qml it was import Qt 4.7 (changed to import QtQuick 2.0)



  • Hi,

    -take a look at "this thread":http://qt-project.org/forums/viewthread/3948.-

    My apologies, did not see that you mentioned this same topic. Will post more after taking another look at the code.



  • Alek smierciak. I followed the link suggested by you
    http://qt-project.org/doc/qt-5.0/qtquick/qtquick-porting-qt5.html

    I changed the profile to

    @
    QT += quick1
    @

    getting an error
    Project ERROR: Unknown module(s) in QT: quick1



  • Seems there was a rollback, because my post was reverted to its previous edit somewhere after your response. Oh well, no matter.

    You would've be able to test it in a fallback QtQuick 1.0 mode provided you had this module installed - you probably don't, looking at the error.



  • How can i install this module in qt 5.0.1



  • Alek Smierciak when I was searching ,I came across this will it be using for me

    https://launchpad.net/ubuntu/+source/qtquick1-opensource-src/5.0.1-0ubuntu1



  • The source code for qtquick1 module is hosted "here":http://qt.gitorious.org/qt/qtquick1, but the code should be included in the installation bundle.

    How did you install your Qt 5 library?



  • I download it from Qt

    qt-linux-opensource-5.0.1-x86-offline.run

    and installed it. I dont know about libraries.



  • When installing Qt you need to specify which modules you want. QtQuick1 module should be on the list. Try reinstalling Qt, installing in another directory or "installing the module":http://qt-project.org/forums/viewthread/27179 through building the source "from Git":http://qt.gitorious.org/qt/qtquick1.



  • I dont know how to proceed. I am planning to blend two images and then save. Qtgraphics element is present qt 5 and image saver is working only in qt 4. help



  • Another approach would be to use the "Canvas":http://qt-project.org/doc/qt-5.0/qtquick/qml-qtquick2-canvas.html element, load two images and "save them as a file":http://qt-project.org/doc/qt-5.0/qtquick/qml-qtquick2-canvas.html#save-method.



  • Alek smierciak thank you. I tried an approach which is not working. here is the code

    @
    import QtQuick 2.0

    Rectangle {
    width: 640
    height: 480
    color: "white"

    Image {
        id: imgItem
        fillMode: Image.PreserveAspectFit
        source: "/home/bts-004/Desktop/test1.jpg"
    }
    
    MouseArea {
        anchors.fill: parent
        onClicked: {
            canobj.loadImage("/home/bts-004/Desktop/test1.jpg")
            canobj.save("/home/bts-004/Desktop/test_duplicate.jpg")
        }
    }
    Canvas{
        id:canobj
    }
    

    }
    @
    Is there any thing I have to add.



  • bts-007, please read the documentation part for "Canvas::loadImage":http://qt-project.org/doc/qt-5.0/qtquick/qml-qtquick2-canvas.html#loadImage-method carefully. It loads an image asynchronously, meaning that a signal will be emitted on completing - in this case, a Canvas::imageLoaded() signal with "Canvas::onImageLoaded()":http://qt-project.org/doc/qt-5.0/qtquick/qml-qtquick2-canvas.html#onImageLoaded-signal signal handler.

    You need to put the Canvas::save function call to the signal handler code part.



  • I have tried this but not saving

    @
    import QtQuick 2.0

    Rectangle {
    width: 640
    height: 480
    color: "white"

    Image {
        id: imgItem
        fillMode: Image.PreserveAspectFit
        source: "/home/bts-004/Desktop/test1.jpg"
    }
    
    MouseArea {
        anchors.fill: parent
        onClicked: {
            canobj.loadImage("/home/bts-004/Desktop/test1.jpg")
        }
    }
    Canvas{
        id:canobj
        onImageLoaded: save("/home/bts-004/Desktop/test_duplicate.jpg")
    }
    

    }

    @



  • Check if the onImageLoaded signal handler is actually called. Perhaps there is a problem with loading test1.jpg? Also, explain what do you mean by "not saving". Is the file created at all or not? Do you get any errors or warning in the Application output?



  • To check that I tried something like this

    @
    import QtQuick 2.0

    Rectangle {
    width: 640
    height: 480
    color: "white"

    Image {
        id: imgItem
        fillMode: Image.PreserveAspectFit
    
    }
    
    MouseArea {
        anchors.fill: parent
        onClicked: {
            imgItem.source= "/home/bts-004/Desktop/test1.jpg"
            canobj.loadImage("/home/bts-004/Desktop/test1.jpg")
        }
    }
    Canvas{
        id:canobj
        onImageLoaded: save("/home/bts-004/Desktop/test_duplicate.jpg")
    }
    

    }
    @

    on clicking ,image was loaded on the screen. there is no action from canvas side. No errors and when I check the desktop there is no file (test_duplicate.jpg)



  • By saying "image was loaded on the screen", do you mean on the Image element or the Canvas element?

    Please also change:

    @ onImageLoaded: save("/home/bts-004/Desktop/test_duplicate.jpg")@

    to:

    @ onImageLoaded: {
    console.log("onImageLoaded was called")
    console.log(canobj.isImageLoaded("/home/bts-004/Desktop/test1.jpg")
    if (save("/home/bts-004/Desktop/test_duplicate.jpg")) {
    console.log("Canvas::save() executed")
    }
    }@

    and tell me do you get any console output out of that?



  • Yeah Image was loaded on image element. I tried your code. no console messages were displayed.



  • I have the same problem too, do we have to design a save able image type by ourselves?Inherit QQuickPaintedItem, draw the image by QPainter and save it when we need?

    I will put the codes onto this website after I finish it(if it can work)



  • I try my best to write a saveAbleImageType, a naive implementation, still need to sharpen it.

    .hpp
    @
    #ifndef SAVEABLEIMAGE3_HPP
    #define SAVEABLEIMAGE3_HPP

    #include <QImage>
    #include <QQuickPaintedItem>
    #include <QString>

    class QPainter;
    class QQuickItem;

    class saveAbleImage : public QQuickPaintedItem
    {
    Q_OBJECT
    Q_PROPERTY(QString source READ source WRITE setSource NOTIFY sourceChanged)
    Q_PROPERTY(bool smooth READ smooth WRITE setSmooth NOTIFY smoothChanged)
    Q_PROPERTY(int height READ height WRITE setHeight NOTIFY heightChanged)
    Q_PROPERTY(int width READ width WRITE setWidth NOTIFY widthChanged)

    public:
    saveAbleImage(QQuickItem *parent = 0);
    saveAbleImage(saveAbleImage const&) = delete;
    saveAbleImage& operator=(saveAbleImage const&) = delete;

    virtual void paint(QPainter *painter);
    
    //properties of READ
    int height() const;
    
    bool smooth() const;
    QString source() const;
    
    int width() const;
    //properties of READ
    
    //properties of WRITE
    void setHeight(int height);
    void setSource(QString const &source);
    void setSmooth(bool smooth);
    void setWidth(int width);
    //properties of WRITE
    

    public slots:
    void save(QString const &path) const;

    signals:
    void heightChanged();

    void smoothChanged();
    void sourceChanged();
    
    void widthChanged();
    

    private:
    int height_;

    QImage image_;
    QImage imageBuffer_;
    
    bool smooth_;
    QString source_;
    
    int width_;
    

    };

    #endif // SAVEABLEIMAGE3_HPP

    @

    .cpp
    @
    #include "saveAbleImage3.hpp"

    #include <QPainter>
    #include <QQuickItem>

    saveAbleImage::saveAbleImage(QQuickItem *parent) : QQuickPaintedItem(parent),
    height_(0),
    smooth_(false),
    width_(0)
    {

    }

    void saveAbleImage::paint(QPainter *painter)
    {
    qDebug() <<"paint : " <<width_ <<", "<<height_;
    if(height_ != 0 && width_ != 0){
    qDebug() <<"scale paint : " << width_<<", "<<height_;
    if(smooth_){
    imageBuffer_ = image_.scaled(QSize(width_, height_), Qt::KeepAspectRatio, Qt::SmoothTransformation);
    qDebug() <<"scale size : " <<image_.width() <<", "<<image_.height();
    }else{
    imageBuffer_ = image_.scaled(QSize(width_, height_), Qt::KeepAspectRatio, Qt::FastTransformation);
    qDebug() <<"scale size : " <<image_.width() <<", "<<image_.height();
    }
    painter->drawImage((width_ - imageBuffer_.width()) / 2, (height_ - imageBuffer_.height()) / 2, imageBuffer_);
    }else{
    painter->drawImage(0, 0, image_);
    }
    }

    int saveAbleImage::height() const
    {
    return height_;
    }

    void saveAbleImage::save(QString const &path) const
    {
    qDebug()<< "save image";
    if(!imageBuffer_.isNull()){
    qDebug()<<"save image : "<<imageBuffer_.save(path);
    }else{
    qDebug()<<"save image : "<<image_.save(path);
    }
    }

    bool saveAbleImage::smooth() const
    {
    return smooth_;
    }

    QString saveAbleImage::source() const
    {
    return source_;
    }

    int saveAbleImage::width() const
    {
    return width_;
    }

    void saveAbleImage::saveAbleImage::setHeight(int height)
    {
    qDebug() <<"height : "<< height;
    if(height_ != height){
    height_ = height;

        emit heightChanged();
    }
    

    }

    void saveAbleImage::setSource(QString const &source)
    {
    qDebug() << "source = "<<source;
    if(source_ != source){
    source_ = source;

        image_.load(source_);
        update();
    
        emit sourceChanged();
    }
    

    }

    void saveAbleImage::setSmooth(bool smooth)
    {
    if(smooth_ != smooth){
    smooth_ = smooth;

        emit smoothChanged();
    }
    

    }

    void saveAbleImage::setWidth(int width)
    {
    qDebug() <<"width : "<< width;
    if(width_ != width){
    width_ = width;

        emit widthChanged();
    }
    

    }
    @

    use it like this

    @
    SaveAbleImage{
    id: bug

        anchors.fill: parent
        source: "Pictures/1369996733291.jpg"
        height:root.height
        width: root.width
    
        MouseArea{
            anchors.fill: bug
    
            onClicked: {
                bug.save("Pictures/saveTest.jpg")
            }
        }
    }
    

    @

    I wonder why the QtQuick Image do not provide a function for us to save the image?



  • I tried Canvas, can't work either
    If you just need to load and save the image
    here is a simple class for that

    .hpp
    @
    #include <QImage>
    #include <QObject>

    class QQuickItem;
    class QString;

    class imageSaver : public QObject
    {
    Q_OBJECT
    public:
    explicit imageSaver(QObject *parent = 0);
    imageSaver(imageSaver const&) = delete;
    imageSaver& operator=(imageSaver const&) = delete;

    public slots:
    void load(QString const &path);
    void loadAndSave(QString const &path);
    void save(QString const &path) const;

    private:
    QImage img_;
    };
    @

    .cpp
    @
    #include "imageSaver.hpp"

    imageSaver::imageSaver(QObject *parent) :
    QObject(parent)
    {

    }

    void imageSaver::load(QString const &path)
    {
    img_.load(path);
    }

    void imageSaver::loadAndSave(QString const &path)
    {
    img_.load(path);
    img_.save(path);
    }

    void imageSaver::save(const QString &path) const
    {
    img_.save(path);
    }
    @

    if you need to take the result after postprocessing, take the screenshot
    "take screenshot":http://qt-project.org/forums/viewthread/28822/

    With these, we can keep on using the Image from qml2

    no error handle, please refine it by yourself


Log in to reply
 

Looks like your connection to Qt Forum was lost, please wait while we try to reconnect.