65.9K
CodeProject 正在变化。 阅读更多。
Home

现代剪贴簿

starIconstarIconstarIcon
emptyStarIcon
starIcon
emptyStarIcon

3.33/5 (2投票s)

2013年7月25日

CPOL

4分钟阅读

viewsIcon

15368

支持触摸的应用,用于从社交服务托管的图片创建剪贴簿。

引言

过去几年,智能手机、社交媒体和云托管存储的使用量激增。所有这些都导致大量的个人照片以各种方式存储和共享。人们过去常常将照片整理成实体剪贴簿,但这并没有很好地转化为数字领域。用户不想右键单击并下载图像到本地计算机,以便笨拙地裁剪/调整大小,并在并非专门为此设计的程序(Word、PowerPoint、Paint...)中组合照片。我的应用程序的想法是试图将旧的剪贴簿艺术带回到这个数字照片的新时代。

应用程序

 

 

Ultra Scrapbook 是一款允许用户查看和提取来自他们依赖的流行服务的照片的应用程序。然后,用户可以将照片组合到画布上,在那里他们可以定位和调整大小。剪贴簿可以有多个页面,每个页面将包含照片和文本标题。

我的应用程序特别适合具有大型鲜艳触摸屏的新型一体机(AIO)。Intel Core 处理器是为这个图形密集型应用程序提供动力的完美解决方案,为用户提供流畅且无抖动的体验。该应用程序将吸引各代人,因为当今 AIO 的大屏幕非常适合全家人一起享受构建剪贴簿的乐趣。多点触控界面甚至可以让最年轻和最年长的成员直观地与应用程序交互。

特点

  • 使用 Facebook 凭据登录
  • 查看和提取与您在 FB 上关联的照片
  • 在画布上添加、排列和调整照片大小
  • 将画布输出为 JPEG 或 PDF
  • 您的项目持久保存在云端 (Azure) 并与您的 FB 凭据相关联

未来功能

  • 与 Microsoft、Google、Twitter 和其他服务集成,以允许混合来自多个服务的照片。
  • 将签到信息与剪贴簿相关联,供用户创建时间线类型的故事
 

使用代码 

该应用程序将使用 WPF 以 C# 编写。用户配置文件和项目数据将存储在通过 Azure 托管的 Web 服务上。该应用程序将通过 REST 调用提取数据。Web 服务本身将是一个 ASP.NET MVC 4 项目,它使用对 Graph API 的调用与 Facebook 通信。为了本次竞赛的目的,我将专注于使用 Facebook,这是最流行的社交网络。但是该应用程序将以一种通用的方式设计,以便以后可以集成 Google、Microsoft、Twitter 和其他服务。

对于 Facebook,我们使用 Facebook SDK for .NET。通过在 NuGet 管理器中搜索“Facebook”将其添加到项目中。这是我们用来获取与用户关联的前 25 张图片的调用。请注意,“me”用于代替用户 ID 来指代登录用户。

//
var client = new Facebook.FacebookClient("yourAccessToken");
dynamic response = client.Get("me/photos", new { limit = 25, offset = 0});
//   

Get 调用返回给我们一个动态对象,它实际上是一个 JSON 对象。为了解析它,我们检查它是否有一个名为“data”的键,然后迭代它的子项。我定义了一个 Picture 类来表示图片。我们设置了一个“SocialProvider”属性来帮助我们在未来添加其他服务。

  List<Picture> list = new List<Picture>();
            if (response.ContainsKey("data"))
            {
                foreach (var result in response["data"])
                {
                    Picture item = new Picture();
                    item.Id = null;
                    item.SourceId = result.id;
                    item.Name = result.name;
                    item.Link = result.link;
                    item.ImageUrl = result.picture;
                    item.BigImageUrl = result.source;
                    item.Date = DateTime.Parse(result.created_time);
                    item.Provider = SocialProvider.Facebook;
                    list.Add(item);
                }
            }

Facebook 在动态结果中的 result.images 数组中存储了每个图像的几种不同的分辨率。在我们的应用程序中,一张图片只能与一个源 URL 相关联。因此,当用户调整图片大小时,我们希望抓取最佳分辨率。但我们不想只抓取最高可能的分辨率,因此我们根据调整大小后的尺寸寻找下一个最高分辨率。使用图片的 ID,我们可以只对该图片进行窄查询。

dynamic response = client.Get(picture.SourceId);

            List<KeyValuePair<Size, string>> sizes = null;
            if (response.ContainsKey("images"))
            {
                sizes = new List<KeyValuePair<Size, string>>();
                foreach (var result in response["images"])
                {
                    sizes.Add(new KeyValuePair<Size, string>(new Size(Convert.ToInt32(result.width), Convert.ToInt32(result.height)), result.source));
                }
            }if (sizes != null)
            {
                //Figure out the best width and hieght.  Basically the best width is equal to actual width, or one level higher.  Same for height.
                Size bestWidth = new Size();
                Size bestHeight = new Size();
                string value = picture.ImageUrl;
                foreach (var item in sizes)
                {
                    if (bestWidth.Width == 0 ||
                        (bestWidth.Width < picture.Width && bestWidth.Width < item.Key.Width) ||
                        (bestWidth.Width > picture.Width && bestWidth.Width > item.Key.Width && item.Key.Width > picture.Width))
                    {
                        bestWidth = item.Key;
                    }
                    if (bestHeight.Height == 0 ||
                        (bestHeight.Height < picture.Height && bestHeight.Height < item.Key.Height) ||
                        (bestHeight.Height > picture.Height && bestHeight.Height > item.Key.Height && item.Key.Height > picture.Height))
                    {
                        bestHeight = item.Key;
                    }
                }

                //Set the optimal size to which ever size is the greatest.
                Size optimalSize = bestWidth.Width * bestWidth.Height > bestHeight.Width * bestHeight.Height ? bestWidth : bestHeight;

                return sizes.Find(p => p.Key.Equals(optimalSize)).Value;
            }   

当我有进一步进展时,我计划发布更多代码,涉及客户端 WPF 应用程序和 Azure 托管的 Web 服务之间的通信。我将利用 Azures 免费 20MB SQL 数据库分配来存储有关用户剪贴簿和图片的信息。这将允许用户将他们的项目加载到任何 W8 计算机上。

我还将展示如何使用捏合缩放和拖动来调整图片的大小和位置。这将在 AIO 计算机的大型触摸屏上发挥巨大作用。

兴趣点 

Facebook 提供了两种访问其数据的方法。Graph API 和 FQL。不幸的是,两者都不像我希望的那样强大。我以为我可以进行复杂的 SQL 查询。但是如果你尝试查询未编入索引的字段,你会收到一个错误。因此,我使用 Graph API 来获取一般事物的列表,例如用户的照片或他们的签到。FQL 用于查询特定的关系,例如照片是否与某个朋友相关联。

历史 

2013年7月24日:原始撰写。

© . All rights reserved.