准备工作
引入如下Nuget包依赖
Install-Package QRCoder 1.4.1
Install-Package SixLabors.ImageSharp 1.0.3
Install-Package SixLabors.ImageSharp.Drawing 1.0.0-beta13
或者编辑项目文件,新增如下节点
<PackageReference Include="QRCoder" Version="1.4.1" />
<PackageReference Include="SixLabors.ImageSharp" Version="1.0.3" />
<PackageReference Include="SixLabors.ImageSharp.Drawing" Version="1.0.0-beta13" />
依赖图片
项目根目录新建字体文件夹(fonts)
Alibaba-PuHuiTi-Regular.ttf
SIMHEI.TTF
新建图片文件夹(images)
bottom.png
mask.png
star.png
top.png
代码如下
/// <summary>
/// 生成海报
/// </summary>
/// <param name="response">商品海报返回数据</param>
/// <returns></returns>
protected async Task<Stream> Generate(ProductResponse response)
{
//画布宽度
int canvasWidth = 327 * 2;
//画布高度
int canvasHeight = 485 * 2;
//卡券图片背景高度
int CouponImgBgHeight = 197 * 2;
//卡券图片宽度
int CouponImgWidth = 260 * 2;
//卡券图片高度
int CouponImgHeight = 155 * 2;
//卡券图片居上间距
int CouponImgTopPadding = 35 * 2;
//卡券图片居左间距
int CouponImgLeftPadding = 33 * 2;
//卡券图片背景颜色
Color CouponImgBgColor = Color.ParseHex("#F7F7F7");
//卡券内容背景高度
int CouponContentBgHeight = 232 * 2;
//卡券内容背景颜色
Color CouponContentBgColor = Color.White;
//图片的高度
int imageHeight = 28 * 2;
//二维码宽度
int qrCodeWidth = 80 * 2;
//二维码高度
int qrCodeHeight = 80 * 2;
FontCollection fonts = new FontCollection();
FontFamily numFamily = fonts.Install("fonts/Alibaba-PuHuiTi-Regular.ttf");
FontFamily textFamily = fonts.Install("fonts/SIMHEI.TTF");
// 绘制画布
using (Image<Rgba32> image = new Image<Rgba32>(canvasWidth, canvasHeight, Color.Transparent))
{
//绘制顶部图片
var topImage = Image.Load("images/top.png");
image.Mutate(t => t.DrawImage(topImage, new Point(0, 0), 1f));
//绘制卡券图片背景区域(绘制矩形,四点确定矩形)
image.Mutate(t => t.FillPolygon(CouponImgBgColor,
new Vector2(0, imageHeight),
new Vector2(canvasWidth, imageHeight),
new Vector2(canvasWidth, CouponImgBgHeight + imageHeight),
new Vector2(0, CouponImgBgHeight + imageHeight)));
//绘制商品图片
var couponRequest = (HttpWebRequest)WebRequest.Create(response.ImgHttpUrl);
HttpWebResponse couponResponse = (HttpWebResponse)couponRequest.GetResponse();
using (Stream responseStream = couponResponse.GetResponseStream())
{
var productImage = Image.Load(responseStream);
productImage.Mutate(t => t.Resize(CouponImgWidth, CouponImgHeight));
image.Mutate(t => t.DrawImage(productImage, new Point(CouponImgLeftPadding, CouponImgTopPadding), 1f));
//绘制圆角蒙版
var maskImage = Image.Load("images/mask.png");
maskImage.Mutate(t => t.Resize(CouponImgWidth, CouponImgHeight));
image.Mutate(t => t.DrawImage(maskImage, new Point(CouponImgLeftPadding, CouponImgTopPadding), 1f));
}
//绘制卡券内容背景区域(绘制矩形)
image.Mutate(t => t.FillPolygon(CouponContentBgColor,
new Vector2(0, imageHeight + CouponImgBgHeight),
new Vector2(canvasWidth, imageHeight + CouponImgBgHeight),
new Vector2(canvasWidth, imageHeight + CouponImgBgHeight + CouponContentBgHeight),
new Vector2(0, imageHeight + CouponImgBgHeight + CouponContentBgHeight)));
// 文字多行显示处理,最多支持两行
var productName = response.ProductName;
var offset = 0; // 如果超过一行,则文字下方所有内容偏移的高度
if (productName.Length > 18)
{
productName = productName.Insert(18, "\r\n");
offset += 24;
}
if (productName.Length > 38)
{
var length = productName.Length - 37;
productName = productName.Remove(37, length) + "...";
}
image.Mutate(t => t.DrawText(productName, new Font(textFamily, 16 * 2, FontStyle.Bold), Color.ParseHex("#333333"), new PointF(16 * 2, 242 * 2)));
image.Mutate(t => t.DrawText("¥", new Font(numFamily, 14 * 2, FontStyle.Bold), Color.ParseHex("#FF0100"), new PointF(16 * 2, 279 * 2 + offset)));
image.Mutate(t => t.DrawText(response.Amount.ToString(), new Font(numFamily, 24 * 2, FontStyle.Bold), Color.ParseHex("#FF0100"), new PointF(30 * 2, 270 * 2 + offset)));
// 金额长度过程,金额后面的内容偏移量
var amountOffset = response.Amount.ToString().Length * 28;
image.Mutate(t => t.DrawText("优惠券金额", new Font(textFamily, 14 * 2, FontStyle.Bold), Color.ParseHex("#FF0100"), new PointF(30 * 2 + amountOffset, 281 * 2 + offset)));
//绘制商品类型背景(绘制矩形)
image.Mutate(t => t.FillPolygon(Color.ParseHex("#FAEFED"),
new Vector2(496, 552 + offset),
new Vector2(496 + 126, 552 + offset),
new Vector2(496 + 126, 552 + 35 + offset),
new Vector2(496, 552 + 35 + offset)));
image.Mutate(t => t.DrawText("类型", new Font(textFamily, 11 * 2, FontStyle.Regular), Color.ParseHex("#FF0100"), new PointF(504 + 20, 558 + offset)));
//image.Mutate(t => t.DrawText("RMB" + response.ProductFaceValue, new Font(numFamily, 14, FontStyle.Regular), Color.ParseHex("#B0B1B3"), new PointF(160, 278)));
//image.Mutate(t => t.DrawLines(new Pen(Color.ParseHex("#B0B1B3"),1f), new PointF(155, 288), new PointF(212, 288)));
var dateText = $"{response.StartDate.Value.ToString("yyyy.MM.dd")}-{response.EndDate.Value.ToString("yyyy.MM.dd")}";
image.Mutate(t => t.DrawText($"有效期:", new Font(textFamily, 12 * 2, FontStyle.Regular), Color.ParseHex("#666666"), new PointF(16 * 2, 310 * 2 + 5 + offset)));
image.Mutate(t => t.DrawText(dateText, new Font(numFamily, 12* 2, FontStyle.Regular), Color.ParseHex("#666666"), new PointF(16 * 2 + 90, 310 * 2 + offset)));
//绘制分割线(绘制直线,两点确定直线)
image.Mutate(t => t.DrawLines(Pens.Dash(Color.ParseHex("#F3DEDE"), 1f), new PointF(15 * 2, 340 * 2 + offset), new PointF(311 * 2, 340 * 2 + offset)));
image.Mutate(t => t.DrawText("① 保存图片至相册", new Font(textFamily, 12 * 2, FontStyle.Regular), Color.ParseHex("#B0B1B3"), new PointF(32 * 2, 380 * 2 + offset)));
image.Mutate(t => t.DrawText("② 长按扫描二维码浏览商品", new Font(textFamily, 12 * 2, FontStyle.Regular), Color.ParseHex("#B0B1B3"), new PointF(32 * 2, 402 * 2 + offset)));
//绘制二维码,根据产品推广URL生成二维码
var bitmap = GetQRCode(response.PopularizeUrl, 2);
using (MemoryStream qrCodeStream = new MemoryStream())
{
bitmap.Save(qrCodeStream, System.Drawing.Imaging.ImageFormat.Jpeg);
byte[] data = new byte[qrCodeStream.Length];
qrCodeStream.Seek(0, SeekOrigin.Begin);
qrCodeStream.Read(data, 0, Convert.ToInt32(qrCodeStream.Length));
var qrCodeImage = Image.Load(data);
qrCodeImage.Mutate(t => t.Resize(qrCodeWidth, qrCodeHeight));
image.Mutate(t => t.DrawImage(qrCodeImage, new Point(215 * 2, 357 * 2 + offset), 1f));
}
//绘制底部图片
var bottomImage = Image.Load("images/bottom.png");
image.Mutate(t => t.DrawImage(bottomImage, new Point(0, canvasHeight - imageHeight), 1f));
// 图片转为文件流
using (var stream = new MemoryStream())
{
await image.SaveAsync(stream, new PngEncoder());
stream.Position = 0;
return stream;
}
}
return null;
}
/// <summary>
/// 获取二维码图片
/// </summary>
/// <param name="url">存储内容</param>
/// <param name="pixel">像素大小</param>
/// <returns></returns>
public System.Drawing.Bitmap GetQRCode(string url, int pixel)
{
QRCodeGenerator generator = new QRCodeGenerator();
QRCodeData codeData = generator.CreateQrCode(url, QRCodeGenerator.ECCLevel.Q);
QRCoder.QRCode qrcode = new QRCoder.QRCode(codeData);
System.Drawing.Bitmap qrImage = qrcode.GetGraphic(pixel);
return qrImage;
}
效果图
注:图中二维码仅供参考
总结
- 后端生成图片海报,可能存在性能因素,而且绘制不方便调试,建议前端生成海报
- 二维码生成官方文档,生成中间带logo的二维码,使用方法
var bitmap = qrCode.GetGraphic(pixel, Color.Black, Color.White,(Bitmap)Image.FromFile(logoPath), 15, 8);