QT學習：給label新增圖片資源

方法一：

首先，要在專案裡新增一個資原始檔。

 然後給資原始檔新增字首，把我們自己的圖片拷貝進去。

此處右擊可以拷貝圖片路徑

在ui設計介面新增一個label，起名為labelpicture。

MainWindow::MainWindow(QWidget *parent) :
    QMainWindow(parent),
    ui(new Ui::MainWindow)
{
    ui->setupUi(this);
    ui->labelpicture->setPixmap(QPixmap("://image/timg.jpeg"));
    ui->labelpicture->setScaledContents(true);
}

上面程式碼中的://image/timg.jpeg就是通過“拷貝圖片路徑”得到的，不用自己寫路徑，避免出錯。setScaledContents是為了讓圖片自適應label，不然顯示不完整。

 

 

方法二：

qt中如果你要新增圖片資原始檔我們需要執行以下步驟：

（1）先找好一張圖片，這裡就不多說了，網上資源很多。

（2）把我們找好的檔案統一放到一個資料夾，然後拉到工程檔案所在的資料夾下

 

（3）在qt中新建一個資原始檔，注意右鍵點選主檔案找到新增新檔案

（4）找到QT 點選右邊的QT Resource File

 

（5）點選choose，然後我們自定義一個名字

 

（6）如果是第一次新增則要找到剛才新增的資原始檔，都是在最下面，右鍵點選Open in Editor

 

（7）接著我們視窗的右邊，點選新增字首

 

（8）我們在這一步的時候可以改一個自己的字首

 

（9）點選完新增字首我們發現原來黑掉的新增檔案按鈕亮了

 

（10）點選新增檔案，會自動尋找到工程檔案所在的目錄下

 

（11）我們點選進到圖片所在的檔案image中選擇自己要新增到qt圖片資原始檔中

 

 

（12）新增進去的圖片將會顯示先back檔案下

 

到這裡我們的圖片就成功新增到圖片資原始檔中了，我們可以使用裡面的檔案，不用再擔心我們的圖片沒有拷貝到工程檔案下而無法顯示了。

 

我們來個簡單的使用例子，圖片放到按鈕中顯示

（一）拖進一個按鈕，右鍵點選找到改變樣式表

 

（二）從改變樣式表點選進去，找到新增資源，繼續點選border-image

 

 

（三）點選進去點選image，看到檔案下的圖片，點選，然後點選ok

 

（四）點選Apply或者ok，按鈕上將顯示剛才的圖片

 

到這裡我們的按鈕圖片就完成了，當然我們也可以用程式碼實現，前提是圖片資原始檔中有這張圖片，如下

ui->pushButton->setStyleSheet("border-image: url(:/back/image/www.ico.la_dd771a3447af3072c438047f09343551_64X64.ico);");

"border-image: url(:/back/image/www.ico.la_dd771a3447af3072c438047f09343551_64X64.ico);"
同樣是右鍵按鈕，然後改變樣式表，就可以看到路徑了

 

方法三：

參考Qt的幫助文件，可支援的型別，即可以直接讀取並顯示的格式有BMP、GIF、JPG、JPEG、PNG、TIFF、PBM、PGM、PPM、XBM、XPM。具體的步驟為：先開啟一個影像；將影像檔案載入進QImage物件中；再用QPixmap物件獲得影像；最後用QLabel選擇一個QPixmap影像物件顯示。

第一步：在UI介面新增一個Label控制元件，物件名為label

QString filename(“C:\\SensorsData\\BASLER\\code\\opencv\\vehicle.jpg”);
QImage* img=new QImage;
if(! ( img->load(filename) ) ) //載入影像
{
    QMessageBox::information(this,
                 tr("開啟影像失敗"),
                 tr("開啟影像失敗!"));
    delete img;
    return;
}
ui->label->setPixmap(QPixmap::fromImage(*img));

上述路徑為圖片的路徑，執行程式後，發現label只顯示了圖片的一小部分，因此需要修改label的大小

第二步：修改label的大小

Qlable設定大小的函式有resize()，所以在新增圖片前加上這行程式碼可以先調整好label的大小。

ui->label->resize(img->width(),img->height());

但是執行後發現圖片過大，label可能會超過設定的視窗的大小，還是不能完全顯示，需要找到其它合適的方法。label的大小範圍是固定的，所以應該按照比例縮放圖片的大小，採用如下的方法。

第三步：按比例縮放圖片大小

首先設定label的位置和大小

label->setGeometry(0,0,400,300);//前兩個參數列示label左上角位置後面分別是寬和高

接著根據圖片的大小縮放到合適的大小顯示，圖片縮放的相關函式是

img->scaled(width,height,Qt::KeepAspectRatio);

該函式前兩個參數列示的是縮放之後圖片的寬高，而第三個引數的作用是選擇模式是否保持長寬比，下面是完整的構建函式的程式碼

{
    ui->setupUi(this);
    QString StrWidth,StrHeigth;
    QString filename="F:\\Study\\junior\\Qt\\door\\1.jpg";
            QImage* img=new QImage,* scaledimg=new QImage;//分別儲存原圖和縮放之後的圖片
            if(! ( img->load(filename) ) ) //載入影像
            {
                QMessageBox::information(this,
                                         tr("開啟影像失敗"),
                                         tr("開啟影像失敗!"));
                delete img;
                return;
            }
            int Owidth=img->width(),Oheight=img->height();
            int Fwidth,Fheight;       //縮放後的圖片大小
            ui->label->setGeometry(0,0,400,300);
            int Mul;            //記錄圖片與label大小的比例，用於縮放圖片
            if(Owidth/400>=Oheight/300)
                Mul=Owidth/400;
            else
                Mul=Oheight/300;
            Fwidth=Owidth/Mul;
            Fheight=Oheight/Mul;
            *scaledimg=img->scaled(Fwidth,Fheight,Qt::KeepAspectRatio);
            ui->label_text->setText(QString("width: ")+StrWidth.setNum(Fwidth)
                                    +QString("\nheight: ")+StrHeigth.setNum(Fheight));
            ui->label->setPixmap(QPixmap::fromImage(*scaledimg));
}