Welcome!

Welcome to the official BlackBerry Support Community Forums.

This is your resource to discuss support topics with your peers, and learn from each other.

inside custom component

Native Development

Reply
Contributor
chris_chrono
Posts: 10
Registered: ‎01-21-2013
My Device: bb10 alpha
My Carrier: tsel
Accepted Solution

Insert transparent QImage to ImageView

Did any one manage to change the image of ImageView using QImage that load and image that have transparent zone?

 

I loaded a transparent image (from png files) to QImage, and the pass it to ImageView using this function :

 

https://developer.blackberry.com/cascades/reference/bb__imagedata.html

 

bb::ImageData fromQImage(const QImage &qImage)
{
    bb::ImageData imageData(bb::smileytongue:ixelFormat::RGBA_Premultiplied, qImage.width(), qImage.height());
 
    unsigned char *dstLine = imageData.pixels();
    for (int y = 0; y < imageData.height(); y++) {
        unsigned char * dst = dstLine;
        for (int x = 0; x < imageData.width(); x++) {
            QRgb srcPixel = qImage.pixel(x, y);
            *dst++ = qRed(srcPixel);
            *dst++ = qGreen(srcPixel);
            *dst++ = qBlue(srcPixel);
            *dst++ = qAlpha(srcPixel);
        }
        dstLine += imageData.bytesPerLine();
    }
 
    return imageData;
}
 
But the result is all the transparent zone in the image change into white, so the imageview doest have any parts that transparent. Is there any other trick to do this besides directly load the resource to the ImageView? 
Please use plain text.
Developer
oliver_kranz
Posts: 216
Registered: ‎09-18-2009
My Device: Z10
My Carrier: O2

Re: Insert transparent QImage to ImageView

You can create a Cascades image.

 

https://developer.blackberry.com/cascades/reference/bb__cascades__image.html

 

For example you can create the Image from a QByteArray.

 

Image image(imageData);

 You can also create the Image from ImageData but I have never done this.

 

You can either set the image to the ImageView in C++ with ImageView.setImage(). Or you can assign the Image in QML to the property ImageView.image.

 

 

Please use plain text.
Contributor
chris_chrono
Posts: 10
Registered: ‎01-21-2013
My Device: bb10 alpha
My Carrier: tsel

Re: Insert transparent QImage to ImageView

Thx for the reply, i have tried it, so i convert the QImage into ImageData, then into Image, then into ImageView.. and the result is still the same, the transparent area is still white.. so convert it into Image doesn't solve the problem

thx anyway
Please use plain text.
Developer
oliver_kranz
Posts: 216
Registered: ‎09-18-2009
My Device: Z10
My Carrier: O2

Re: Insert transparent QImage to ImageView

If your image is on the file system then you can assign it directly to the ImageView.

 

ImageView {
    imageSource: "asset:///images/image.png"
}

 

Please use plain text.
Developer
oliver_kranz
Posts: 216
Registered: ‎09-18-2009
My Device: Z10
My Carrier: O2

Re: Insert transparent QImage to ImageView

Do not do this conversion to ImageData. Your method can simply return a QImage. Then you can assign it in QML to the property ImageView.image.

Please use plain text.
Contributor
chris_chrono
Posts: 10
Registered: ‎01-21-2013
My Device: bb10 alpha
My Carrier: tsel

Re: Insert transparent QImage to ImageView

Hmm.. my ImageView component is generated in CPP, because it need to be dynamic, that's why i cannot try your solution above.

Is there any other trick?
Please use plain text.
Developer
oliver_kranz
Posts: 216
Registered: ‎09-18-2009
My Device: Z10
My Carrier: O2

Re: Insert transparent QImage to ImageView

You can also assign the image in C++. If your image is on the file system then you can set the image path of ImageView.

 

setImageSource(QUrl("asset:///images/image.png"));

 

Please use plain text.
Contributor
mnosov
Posts: 15
Registered: ‎10-25-2012
My Device: Dev Alpha B
My Carrier: Megafon

Re: Insert transparent QImage to ImageView

[ Edited ]

Probably you're reading image to QImage incorrectly. Right now I'm using this approach (not ideal way, but works):

//////////////////////////////////////////

//Read image to QImage

QFile file(imageFilePath);

QImageReader imgReader(&file);

QImage image;

imgReader.read(&image);

image.convertToFormat(QImage::Format_ARGB32_Premultiplied); //important step

 

//Do anything with QImage pixel data 'image' (e.g. apply some effect)

 

//Set imageData

    ImageData pixelBuffer = ImageData&colon;:fromPixels(image.rgbSwapped().bits(),
                                bb:: PixelFormat::RGBA_Premultiplied,
                                reader.width(),
                                reader.height(),
                                image.bytesPerLine());
    Image bbimage = Image(pixelBuffer);
    if (!bbimage.isNull()) {
        myImageView->setImage(bbimage);
    }

////////////////////////////////////

Please use plain text.
Developer
oliver_kranz
Posts: 216
Registered: ‎09-18-2009
My Device: Z10
My Carrier: O2

Re: Insert transparent QImage to ImageView

myImageView->setImageSource(QUrl(imageFilePath));

 

Please use plain text.
Developer
oliver_kranz
Posts: 216
Registered: ‎09-18-2009
My Device: Z10
My Carrier: O2

Re: Insert transparent QImage to ImageView

I would avoid this conversion to ImageData. You can also create an Image from a QByteArray.

 

QByteArray imgData = imgReader.device()->readAll();
Image img(imgData);
myImageView.setImage(img);

 

Please use plain text.