利用thumbnailer API来提取图标视频或专辑的thumbnail

Elastic 中国社区官方博客

于 2016-03-07 15:34:29 发布

阅读量1.3k

点赞数

CC 4.0 BY-SA版权

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.youkuaiyun.com/UbuntuTouch/article/details/50819406

移动开发同时被 2 个专栏收录

268 篇文章

订阅专栏

QML

185 篇文章

订阅专栏

本文介绍如何利用Thumbnailer API来提取图片、视频及在线音乐的缩略图，并通过示例展示了如何在Qt Quick应用程序中实现这一功能，以提高应用性能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最近我读了一篇关于thumbnailer API的文章．这个API主要是用来让我们提取图片，视频，或在线音乐的图片的thumbnail的．基于这个API我也做了一个很小的测试程序．在今天的例程中，我们选择使用＂QtQuick App with QML UI (qmake)＂模版来实现这个例程．这主要的原因在于以后我们的SDK有可能不再继续支持＂qmlproject＂模版了．基于这个模版，我做了一些的改动，从而可以使得我们的Main.qml不一定要位于qrc的资源文件中：

main.cpp

#include <QGuiApplication>
#include <QQmlApplicationEngine>
#include <QQuickView>

int main(int argc, char *argv[])
{
    QGuiApplication app(argc, argv);

    QQuickView view;
//    view.setSource(QUrl(QStringLiteral("qrc:///Main.qml")));
    view.setSource(QUrl::fromLocalFile("thumbnailer/Main.qml"));
    view.setResizeMode(QQuickView::SizeRootObjectToView);
    view.show();
    return app.exec();
}

从上面的代码中可以看出来，我们使用了一个本地的Main.qml而不是资源文件中的Main.qml．这样的改变是为了我们能够更好地使用本地的一些照片．我们在项目的.pro文件中也做了相应的修改．

我们的测试代码非常简单：

Main.qml

import QtQuick 2.3
import Ubuntu.Components 1.2
import Ubuntu.Thumbnailer 0.1

/*!
    \brief MainView with a Label and Button elements.
*/

MainView {
    // objectName for functional testing purposes (autopilot-qt5)
    objectName: "mainView"

    // Note! applicationName needs to match the "name" field of the click manifest
    applicationName: "thumbnailer.liu-xiao-guo"

    /*
     This property enables the application to change orientation
     when the device is rotated. The default is false.
    */
    // automaticOrientation: false

    width: units.gu(60)
    height: units.gu(85)

    function encode_utf8(s) {
      return unescape(encodeURIComponent(s));
    }

    function decode_utf8(s) {
      return decodeURIComponent(escape(s));
    }

    Page {
        title: i18n.tr("thumbnailer")

        Image {
            source: "image://thumbnailer/"+Qt.resolvedUrl("images/image2.jpg")
            width:parent.width/2
            height:parent.height/2
            fillMode:Image.PreserveAspectFit
            sourceSize:Qt.size(width, height)
            anchors.centerIn: parent
        }
    }
}

运行我们的代码：

可能很多的开发者觉得不以为然，因为这个展示太不给力了．但是如果你的应用中有很多的这样的照片，那么对你的应用显示所展示的效率将是很大地提高．比如你有一个ListView，每个里面都放有很多的类似的照片．一个thunmbnail的照片所需要的内存和一个完整的照片所需要的内存，显然是不一样的．

我们也可以对我们项目里的一个视频做展示：

Main.qml

import QtQuick 2.3
import Ubuntu.Components 1.2
import Ubuntu.Thumbnailer 0.1

/*!
    \brief MainView with a Label and Button elements.
*/

MainView {
    // objectName for functional testing purposes (autopilot-qt5)
    objectName: "mainView"

    // Note! applicationName needs to match the "name" field of the click manifest
    applicationName: "thumbnailer.liu-xiao-guo"

    /*
     This property enables the application to change orientation
     when the device is rotated. The default is false.
    */
    // automaticOrientation: false

    width: units.gu(60)
    height: units.gu(85)

    function encode_utf8(s) {
      return unescape(encodeURIComponent(s));
    }

    function decode_utf8(s) {
      return decodeURIComponent(escape(s));
    }

    Page {
        title: i18n.tr("thumbnailer")

        Image {
            width:parent.width/2
            height:parent.height/2
            source: "image://thumbnailer/"+Qt.resolvedUrl("videos/sample.mp4")
            fillMode:Image.PreserveAspectFit
            sourceSize:Qt.size(width, height)
            anchors.centerIn: parent
        }
    }
}

我们也可以的对7-digital页面的多媒体进行访问：

import QtQuick 2.3
import Ubuntu.Components 1.2
import Ubuntu.Thumbnailer 0.1

/*!
    \brief MainView with a Label and Button elements.
*/

MainView {
    // objectName for functional testing purposes (autopilot-qt5)
    objectName: "mainView"

    // Note! applicationName needs to match the "name" field of the click manifest
    applicationName: "thumbnailer.liu-xiao-guo"

    /*
     This property enables the application to change orientation
     when the device is rotated. The default is false.
    */
    // automaticOrientation: false

    width: units.gu(60)
    height: units.gu(85)

    function encode_utf8(s) {
      return unescape(encodeURIComponent(s));
    }

    function decode_utf8(s) {
      return decodeURIComponent(escape(s));
    }

    Page {
        title: i18n.tr("thumbnailer")

        Image {
            width:parent.width/2
            height:parent.height/2
            source: "image://albumart/album=Blur:+The+Best+Of&artist=Blur"
            fillMode:Image.PreserveAspectFit
            sourceSize:Qt.size(width, height)
            anchors.centerIn: parent
        }
    }
}

我们也可以对音乐家及专辑进行搜索：

Main.qml

import QtQuick 2.3
import Ubuntu.Components 1.2
import Ubuntu.Thumbnailer 0.1

/*!
    \brief MainView with a Label and Button elements.
*/

MainView {
    // objectName for functional testing purposes (autopilot-qt5)
    objectName: "mainView"

    // Note! applicationName needs to match the "name" field of the click manifest
    applicationName: "thumbnailer.liu-xiao-guo"

    /*
     This property enables the application to change orientation
     when the device is rotated. The default is false.
    */
    // automaticOrientation: false

    width: units.gu(60)
    height: units.gu(85)

    function encode_utf8(s) {
      return unescape(encodeURIComponent(s));
    }

    function decode_utf8(s) {
      return decodeURIComponent(escape(s));
    }

    Page {
        title: i18n.tr("thumbnailer")

        Image {
            width:parent.width/2
            height:parent.height/2
            source: "image://artistart/"+"album=Real+Gone&artist=Tom+Waits"
            fillMode:Image.PreserveAspectFit
            sourceSize:Qt.size(width, height)
            anchors.centerIn: parent
        }
    }
}

目前测试针对中国歌手的测试还不是很成功，比如：

 source: "image://artistart/"+encode_utf8("album=传奇&artist=王菲")

整个项目的源码在： https://github.com/liu-xiao-guo/thumbnailer