Canvas.requestPaint() renders Image data tinted blue

[poetaster]

REPRODUCIBILITY: 100%
OS VERSION: > 3.4
HARDWARE: vollaphone/gigaset gs290, XA2, Xperia 10 ii
UI LANGUAGE: en
REGRESSION: YES

DESCRIPTION:

Give an Image and a Canvas, calling something like drawingCanvas.requestPaint() causes the Image to be rendered in the Canvas with a blue tint. An example in @kimmolindholm s paint (which I’m trying to resurrect):

poetaster/paint/blob/dbe5246ceb1c415cec17c5ba354618c135aa0e88/qml/pages/Paint.qml#L412

Possibly related to:

QML Label dispays images with a blue-ish tint

REPRODUCIBILITY (% or how often): 100% BUILD ID = OS VERSION (Settings > About product): 4.2, and prior HARDWARE (XA2, X10, X10 II, …): X, XA2, maybe JC? UI LANGUAGE: N/A REGRESSION: (compared to previous public release: Yes, No, ?): No DESCRIPTION: This: [Bug]Qml Label with images not correctly shown on xperia phones - together.jolla.com PRECONDITIONS: Have an image, preferably with white people skin in show. STEPS TO REPRODUCE: Create a simple Sailfish application with a QML page wi…

PRECONDITIONS:

Application context:

       view->setPersistentOpenGLContext(true);
       view->setPersistentSceneGraph(true);

STEPS TO REPRODUCE:

1. call canvas.requestPaint() with a Image object on the page.

EXPECTED RESULT:

The image should retain it’s hues. Same source deployed to 3.4 works fine.

ACTUAL RESULT:

The image is tinted.

MODIFICATIONS:

Good question, but I’ve tested on a clean install device. No difference.

ADDITIONAL INFORMATION:

Copying the data from the Image (insertedImage is an Image {} tag) ‘sometimes’ works.

        insertedImage.grabToImage(function(result, rotation)
        {
            var url = result.url
            drawingCanvas.loadImage(url)
            var ctx = drawingCanvas.getContext('2d')
            Draw.clear(ctx)
            ctx.drawImage(url, 0, 0)
            ctx.rotate(rotation)
            drawingCanvas.unloadImage(url)
            drawingCanvas.requestPaint()
            previewCanvas.clear()
        })

I would use this work-a-round BUT, ctx.rotate(rotation) does not work.

I’ve now tried this on Vollas(GS290 also) and on an Experia 10 ii.

[nephros]

Same issue?

QML Label dispays images with a blue-ish tint

REPRODUCIBILITY (% or how often): 100% BUILD ID = OS VERSION (Settings > About product): 4.2, and prior HARDWARE (XA2, X10, X10 II, …): X, XA2, maybe JC? UI LANGUAGE: N/A REGRESSION: (compared to previous public release: Yes, No, ?): No DESCRIPTION: This: [Bug]Qml Label with images not correctly shown on xperia phones - together.jolla.com PRECONDITIONS: Have an image, preferably with white people skin in show. STEPS TO REPRODUCE: Create a simple Sailfish application with a QML page wi…

[poetaster]

I mentioned that above, but that ticket is about ‘richtext’ in ‘Label’. This is in Canvas. I think it’s related, but haven’t figured out how.

[gabrielg]

tbh, if my suspicion is correct [that this has nothing to do with Qt and everything to do with the HAL], then both issues will be the same.

[poetaster]

Ah, I was thinking it had something to do with QT, but HAL, > 3.4 could be the culprit. However, I believe, the tint in html image in richtext Labels was also present in 3.4. The issue with paint was/is not. I’m uncertain since there are some issues on the Vollaphone, so I’d appreciate if people tested the build of ‘Paint’ that I’ve made available on chum and open repos.

[poetaster]

In 3.4 (on Volla) the images in Labels (richtext) are rendered tinted. But the images loadaed and drawn to a canvas are not tinted.

[poetaster]

@attah just confirmed that the compositing issue reported here does not appear on official sony devices. If anyone with other ports could try the paint app at Paint | OpenRepos.net — Community Repository System (also on chum) to share if importing image and compositing leads to a tint, that would be really helpful.

[ric9k]

Tryed on XA2 4.4 licenced.
Issue also present.

Original:

Import in paint:

[poetaster]

Thanks! So it looks like it’s more general a problem.

[ric9k]

Seems like “negatived”.
Blue → Orange
Orange → Blue

[poetaster]

Not exactly. Inverted / negative would be more dramatic If you take the blue highway and run the RGB-BRG swap it’s almost normal. @attah had showed QML Label dispays images with a blue-ish tint - #13 by attah a method for get back swapping Red and Green, I believe. I’ll implement a filter in paint!

[throwaway69]

So some part of Qt is reading rgb data as grb?

[poetaster]

It could be ‘lower’ level, but I’m still poking. @attah had some ideas as well …

[poetaster]

Ok, I’ve implemented all the channel swaps and it is not that. It’s a swap, apply bgra (blue green red alpha) and the image is back to normal.

void main(void)
{
    if (texture2D(mask, qt_TexCoord0.st).a > 0.5)
        gl_FragColor = texture2D(source, qt_TexCoord0.st).bgra * qt_Opacity;
    else
        gl_FragColor = texture2D(source, qt_TexCoord0.st) * qt_Opacity;
}

Does the trick.

[poetaster]

Actually you’re more or less right blue swapped with red. close enough

[poetaster]

On a tip from @attah I implemented a format conversion which works for me. I’d appreciate feedback. Is this a fix for an original ‘error’ in implementation?

Implemented a colorspace conversion in the ImageProvider to stop the

@attah 's concise version:

reduced it to a more concise form.

works. solved. but why!

[poetaster]

If I was to guess what’s happening, since the QML Canvas.loadImage has neither the correct Orientation from meta, nor the correct order of color channels, it looks like Autotransform/Autocolor are not being used? I haven’t been able to find the code, but on simplifying my above fix, I did a dead simple test.

I removed all nemo meta orientation code and did:

QImageReader ir(filename);
ir.setAutoTransform(true); 

Compiled for 3.4, this ImageProvider gives canvas the correct RGB order AND the correct orientation. So QImage magic does work.

On 4.4, the ImageProvider winds up with the correct orientation but not Color.

So, it looks like a regression.Does not answer the question of what’s happening with html images loaded as richttext in labels though.

[poetaster]

Given the following:

class ImageProvider : public QQuickImageProvider
...
    QImage requestImage(const QString &id, QSize *size, const QSize &requestedSize)
    {
        Q_UNUSED(requestedSize)

        QString filename = QUrl(id).toString(QUrl::RemoveScheme);
        QImage img;
        QSize originalSize;
        QByteArray format;
        QImageReader ir(filename);

        ir.setAutoTransform(true);

        if (!ir.canRead())
            return img;

        originalSize = ir.size();
        format = ir.format();

        if (size)
            *size = originalSize;

        img = ir.read();

        if (requestedSize.isValid())
            return img.scaled(requestedSize.width(), requestedSize.height(), Qt::KeepAspectRatio);
        else
            return img;
    }

passed to canvas with: “image://paintImage/” …

in Volla/GS290 number one.
SailfishOS_3_4_0_24_armv7hl_in_Sailfish_SDK_Build_Engine-Debug
this yields correct orientation and color

in Volla/GS290 number two, and Xperia 10ii
SailfishOS_4_4_0_58_aarch64_in_Sailfish_SDK_Build_Engine-Debug
orientation is correct, color is Red swapped with Blue.

[poetaster]

As reported in Todays Community meeting, the Color issue is fixed:

Comparing master...jb58200 · sailfishos/qtscenegraph-adaptation

[nephros]

I wonder, if there’s some confusion in RGBA vs ARGB in some components of Qt/Lipsick/Silica, would that maybe also explain the high CPU usage for “rgba” elements found and documented by @leszek?
Or rather, are these copy operations particularly expensive?