如何为 facebook 爬虫生成自定义图像?
How to generate a custom image for facebook crawler?
我的网站可以很好地显示用户列表。在页面上,除其他外,我显示了一个 material 设计 sheet 像这样(一张图片,一些文本和一些列表的动态参数):
当 Facebook 抓取此页面时,我想提供看起来像这样(或更简单一些)的内容,显然它必须动态生成,因为您看到的只是在客户端。左上角的缩略图太小了,不能单独给Facebook。效果不会很讨喜。
实现这个在技术上是否可行?一些图书馆为此做了什么?
我在其中一个 Web 应用程序中遇到了类似的问题,我希望用户分享其对特定电影的投票。我想到的是使用以下元 headers:
为每个用户投票创建一个独特的页面
<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
包含 url 一张图片,上面有电影封面和用户投票 (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;
}
使用对图形的引用 class 添加文本和其他元素:
https://msdn.microsoft.com/en-us/library/system.drawing.graphics(v=vs.110).aspx
我的网站可以很好地显示用户列表。在页面上,除其他外,我显示了一个 material 设计 sheet 像这样(一张图片,一些文本和一些列表的动态参数):
当 Facebook 抓取此页面时,我想提供看起来像这样(或更简单一些)的内容,显然它必须动态生成,因为您看到的只是在客户端。左上角的缩略图太小了,不能单独给Facebook。效果不会很讨喜。
实现这个在技术上是否可行?一些图书馆为此做了什么?
我在其中一个 Web 应用程序中遇到了类似的问题,我希望用户分享其对特定电影的投票。我想到的是使用以下元 headers:
为每个用户投票创建一个独特的页面<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
包含 url 一张图片,上面有电影封面和用户投票 (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;
}
使用对图形的引用 class 添加文本和其他元素: https://msdn.microsoft.com/en-us/library/system.drawing.graphics(v=vs.110).aspx