先展示下效果图
读完本文您将了解到C#后端如何生成画报,废话不多说,代码如下
编程工具:VisualStudio2017
目录
- 前端代码
- 后端-生成画报
- 后端-下载图片
- 项目运行效果图
一. 前端代码
asp:Button ID=“Button2”:生成海报按钮
asp:Button ID=“Button3”:下载图片按钮
asp:Image:展示二维码图片
<body>
<form id="form1" runat="server">
<div>
<asp:Button ID="Button2" runat="server" Text="生成海报" OnClick="ButtonPosters_Click" />
<asp:Button ID="Button3" runat="server" Text="下载图片" OnClick="ButtonPicDownload_Click" />
<br/>
<%--展示海报图片--%>
<asp:Image ImageUrl="imageurl" runat="server" ID="imageUrl" />
</div>
</form>
</body>
二. 后端-生成画报
生成画报的流程:
a. 新建一个 宽度*高度 的Bitmap 位图
b. 在位图上创建画布
c. 在画布上填充颜色,图片,文字等信息
d. 将Bitmap 位图存到内存流中
e. 将内存流转成base64格式,显示在页面中
后端使用到的一些方法说明:
- System.AppDomain.CurrentDomain.BaseDirectory:获取项目的根目录
- DrawImage(Image, 画图位置x, 画图位置y, 图片宽, 图片高) :添加文字方法,在指定位置并且按照指定大小绘制指定的image
- DrawString(文字, 字体, 画笔, 位置):在图片上添加文字
- clear(颜色):重置画布的颜色
- Image.FromFile(链接):从指定的文件创建System.Drawimg.Image
- FillRectangle(“颜色”,画图位置x, 画图位置y, 图片宽, 图片高):矩形填充 ,填充由一对坐标,一个宽度和一个高度指定的矩形内填充颜色
- SolidBrush(“颜色”):定义单色画笔,设置默认画笔颜色
- Font(“黑体”, 16, FontStyle.Bold):设置默认字体格式
protected void Page_Load(object sender, EventArgs e)
{
makePic();//初始化生成海报二维码
}
protected void ButtonPosters_Click(object sender, EventArgs e)
{
makePic();//生成海报
}
/// <summary>
/// 生成海报
/// </summary>
public void makePic()
{
String imgHeadPath = System.AppDomain.CurrentDomain.BaseDirectory + @"Image/head.jpg";//要插入的抬头图片路径 可以从数据库取
string imgPath = System.AppDomain.CurrentDomain.BaseDirectory + @"Image/gzh.jpg"; //要插入的二维码图片路径 绝对路径
Bitmap bitmapPic = new Bitmap(400, 600);// 新建一个 400*600的Bitmap 位图
Graphics g = Graphics.FromImage(bitmapPic);// 根据新建的 Bitmap 位图,创建画布
g.Clear(Color.White);// 使用白色重置画布
Image headPic = Image.FromFile(imgHeadPath);//抬头
Image ewmPic = Image.FromFile(imgPath);//二维码
//在背景图片上绘制指定的二维码图片 和抬头图片
g.DrawImage(headPic, 0, 0, 400, 200);
g.DrawImage(ewmPic, 260, 210, 130, 130);
//在背景照片上添加文字
PointF drawPoint = new PointF(20F, 210.0F);
AddFont(g, drawPoint, "快速建立聊天室");
drawPoint = new PointF(20F, 250.0F);
AddFont(g, drawPoint, "vue展示记录");
drawPoint = new PointF(20F, 290.0F);
AddFont(g, drawPoint, "手风琴的使用");
drawPoint = new PointF(20F, 330.0F);
AddFont(g, drawPoint, "VS2017项目发布");
drawPoint = new PointF(20F, 370.0F);
AddFont(g, drawPoint, "IIS网站部署");
drawPoint = new PointF(20F, 410.0F);
AddFont(g, drawPoint, "natapp开启网络穿透之旅");
drawPoint = new PointF(20F, 450.0F);
AddFont(g, drawPoint, "VS运行时报错大礼包");
drawPoint = new PointF(20F, 490.0F);
AddFont(g, drawPoint, "JS控制layui页面元素不可选中");
drawPoint = new PointF(20F, 530.0F);
AddFont(g, drawPoint, "....................");
g.FillRectangle(Brushes.Pink, 0, 570, 400, 30);//底部的矩形填充 填充由一对坐标,一个宽度和一个高度指定的矩形的内部
drawPoint = new PointF(0F, 570F);
AddFont(g, drawPoint, "识别二维码查看更多优质文章^_^");
using (MemoryStream ms = new MemoryStream())
{
//将背景图存到内存流(ms) 参数2;文件格式
bitmapPic.Save(ms, System.Drawing.Imaging.ImageFormat.Png);//将此图像以指定的格式保存到指定的流中
//在本页面显示图片
imageUrl.ImageUrl = "data:image/png;base64," + Convert.ToBase64String(ms.ToArray());
}
}
/// <summary>
/// 在图片上添加文字
/// </summary>
/// <param name="g"><目标Graphics对象/param>
/// <param name="drawPoint"></param>
/// <param name="data">准备添加的字符串</param>
private void AddFont(Graphics grap, PointF drawPoint, string data)
{
SolidBrush mybrush = new SolidBrush(Color.Blue); //设置默认画笔颜色
Font myfont = new Font("黑体", 16, FontStyle.Bold); //设置默认字体格式
grap.DrawString(data, myfont, mybrush, drawPoint); //图片上添加文字;
}
三. 后端-下载图片
注意:
- 需要先把获取到的base64格式的图片处理下,将一开始的data:image/png;base64,数据截取处理掉
- 创建一个下载路径
- 下载图片到本地
/// <summary>
/// 下载图片
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param>
protected void ButtonPicDownload_Click(object sender, EventArgs e)
{
MemoryStream ms = new MemoryStream();
byte[] base64ImageStr = Convert.FromBase64String(imageUrl.ImageUrl.Split(',')[1]);//获取base64格式的图片,将data:image/png;base64,截取掉
//下载图片
FileStream fs = new FileStream("d:\\test.png", FileMode.CreateNew, FileAccess.ReadWrite);
fs.Write(base64ImageStr, 0, base64ImageStr.Length);
fs.Close();
Response.Write("<script>alert('下载成功')</script>");
}