Save image from qml

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?

stereomatching

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