如何为 facebook 爬虫生成自定义图像？答案

【问题标题】：How to generate a custom image for facebook crawler?如何为 facebook 爬虫生成自定义图像？
【发布时间】：2017-02-27 23:23:04
【问题描述】：

我的网站能够以一种很好的方式显示用户列表。在页面上，除其他外，我显示了一个这样的材料设计表（一张图片、一些文本和一些列表的动态参数）：

当 Facebook 抓取这个页面时，我想提供一些看起来像这样（或者更简单一些）的东西，显然它必须动态生成，因为你看到的只是在客户端。左上角的缩略图太小，无法单独提供给 Facebook。效果不会很讨喜。

实现这一点在技术上是否可行？一些图书馆为此做了什么？

【问题讨论】：

您的意思是控制 Facebook 如何在 FB 上呈现内容？ IINM，除了标准的Open Graph markup 可以自定义“共享图像”（以及更多）之外，另一个可能的“布局”是在您做广告时（它们提供了一些关于如何宣传您的“帖子”的选项）。
不，我的问题不在于这在 facebook 端是如何发生的。我知道我有义务提供图片网址。我想要的是能够动态生成这个图像，然后通过 Stream 提供它。但是如何在服务器端生成这个图像？有没有帮助的库？它甚至可以是矢量并导出到图像吗？
您可以查看Image resizer 之类的内容。嗯……
@EdSF 我不认为这会帮助我用文本、图标等组成图像......这看起来更像是一个图像处理工具。
从下面您实际创建图像的答案来看，可能误解了您的问题。

标签： asp.net-mvc facebook-graph-api dynamic-image-generation

【解决方案1】：

我在一个网络应用程序中遇到了类似的问题，我希望用户分享对特定电影的投票。我想出的是使用以下元标题为每个用户投票创建一个独特的页面：

<meta property="og:image" content="@share_image" />
<meta property="og:site_name" content="@SystemResource.application_name" />
<meta property="og:url" content="@share_url" />
<meta property="og:type" content="article" />
<meta property="og:title" content="@share_title" />
<meta property="og:description" content="@Model.review_text" />

我的@share_image 包含指向带有电影封面和用户投票 (1-10) 的图像的 URL。

当用户投票时，我会生成我的@share_image，并通过以下方式完成：

// main image
Image canvas = Bitmap.FromFile(configData.MainImageAbolutePath);

// vote image (circles with numbers from 1 to 10)
Bitmap smallImg = new Bitmap(configData.OverlayImageAbolutePath);

// create new image
using (Graphics gr = Graphics.FromImage(canvas))
{
    // here you can play with quality
    gr.SmoothingMode = SmoothingMode.HighQuality;
    gr.InterpolationMode = InterpolationMode.HighQualityBicubic;
    gr.PixelOffsetMode = PixelOffsetMode.HighQuality;

    // place vote image on top of the cover using x and y coordinates
    gr.DrawImage(smallImg, new Point(configData.X, configData.Y));
}
// here you can play with quality
ImageCodecInfo jgpEncoder = GetEncoderInfo(ImageFormat.Jpeg);
Encoder myEncoder = Encoder.Quality;
EncoderParameters myEncoderParameters = new EncoderParameters(1);
EncoderParameter myEncoderParameter = new EncoderParameter(myEncoder, 100L);
myEncoderParameters.Param[0] = myEncoderParameter;

// generate our @share_image
canvas.Save(configData.DestinationImageAbolutePath, jgpEncoder, myEncoderParameters);

你还需要这个方法：

public static ImageCodecInfo GetEncoderInfo(ImageFormat format)
{
    ImageCodecInfo[] codecs = ImageCodecInfo.GetImageDecoders();
    foreach (ImageCodecInfo codec in codecs)
    {
        if (codec.FormatID == format.Guid)
        {
            return codec;
        }
    }
    return null;
}

使用此对 Graphics 类的引用来添加文本和其他元素： https://msdn.microsoft.com/en-us/library/system.drawing.graphics(v=vs.110).aspx

【讨论】：

谢谢。我离开了 1 周的旅行，但我一定会在回来时回顾一下。
这是让它发挥作用的一个很好的起点。谢谢你。我添加了接线以从 MVC 操作方法将图像返回为 PNG，因此我不需要 ImageCodecInfo 部分。