脸书情绪答案

【问题标题】：Facebook Emotions脸书情绪
【发布时间】：2011-05-19 00:17:22
【问题描述】：

此代码来自 Facebook 聊天表情栏 Grease Monkey UserScript

ImagesURL = HttpsOn?'https://s-static.ak.fbcdn.net/images/':'http://static.ak.fbcdn.net/images/';


emotsInfo = [':)', ':(', ':p', ':D', ':o', ';)', '8)', '8|', '>:(', ':/', ':\'(', '3:)', 'O:)', ':*', '<3', '^_^', '-_-', 'o.O', '>:O', ':v', ':3'];



for(i=0;i<emotsInfo.length;i+=1) {
        var fEmotsDom = document.createElement('img');
        fEmotsDom.setAttribute('alt',emotsInfo[i]);
        fEmotsDom.setAttribute('style','cursor: pointer; background-position: -'+ 16*i +'px 0px;');
        fEmotsDom.setAttribute('src',ImagesURL + 'blank.gif');
        fEmotsDom.setAttribute('class','emote_img');
        fEmotsListDom.appendChild(fEmotsDom);
    }

此代码从 Facebook 服务器带来 Facebook 情感
我正在编写 WPF 代码，除了从 blank.gif 中获取情感外，我了解所有代码过程

C# 代码

        const string EmotionsResources = "http://static.ak.fbcdn.net/images/";


        private Image Emoticons ( string E )
        {
            return ( new Image ( ) { Source = new BitmapImage ( new Uri ( EmotionsResources + E ) ) } );
        }

如果您尝试获取任何 Facebook 聊天情绪的来源 .. 您将获得 [http://static.ak.fbcdn.net/images/blank.gif] 此代码从此链接检索情绪如何？

【问题讨论】：

标签： html css wpf facebook userscripts

【解决方案1】：

我在这里猜测，但我认为该类触发了一种检查替代文本的样式。（这是唯一有效的答案，一旦你划掉所有不可能的答案。每次迭代中唯一改变的是 alt 文本，所以这一定是触发它的原因。css 类选择器可以处理属性值）

换句话说 - 你被卡住了。

编辑

所以我很感兴趣，所以我开始深入挖掘：

图片上的css样式有以下css规则：

element.style {
background-position: 0px 0px;
}
.emote_img {
background: url(http://static.ak.fbcdn.net/rsrc.php/v1/zC/r/eKCEtE1PXyK.png) no-repeat;
overflow: hidden;
}

第一个由脚本设置，第二个来自 CSS 文件。

所以。实际图像在该 png 文件中找到，即：

http://static.ak.fbcdn.net/rsrc.php/v1/zC/r/eKCEtE1PXyK.png:

（很高兴知道你可以在 fb 中使用这么多表情符号！:-)

您会在一张图片中看到所有图片（这样做是为了节省带宽）由于图像大小为 16*16，因此一次只显示一张图像。背景位置的东西负责移动图像，以便每次从大图像中显示一个不同的图标。

因此，要在 C# 中获取图像，您将执行以下操作：

您可以裁剪它，或者使用完全相同的技巧（这在 IMO 中更好），如下所示：

<Canvas ClipToBounds="true" Width="16" Height="16">
    <Image Source="http://static.ak.fbcdn.net/rsrc.php/v1/zC/r/eKCEtE1PXyK.png" 
       Canvas.Left="0" /> <!-- or -16, -32, -48 etc.. -->
</Canvas>

【讨论】：