如何正确地在手机上显示图片——QImage与QPixmap完全解析

引言

用Qt程序在手机上显示一幅图片对编程人员来说是再基础不过的一件事情了。那么先让大家看两段代码： 

//dangerous should not be used, cannot display earth.png,  //but if we change earth.png to a smaller image e.g. apple.png, apple.png can be displayed QPixmap pixmap; pixmap.load( ":/pics/earth.png" ); label->setPixmap( pixmap );

和

//dangerous should not be used, cannot display earth.png,  //but if we change earth.png to a smaller image e.g. apple.png, apple.png can be displayed QPixmap pixmap; pixmap.load( ":/pics/earth.png" ); QPainter painter(this); painter.drawPixmap(0,0, pixmap);

大家认为这两段代码有什么问题吗？ 
看起来好像没什么问题啊。是的，在Windows操作系统上是没有问题的。问题是我们做的是Qt for Symbian! 手机上的资源本来就是比较紧缺的，所以我们使用的时候就需要更加注意。 Qt 为我们提供了四个处理图像的类：QImage，QPixmap，QBitmap 和QPicture。其中前两个是最常使用的。

本文就通过一个例子，一步一步为大家讲解QImage与QPixmap的使用奥秘，在此过程中为大家揭示以上代码存在的缺陷。本文所用例子程序可通过本文末尾所附链接下载。 

QPixmap依赖于硬件

首先需要知道的是QPixmap的具体实现是依赖于系统的。在Symbian系统上QPixmap是被存放在Server端的。

目前的Qt会把QPixmap都存储在graphics memory中，这明显是依赖硬件的。因此我们对QPixmap的使用需要格外注意。这也正是以上两段代码存在问题的根源。
那么Qt为什么要这么做呢？很简单，设计之初QPixmap就是用来加速显示的，例如我们在paint的时候用QPixmap就会比用其他类的效果好许多。

现在回到我们最初的问题，以上代码到底有什么问题呢？我们可以先用本文提供的例子程序做个试验。当使用上述代码显示较小图片的时候（比如例子程序中的background.png 和apple.png）是没有问题的，图片都能在手机上正确显示。
但是当我们把图片换成一副较大图片287KB,1058 x 1058的“earth.png”的时候就出现问题了，图片无法显示，程序的界面是一片空白。

据测算，“earth.png”被完全解码后存储在graphics memory中会占用大约4.3MB的空间。如果此时还有其他加载的窗口和QPixmap，很可能就没有空间了。

使用QImage加载后转换成QPixmap 显示

那么安全和正确的方法应该是什么呢？答案是我们需要用QImage做一下预处理：

//correct and recommended way QImage image; image.load( ":/pics/earth.png" );   QPainter painter(this); QPixmap pixmapToShow = QPixmap::fromImage( image.scaled(size(), Qt::KeepAspectRatio) ); painter.drawPixmap(0,0, pixmapToShow);

和QPixmap 不同，QImage是独立于硬件的，它可以同时被另一个线程访问。QImage是存储在客户端的，对QImage的使用是非常方便和安全的。 又由于 QImage 也是一种QPaintDevice，因此我们可以在另一个线程中对其进行绘制，而不需要在GUI 线程中处理，使用这一方式可以很大幅度提高UI响应速度。 
因此当图片较大时，我们可以先通过QImage将图片加载进来，然后把图片缩放成需要的尺寸，最后转换成QPixmap 进行显示。 下图是显示效果（图片是按照earth.png的原始尺寸比例缩放后显示的）：

其中需要注意的是Qt::KeepAspectRatio的使用，默认参数是Qt::IgnoreAspectRatio，如果我们在程序中这么写：

QPixmap pixmapToShow = QPixmap::fromImage( image.scaled(size(), Qt::IgnoreAspectRatio) );

效果就是下面这个样子，earth.png被拉伸以充满整个屏幕：

直接使用QImage 显示

我们也可以直接使用QImage做显示，而不转换成QPixmap ，这要根据我们应用的具体需求来决定，如果需要的话我们可以这么写：

//correct, some times may be needed QImage image; image.load( ":/pics/earth.png" );   QPainter painter(this); painter.drawImage(0,0, image);

下面是显示效果（当然我们也可以对其进行缩放之后再显示）
从图片可以看出来它是按照原始尺寸显示earth.png的： 

测试设备

本代码已通过在N97和N8上的测试。

本文转载自：http://developer.nokia.com/community/wiki/%E5%A6%82%E4%BD%95%E6%AD%A3%E7%A1%AE%E5%9C%B0%E5%9C%A8%E6%89%8B%E6%9C%BA%E4%B8%8A%E6%98%BE%E7%A4%BA%E5%9B%BE%E7%89%87%E2%80%94%E2%80%94QImage%E4%B8%8EQPixmap%E5%AE%8C%E5%85%A8%E8%A7%A3%E6%9E%90


此外，关于Qt绘图，还可以借鉴这篇文章：