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
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? 
Developer
oliver_kranz
Posts: 216
Registered: ‎09-18-2009
My Device: Z10

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.

 

 

Contributor
chris_chrono
Posts: 10
Registered: ‎01-21-2013
My Device: bb10 alpha

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
Developer
oliver_kranz
Posts: 216
Registered: ‎09-18-2009
My Device: Z10

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

 

Developer
oliver_kranz
Posts: 216
Registered: ‎09-18-2009
My Device: Z10

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.

Contributor
chris_chrono
Posts: 10
Registered: ‎01-21-2013
My Device: bb10 alpha

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?
Developer
oliver_kranz
Posts: 216
Registered: ‎09-18-2009
My Device: Z10

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

 

Contributor
mnosov
Posts: 15
Registered: ‎10-25-2012
My Device: Dev Alpha B

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

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

Developer
oliver_kranz
Posts: 216
Registered: ‎09-18-2009
My Device: Z10

Re: Insert transparent QImage to ImageView

myImageView->setImageSource(QUrl(imageFilePath));

 

Developer
oliver_kranz
Posts: 216
Registered: ‎09-18-2009
My Device: Z10

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);