Save image from qml

bts-007

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)

Alek Śmierciak

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.

bts-007

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

Alek Śmierciak

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.

bts-007

How can i install this module in qt 5.0.1

bts-007

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

Alek Śmierciak

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?

bts-007

I download it from Qt

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

and installed it. I dont know about libraries.

Alek Śmierciak

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.

bts-007

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

Alek Śmierciak

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.

bts-007

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.

Alek Śmierciak

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.

bts-007

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")
}

}

@

Alek Śmierciak

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?

bts-007

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)

Alek Śmierciak

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?

bts-007

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

stereomatching

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)

stereomatching

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?

QtWS: Super Early Bird Tickets Available!

Save image from qml