Qt開源作品11-螢幕錄制控件

一、前言

在平時的寫作過程中，經常需要将一些操作動作和效果圖截圖成gif格式，使得涵蓋的資訊更全面更生動，有時候可以将整個操作過程和運作效果錄制成MP4，但是檔案體積比較大，而且很多網站不便于上傳，基本上都支援gif動圖，一般一個5秒左右的gif，800*600分辨率，可以很好的控制在500KB内，這樣就比較完美的支援各大網站上傳動圖。

最開始使用的是ScreenGif.exe，用了很久，感覺還可以，後面一個朋友推薦用LICEcap.exe，體積更小，壓縮比更高，再到後來發現有個gif.h開源的類，調用其中的方法可以實作将多張圖檔合并到一張gif中去，而且還是跨平台的，本人親自在WIN+UBUNTU測試成功。

最初的代碼是倪大俠給的，我在此基礎上重新完善了下，使得可以直接拖動窗體大小來改變錄屏區域的大小。增加了對Qt4和其他編譯器的支援。

主要功能：

1. 可設定要錄制螢幕的寬高,支援右下角直接拉動改變.
2. 可設定變寬的寬度
3. 可設定錄屏控件的背景顔色
4. 可設定錄制的幀數
5. 錄制區域可自由拖動選擇

二、代碼思路

void GifWidget::saveImage()
{
    if (!gifWriter) {
        return;
    }

#if (QT_VERSION <= QT_VERSION_CHECK(5,0,0))
    //由于qt4沒有RGBA8888,采用最接近RGBA8888的是ARGB32,顔色會有點偏差
    QPixmap pix = QPixmap::grabWindow(0, x() + rectGif.x(), y() + rectGif.y(), rectGif.width(), rectGif.height());
    QImage image = pix.toImage().convertToFormat(QImage::Format_ARGB32);
#else
    QScreen *screen = QApplication::primaryScreen();
    QPixmap pix = screen->grabWindow(0, x() + rectGif.x(), y() + rectGif.y(), rectGif.width(), rectGif.height());
    QImage image = pix.toImage().convertToFormat(QImage::Format_RGBA8888);
#endif

    gif.GifWriteFrame(gifWriter, image.bits(), rectGif.width(), rectGif.height(), fps);
    count++;
    labStatus->setText(QString("正在錄制 第 %1 幀").arg(count));
}

void GifWidget::record()
{
    if (btnStart->text() == "開始") {
        if (0 != gifWriter) {
            delete gifWriter;
            gifWriter = 0;
        }

        //先彈出檔案儲存對話框
        //fileName = qApp->applicationDirPath() + "/" + QDateTime::currentDateTime().toString("yyyy-MM-dd-hh-mm-ss.gif");
        fileName = QFileDialog::getSaveFileName(this, "選擇儲存位置", qApp->applicationDirPath() + "/", "gif圖檔(*.gif)");
        if (fileName.isEmpty()) {
            return;
        }

        int width = txtWidth->text().toInt();
        int height = txtHeight->text().toInt();
        fps = txtFps->text().toInt();

        gifWriter = new Gif::GifWriter;
        bool bOk = gif.GifBegin(gifWriter, fileName.toLocal8Bit().data(), width, height, fps);
        if (!bOk) {
            delete gifWriter;
            gifWriter = 0;
            return;
        }

        count = 0;
        labStatus->setText("開始錄制...");
        btnStart->setText("停止");
        //延時啟動
        timer->setInterval(1000 / fps);
        QTimer::singleShot(1000, timer, SLOT(start()));
        //saveImage();
    } else {
        timer->stop();
        gif.GifEnd(gifWriter);

        delete gifWriter;
        gifWriter = 0;

        labStatus->setText(QString("錄制完成 共 %1 幀").arg(count));
        btnStart->setText("開始");
        QDesktopServices::openUrl(QUrl(fileName));
    }
}           

三、效果圖

四、開源首頁

以上作品完整源碼下載下傳都在開源首頁，會持續不斷更新作品數量和品質，歡迎各位關注。

1. 國内站點： https://gitee.com/feiyangqingyun/QWidgetDemo
2. 國際站點： https://github.com/feiyangqingyun/QWidgetDemo
3. 個人首頁： https://blog.csdn.net/feiyangqingyun
4. 知乎首頁： https://www.zhihu.com/people/feiyangqingyun/