ARTICLE DETAIL

资讯详情

深耕郑州网站建设与运营推广的一线实战洞察。

Windows-universal-samples 之 FileThumbnails:UWP 文件与文件夹缩略图获取实战指南

Windows-universal-samples 之 FileThumbnails:UWP 文件与文件夹缩略图获取实战指南 示例工程【免费下载链接】Windows-universal-samplesAPI samples for the Universal Windows Platform.项目地址https://gitcode.com/gh_mirrors/wi/Windows-universal-samples点击查看免费下载本指南以 Windows-universal-samples 仓库中归档的 File and folder thumbnail samplearchived/FileThumbnails/README.md为核心系统讲解如何基于Windows.Storage.FileProperties命名空间为图片、音乐、文档、文件夹以及文件组File Group获取合适的缩略图。读完本文你将掌握GetThumbnailAsync/GetScaledImageAsThumbnailAsync的完整调用链、ThumbnailMode与ThumbnailOptions的选型逻辑以及缩略图流的正确释放方式可直接迁移到自己的 UWP 应用中。示例概览五个演示任务与关键技术点该示例通过 6 个独立场景JavaScript 版位于 archived/FileThumbnails/js逐一演示了以下任务为图片检索缩略图让用户通过FileOpenPicker选取图片按所选视图模式返回缩略图scenario1.js。为歌曲检索专辑封面作为缩略图返回音乐文件的内嵌专辑封面并校验其类型确为ThumbnailType.imagescenario2.js。为文档检索图标作为缩略图对 Office 文档、PDF、纯文本等返回由系统提供的文档图标scenario3.js。为文件系统文件夹检索缩略图使用FolderPicker选取真实文件夹并获取其缩略图scenario4.js。为文件组检索缩略图文件组File Group是一种虚拟文件夹组内所有文件共享指定的查询条件示例按“同年同月”对图片库进行分组并取首个分组的缩略图scenario5.js。按任意像素尺寸获取缩放后的图片演示getScaledImageAsThumbnailAsync可在不修改原图的前提下快速获得任意大小的缩放图scenario6.js。示例明确强调了两条使用边界无法为“图片库”本身检索缩略图因为它是虚拟文件夹必须选择文件系统中实际包含图片的文件夹。文件组仅在库Library中可用普通文件夹不保证支持分组查询。核心 API 解析缩略图数据模型与调用入口示例涉及的五个关键 API 全部来自Windows.Storage.FileProperties与Windows.Storage命名空间API作用StorageItemThumbnail表示缩略图的只读流对象同时携带originalWidth、originalHeight、type等元数据ThumbnailMode枚举决定缩略图在何种视图下使用直接影响系统生成缩略图的方式与尺寸StorageFile.GetThumbnailAsync为文件获取缩略图StorageFile 实现IStorageItemPropertiesStorageFolder.GetThumbnailAsync为文件夹获取缩略图StorageFolder 同样实现该接口IStorageItemProperties.GetThumbnailAsync文件、文件夹以及虚拟文件夹通用的接口级调用入口调用入口统一为item.getThumbnailAsync(thumbnailMode, requestedSize, thumbnailOptions)thumbnailMode必填的ThumbnailMode值指示缩略图的预期使用场景。requestedSize以像素为单位的请求尺寸示例中使用 100 或 200也支持由用户输入任意值。thumbnailOptions可选的ThumbnailOptions标志位组合。从 scenario1.js 可以看到参数组合的典型写法var requestedSize 200, thumbnailMode modes[modeSelected], thumbnailOptions Windows.Storage.FileProperties.ThumbnailOptions.useCurrentScale; if (isFastSelected) { thumbnailOptions | Windows.Storage.FileProperties.ThumbnailOptions.returnOnlyIfCached; }其中useCurrentScale表示缩略图按当前显示缩放比例生成按位或|叠加returnOnlyIfCached后系统将只返回缓存中已存在的缩略图不再现场生成——这是“快速缩略图fast thumbnail”模式速度更快但可能质量较低或返回 null。场景一为图片检索缩略图scenario1.html 提供三种视图模式供用户选择映射关系在 scenario1.js 中定义下拉选项ThumbnailMode 值适用场景Thumbnail for a grid layoutThumbnailMode.picturesView网格布局如瀑布流照片墙Thumbnail for a list layoutThumbnailMode.listView列表布局如带缩略图的纵向列表Thumbnail for a single pictureThumbnailMode.singleItem单张图片的大图查看核心流程scenario1.jsvar openpicker new Windows.Storage.Pickers.FileOpenPicker(); openpicker.fileTypeFilter.replaceAll([.jpg, .png, .bmp, .gif, .tif]); openpicker.suggestedStartLocation Windows.Storage.Pickers.PickerLocationId.picturesLibrary; openpicker.pickSingleFileAsync().done(function (file) { if (file) { file.getThumbnailAsync(thumbnailMode, requestedSize, thumbnailOptions).done(function (thumbnail) { if (thumbnail) { outputResult(file, thumbnail, modeNames[modeSelected], requestedSize); } else if (isFastSelected) { // returnOnlyIfCached 模式下缓存未命中 } else { // 该文件没有可用的缩略图 } }); } });示例限定图片文件类型为.jpg、.png、.bmp、.gif、.tif并将选择器的起始位置定位到图片库PickerLocationId.picturesLibrary。成功返回后通过outputResult将缩略图流直接赋给img元素document.getElementById(picture-thumb-imageHolder).src URL.createObjectURL(thumbnailImage, { oneTimeOnly: true });值得注意的细节是URL.createObjectURL只用于一次性显示oneTimeOnly: true并在图片加载完成后立即调用thumbnailImage.close()关闭缩略图流scenario1.js。StorageItemThumbnail本质上是IRandomAccessStream不关闭会造成资源泄漏这一点在所有场景中保持一致。场景二为歌曲检索专辑封面scenario2.js 使用ThumbnailMode.musicView并以 100 像素为请求尺寸文件类型限定为.mp3、.wma、.m4a、.aac选择器起始位置为音乐库var requestedSize 100, thumbnailMode Windows.Storage.FileProperties.ThumbnailMode.musicView; file.getThumbnailAsync(thumbnailMode, requestedSize).done(function (thumbnail) { if (thumbnail) { // 校验类型确为 image专辑封面而非 icon文件图标回退 if (thumbnail.type Windows.Storage.FileProperties.ThumbnailType.image) { outputResult(file, thumbnail, ThumbnailMode.musicView, requestedSize); } else { // 该文件没有提供专辑封面 } } });这里体现了本示例的一个重要工程实践系统在无法提供专辑封面时可能回退返回文件图标ThumbnailType.icon。通过检查thumbnail.type ThumbnailType.image可以确认返回的确实是内嵌专辑封面而不是图标回退避免将图标误当作专辑封面展示给用户。场景三为文档检索图标scenario3.js 使用ThumbnailMode.documentsView同样以 100 像素为请求尺寸覆盖 Office 全系列格式及常见文本文档openpicker.fileTypeFilter.replaceAll([.doc, .xls, .ppt, .docx, .xlsx, .pptx, .pdf, .txt, .rtf]); openpicker.suggestedStartLocation Windows.Storage.Pickers.PickerLocationId.documentsLibrary; file.getThumbnailAsync(thumbnailMode, requestedSize).done(function (thumbnail) { if (thumbnail) { outputResult(file, thumbnail, ThumbnailMode.documentsView, requestedSize); } else { // 该文档没有可用的图标 } });对于没有内嵌预览的文档类型系统通常返回与该文件类型关联的图标作为缩略图。选择器起始位置为文档库PickerLocationId.documentsLibrary。场景四为文件系统文件夹检索缩略图文件夹缩略图通过StorageFolder.GetThumbnailAsync获取。scenario4.js 使用FolderPicker让用户挑选一个真实的文件系统文件夹var openpicker new Windows.Storage.Pickers.FolderPicker; openpicker.fileTypeFilter.replaceAll([.jpg, .png, .bmp, .gif, .tif]); openpicker.suggestedStartLocation Windows.Storage.Pickers.PickerLocationId.picturesLibrary; openpicker.pickSingleFolderAsync().done(function (folder) { if (folder) { folder.getThumbnailAsync(thumbnailMode, requestedSize).done(function (thumbnail) { if (thumbnail) { outputResult(folder, thumbnail, ThumbnailMode.picturesView, requestedSize); } else { // 文件夹中没有可生成缩略图的图片 } }); } });示例使用ThumbnailMode.picturesView、请求尺寸 200 像素返回的文件夹缩略图由文件夹内的图片合成。README 特别提醒不能为图片库本身Pictures library检索缩略图因为它是虚拟文件夹只能选取文件系统中实际存放图片的文件夹。场景五为文件组File Group检索缩略图文件组是Windows.Storage.Search提供的虚拟文件夹机制组内所有文件共享调用方指定的公共条件。scenario5.js 使用CommonFolderQuery.groupByMonth按“同年同月”对图片进行分组完整调用链如下var monthShape Windows.Storage.Search.CommonFolderQuery.groupByMonth; // 1. 先确认所选文件夹库支持该分组查询 if (folder.isCommonFolderQuerySupported(monthShape)) { // 2. 将文件夹转换为分组查询并取得各组虚拟文件夹 var query folder.createFolderQuery(monthShape); query.getFoldersAsync().done(function (monthList) { if (monthList monthList.size 0) { var firstMonth monthList.getAt(0); // 3. 对第一个分组调用与普通文件夹相同的缩略图 API firstMonth.getThumbnailAsync(thumbnailMode, requestedSize).done(function (thumbnail) { if (thumbnail) { outputResult(firstMonth, thumbnail, ThumbnailMode.picturesView, requestedSize, true); } }); // 4. 同时枚举该分组内的文件列表 firstMonth.getFilesAsync().done(function (files) { files.forEach(function (file) { outputHeader(file.name); }); }); } }); }这段代码展示了三条关键事实分组查询的入口是isCommonFolderQuerySupported(commonFolderQuery)与createFolderQuery(commonFolderQuery)二者均来自StorageFolder。文件组只在库中生效示例通过isCommonFolderQuerySupported预检若所选文件夹不是库或图片库中没有满足分组条件的文件则分别提示错误SdkSample.errors.filegroupLocation/emptyFilegroup。分组结果monthList中的每一项都是虚拟文件夹仍然可以复用GetThumbnailAsync获取代表该组的缩略图。场景六按任意尺寸获取缩放图片scenario6.js 演示了getScaledImageAsThumbnailAsync允许用户在界面中输入任意像素尺寸系统在尽可能快的前提下返回该尺寸的缩放图某些情况下会借助云服务获取缩略图。var requestedSize parseInt(document.getElementById(picture-thumb-requestSize).value); if (requestedSize 0 !isNaN(requestedSize)) { var thumbnailMode Windows.Storage.FileProperties.ThumbnailMode.singleItem, thumbnailOptions Windows.Storage.FileProperties.ThumbnailOptions.useCurrentScale; if (isFastSelected) { thumbnailOptions | Windows.Storage.FileProperties.ThumbnailOptions.returnOnlyIfCached; } file.getScaledImageAsThumbnailAsync(thumbnailMode, requestedSize, thumbnailOptions).done(function (thumbnail) { if (thumbnail) { outputResult(file, thumbnail, ThumbnailMode.singleItem, requestedSize); } }); } else { // 输入尺寸非法0 或非数字 }与GetThumbnailAsync相比该 API 更贴合“按需缩放”场景入参不是期望的请求尺寸上限而是目标像素值同时保留了useCurrentScale与returnOnlyIfCached的组合能力。示例同时对用户输入做了合法性校验requestedSize 0 !isNaN(requestedSize)非法输入直接提示错误。通用输出与资源释放模式六个场景共用同一套输出模式体现了处理StorageItemThumbnail流的推荐做法以 scenario1.js 为例function outputResult(item, thumbnailImage, thumbnailMode, requestedSize) { // 1. 将缩略图流绑定到 img一次性使用 document.getElementById(picture-thumb-imageHolder).src URL.createObjectURL(thumbnailImage, { oneTimeOnly: true }); // 2. 图片渲染完成后立即关闭流释放底层资源 document.getElementById(picture-thumb-imageHolder).onload function () { thumbnailImage.close(); }; // 3. 展示元数据模式、文件名、请求尺寸、实际返回尺寸 document.getElementById(picture-thumb-modeName).innerText thumbnailMode; document.getElementById(picture-thumb-fileName).innerText File used: item.name; document.getElementById(picture-thumb-requestedSize).innerText Requested size: requestedSize; document.getElementById(picture-thumb-returnedSize).innerText Returned size: thumbnailImage.originalWidth x thumbnailImage.originalHeight; }三个要点流绑定URL.createObjectURL可将StorageItemThumbnailIRandomAccessStream直接作为图片源。主动关闭thumbnailImage.close()在onload回调中执行避免流长期占用资源重复操作前还会调用cleanOutput()清空上一次的输出与状态。尺寸核对通过originalWidth/originalHeight展示系统实际返回的缩略图尺寸可与请求尺寸对照便于理解不同ThumbnailMode下的缩放行为。构建与运行环境依据 archived/FileThumbnails/README.md 的说明工具链需要 Visual Studio 2017 构建Windows 10 上执行JavaScript 工程文件为 FileThumbnails.jsproj解决方案为 FileThumbnails.sln。系统要求客户端 Windows 10、服务端 Windows Server 2016 Technical Preview、移动端 Windows 10。构建步骤若以 ZIP 方式下载示例集合需解压整个压缩包而非只解压单个示例目录以便共享依赖正常工作。启动 Visual Studio 2017选择FileOpenProject/Solution。进入Samples子目录下的对应示例目录选择目标语言子目录C、C# 或 JavaScript双击其中的.sln文件。按CtrlShiftB或选择BuildBuild Solution完成编译。运行与部署仅部署选择BuildDeploy Solution。调试运行按F5或选择DebugStart Debugging。免调试运行按CtrlF5或选择DebugStart Without Debugging。相关主题与延伸学习README 将本示例归类为 UWP 文件访问能力的一部分仓库内与之关联的样本可继续深入File access sample文件读写与基本存储操作File picker sample文件/文件夹选择器完整用法Folder enumeration sample文件夹枚举与查询Programmatic file search sample基于查询语法AQS的编程式文件搜索以上样本在仓库中同时提供 C/C/WinRT/C# 等多种语言实现部分归档于 archived 目录可与本文的 JavaScript 实现相互对照。若需设计“向用户展示恰当缩略图”的交互官方指南强调应依据缩略图的最终展示上下文网格、列表、单图、文档、音乐等选择对应的ThumbnailMode并结合ThumbnailOptions.returnOnlyIfCached在速度与质量之间做权衡——这正是本示例六个场景反复演示的核心决策模型。赞分享示例工程【免费下载链接】Windows-universal-samplesAPI samples for the Universal Windows Platform.项目地址https://gitcode.com/gh_mirrors/wi/Windows-universal-samples点击查看免费下载相关推荐Windows Universal Samples 之 FileThumbnails在 UWP 中为文件、文件夹与文件组检索缩略图Windows Universal Samples 之 FileThumbnails在 UWP 中为文件、文件夹与文件组检索缩略图 本指南以 Samples/示例工程Windows-universal-samples 之 App 包信息获取Windows.ApplicationModel.Package 与 PackageId 实战指南Windows universal samples 之 App 包信息获取Windows.ApplicationModel.Package 与 Package示例工程Windows-universal-samples 库管理示例基于 StorageLibrary 的文件夹增删查实战指南Windows universal samples 库管理示例基于 StorageLibrary 的文件夹增删查实战指南 导读 本文以 Windows uni示例工程上一篇专业级.NET逆向工程5个高效策略深度解析dnSpy调试器下一篇如何轻松实现Windows和Office永久激活终极免费解决方案指南创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表