您现在的位置是:首页 >技术杂谈 >C# net6使用ImageSharp绘图并展示网站首页技术杂谈

C# net6使用ImageSharp绘图并展示

mingjing941018 2024-06-18 18:01:02
简介C# net6使用ImageSharp绘图并展示


研究这个的最初目的是,使用net 6做blazor网站,希望在登录界面实现验证码生成功能,因一直找不到字体文件,所以切换项目实验一下。

winform实现

1.新建窗体程序,使用net 6框架

2.使用Nuget安装相关程序包,SixLabors.ImageSharp和SixLabors.ImageSharp.Drawing(这个使用的是预发行版)

3.在项目根目录中放置字体文件(*.ttf,设置文件属性—复制到输出目录—始终复制)

4.在项目根目录中新建文件保存路径

5.主要生成代码

private void button1_Click(object sender, EventArgs e)
		{
			pictureBox1.Image = null;
			int codeW = 100;
			int codeH = 36;
			int fontSize = 32;
			string chkCode = string.Empty;
			SixLabors.ImageSharp.Color[] color = { SixLabors.ImageSharp.Color.Black, SixLabors.ImageSharp.Color.Red, SixLabors.ImageSharp.Color.Blue, SixLabors.ImageSharp.Color.Green, SixLabors.ImageSharp.Color.Orange, SixLabors.ImageSharp.Color.Brown, SixLabors.ImageSharp.Color.DarkBlue };
			//string[] font = { "Times New Roman" };
			//需要将字体放到项目中
			string[] fonts = { "Arial.ttf" };
			char[] character = { '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'd', 'e', 'f', 'h', 'k', 'm', 'n', 'r', 'x', 'y', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'N', 'P', 'R', 'S', 'T', 'W', 'X', 'Y' };
			//生成验证码字符串
			Random rnd = new Random();
			for (int i = 0; i < 4; i++)
			{
				chkCode += character[rnd.Next(character.Length)];
			}
			//写入Session用于验证码校验,可以对校验码进行加密,提高安全性
			//System.Web.HttpContext.Current.Session["verifyCode"] = chkCode;
			try
			{
				//创建画布
				var image = new Image<Rgba32>(codeW, codeH);
				image.Mutate(x => x.BackgroundColor(SixLabors.ImageSharp.Color.White));
				//Bitmap bmp = new Bitmap(codeW, codeH - 3);

				//Graphics g = Graphics.FromImage(bmp);
				//填充背景颜色为白色
				//g.Clear(Color.White);

				//画噪线
				for (int i = 0; i < 3; i++)
				{
					int x1 = rnd.Next(codeW);
					int y1 = rnd.Next(codeH);
					int x2 = rnd.Next(codeW);
					int y2 = rnd.Next(codeH);

					image.Mutate(x => x
			//画实线
			.DrawLines(
									color[rnd.Next(color.Length)], //字体颜色
									1,   //字体大小
									new SixLabors.ImageSharp.PointF[]{
										new Vector2(x1, y1),
										new Vector2(x2, y2)
									} //两点一线坐标
							));

					//Color clr = color[rnd.Next(color.Length)];
					//g.DrawLine(new Pen(clr), x1, y1, x2, y2);
				}
				//画验证码
				//string bPath = $"{Directory.GetCurrentDirectory()}font/";
				//string bPath = "C:\Windows\Fonts";
				for (int i = 0; i < chkCode.Length; i++)
				{
					string fnt = fonts[rnd.Next(fonts.Length)];

					//var install_Family = new FontCollection().Add(System.IO.Path.Combine(bPath, fnt));
					var fontTmp = new FontCollection();

					//var bPath = Environment.CurrentDirectory;
					//var install_Family = fontTmp.Add($"font/ARIAL.TTF");
					//var install_Family = fontTmp.Add($"ARIAL.TTF");
					var install_Family = fontTmp.Add($"./font/Arial.ttf");
					//var install_Family = fontTmp.Add($"C:/Windows/Fonts/ARIAL.TTF");
					//var install_Family = fontTmp.Add($"C:/Windows/Fonts/Arial/ARIAL.TTF");
					var font = new SixLabors.Fonts.Font(install_Family, fontSize);
					image.Mutate(x => x
						.DrawText(
							chkCode[i].ToString(),   //文字内容
								font,
								color[rnd.Next(color.Length)],
								new Vector2((float)i * 20, (float)0))
						);

					//将文字写到画布上
					//Font ft = new Font(fnt, fontSize);
					//   Color clr = color[rnd.Next(color.Length)];
					//   g.DrawString(chkCode[i].ToString(), ft, new SolidBrush(clr), (float)i * 18, (float)0);
				}

				//画图片的前景噪音点
				for (int i = 0; i < 15; i++)
				{
					int x1 = rnd.Next(codeW);
					int y1 = rnd.Next(codeH);
					int x2 = x1 + 2;
					int y2 = y1 + 2;

					image.Mutate(x => x
			//画实线
			.DrawLines(
									color[rnd.Next(color.Length)], //字体颜色
									2,   //字体大小
									new SixLabors.ImageSharp.PointF[]{
										new Vector2(x1, y1),
										new Vector2(x2, y2)
									} //两点一线坐标
							));
				}

				//SixLabors.ImageSharp.Formats.Png.PngTextData
				//IImageFormat bFormat = new Formats;
				//ImgStr = image.ToBase64String(SixLabors.ImageSharp.Formats.Png.PngFormat.Instance);

				image.SaveAsJpeg($"./img/test.jpg");

				System.Drawing.Image bImg = System.Drawing.Image.FromFile($"./img/test.jpg");

				pictureBox1.Image = bImg;
			}
			catch (Exception ex)
			{
				string aMsg = ex.Message;
			}
		}

blazor server实现

1.新建Blazor Server项目

2.使用Nuget安装相关程序包,SixLabors.ImageSharp和SixLabors.ImageSharp.Drawing(这个使用的是预发行版)

3.在wwwroot中放置字体文件

4.修改Index.razor文件,准备实现生成图片,字体按照相对路径可以进行寻找

@page "/"
@using SixLabors.Fonts;
@using SixLabors.ImageSharp.Drawing.Processing;
@using System.Numerics;

<PageTitle>ImageSharp生成图片</PageTitle>

<button @onclick=CreateImg>生成图片</button>
<img src="@ImgStr"/>
<div>@Yzm</div>
@code{
  public string ImgStr;
  public string Yzm;

  public void CreateImg()
  {

    int codeW = 100;
    int codeH = 36;
    int fontSize = 32;
    string chkCode = string.Empty;
    SixLabors.ImageSharp.Color[] color = { SixLabors.ImageSharp.Color.Black, SixLabors.ImageSharp.Color.Red, SixLabors.ImageSharp.Color.Blue, SixLabors.ImageSharp.Color.Green, SixLabors.ImageSharp.Color.Orange, SixLabors.ImageSharp.Color.Brown, SixLabors.ImageSharp.Color.DarkBlue };
    //string[] font = { "Times New Roman" };
    //需要将字体放到项目中
    string[] fonts = { "Arial.ttf" };
    char[] character = { '1', '2', '3', '4', '5', '6', '7', '8', '9', 'a', 'b', 'd', 'e', 'f', 'h', 'k', 'm', 'n', 'r', 'x', 'y', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'J', 'K', 'L', 'M', 'N', 'P', 'R', 'S', 'T', 'W', 'X', 'Y' };
    //生成验证码字符串
    Random rnd = new Random();
    for (int i = 0; i < 4; i++)
    {
      chkCode += character[rnd.Next(character.Length)];
    }
    //写入Session用于验证码校验,可以对校验码进行加密,提高安全性
    //System.Web.HttpContext.Current.Session["verifyCode"] = chkCode;
    try
    {
      //创建画布
      var image = new Image<Rgba32>(codeW, codeH);
      image.Mutate(x => x.BackgroundColor(SixLabors.ImageSharp.Color.White));
      //Bitmap bmp = new Bitmap(codeW, codeH - 3);

      //Graphics g = Graphics.FromImage(bmp);
      //填充背景颜色为白色
      //g.Clear(Color.White);

      //画噪线
      for (int i = 0; i < 3; i++)
      {
        int x1 = rnd.Next(codeW);
        int y1 = rnd.Next(codeH);
        int x2 = rnd.Next(codeW);
        int y2 = rnd.Next(codeH);

        image.Mutate(x => x
    //画实线
    .DrawLines(
                color[rnd.Next(color.Length)], //字体颜色
                1,   //字体大小
                new SixLabors.ImageSharp.PointF[]{
                    new Vector2(x1, y1),
                    new Vector2(x2, y2)
                } //两点一线坐标
            ));

        //Color clr = color[rnd.Next(color.Length)];
        //g.DrawLine(new Pen(clr), x1, y1, x2, y2);
      }
      //画验证码
      //string bPath = $"{Directory.GetCurrentDirectory()}font/";
      //string bPath = "C:\Windows\Fonts";
      for (int i = 0; i < chkCode.Length; i++)
      {
        string fnt = fonts[rnd.Next(fonts.Length)];

        //var install_Family = new FontCollection().Add(System.IO.Path.Combine(bPath, fnt));
        var fontTmp = new FontCollection();

        //var bPath = Environment.CurrentDirectory;
        //var install_Family = fontTmp.Add($"font/ARIAL.TTF");
        //var install_Family = fontTmp.Add($"ARIAL.TTF");
        var install_Family = fontTmp.Add($"./wwwroot/font/Arial.ttf");
        //var install_Family = fontTmp.Add($"C:/Windows/Fonts/ARIAL.TTF");
        //var install_Family = fontTmp.Add($"C:/Windows/Fonts/Arial/ARIAL.TTF");
        var font = new SixLabors.Fonts.Font(install_Family, fontSize);
        image.Mutate(x => x
          .DrawText(
            chkCode[i].ToString(),   //文字内容
              font,
              color[rnd.Next(color.Length)],
              new Vector2((float)i * 20, (float)0))
          );

        //将文字写到画布上
        //Font ft = new Font(fnt, fontSize);
        //   Color clr = color[rnd.Next(color.Length)];
        //   g.DrawString(chkCode[i].ToString(), ft, new SolidBrush(clr), (float)i * 18, (float)0);
      }

      //画图片的前景噪音点
      for (int i = 0; i < 15; i++)
      {
        int x1 = rnd.Next(codeW);
        int y1 = rnd.Next(codeH);
        int x2 = x1 + 2;
        int y2 = y1 + 2;

        image.Mutate(x => x
    //画实线
    .DrawLines(
                color[rnd.Next(color.Length)], //字体颜色
                2,   //字体大小
                new SixLabors.ImageSharp.PointF[]{
                    new Vector2(x1, y1),
                    new Vector2(x2, y2)
                } //两点一线坐标
            ));
      }

      //SixLabors.ImageSharp.Formats.Png.PngTextData
      //IImageFormat bFormat = new Formats;
      //ImgStr = image.ToBase64String(SixLabors.ImageSharp.Formats.Png.PngFormat.Instance);

      //保存成文件
      //image.SaveAsJpeg($"./wwwroot/img/test.jpg");

      //保存成base64字符串
      using var memoryStream = new MemoryStream();
      image.Save(memoryStream, SixLabors.ImageSharp.Formats.Png.PngFormat.Instance);
      var base64String = Convert.ToBase64String(memoryStream.ToArray());
      ImgStr = $"data:image/jpeg;base64,{base64String}";
      Yzm = chkCode;

    }
    catch (Exception ex)
    {
      string aMsg = ex.Message;
    }
	}

}


5.可以正常保存,生成相关图片

blazor webAssembly 实现

1.新建项目

2.使用Nuget安装相关程序包,SixLabors.ImageSharp和SixLabors.ImageSharp.Drawing(这个使用的是预发行版)

3.在wwwroot中放置字体文件

4.修改Index.razor文件,准备实现生成图片,同样的代码,使用上面的那种方式,总是找不到路径,不太理解其运行机制。

风语者!平时喜欢研究各种技术,目前在从事后端开发工作,热爱生活、热爱工作。