如何为facebook crawler生成自定义图像?

时间:2017-02-25 16:23:34

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

我的网站能够很好地显示用户列表。在页面上,除其他外,我显示这样的材料设计表(图像,一些文本和列表的一些动态参数):

Coludik panel

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

实现这一目标在技术上是否可行?有些图书馆为此做了什么?

1 个答案:

答案 0 :(得分:0)

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

<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)的图片的网址。

我在用户投票时生成@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