html - Facebook 情绪

Question

此代码来自Facebook Chat Emoticons Bar 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 ] 此代码如何从此链接检索情绪？

Answer 1

我在这里猜测，但我认为该类会触发一种检查替代文本的样式。 (一旦你划掉所有不可能的答案，这是唯一有效的答案。每次迭代中唯一改变的是替代文本，所以它必须是触发它的东西。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# 中获取图像，您需要执行以下操作:

你可以裁剪它，或者使用完全相同的技巧(在我看来这是更好的技巧)，就像这样:

<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>