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

最近我读了一篇关于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.3import Ubuntu.Components 1.2import 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.3import Ubuntu.Components 1.2import 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.3import Ubuntu.Components 1.2import 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.3import Ubuntu.Components 1.2import 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