當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

ImageSharp一个专注于NetCore平台图像处理的开源项目

發(fā)布時間：2023/12/4 编程问答 32 豆豆

生活随笔收集整理的這篇文章主要介紹了 ImageSharp一个专注于NetCore平台图像处理的开源项目小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

今天大家分享的是一個專注于NetCore平臺圖像處理的開源項目，老實說為這篇文章取名字想了5分鐘，可能是詞窮亦或是想更好的表達出這款開源項目的作用；這個項目在圖像處理方面有很多功能，如：縮放，裁剪，繪畫，組合圖片等；今天主要講的是用她怎么來繪圖和生成驗證碼的實際例子。

號外：近來淘寶服裝小店進了批新貨，有需要購衣的朋友可以來看看，地址在文章最下方。

簡單介紹ImageSharp
試試畫兩條線（實線和虛線）
生成個縮略圖
在圖片上畫字
制作一個驗證碼圖片
結合RazorPage模板，展示驗證碼圖片

簡單介紹ImageSharp

ImageSharp是對NetCore平臺擴展的一個圖像處理方案，在寫下本文為止它最新的nuget下載量為4,034次，作者團隊最近一個月剛更新的包；沒錯這里說最新是因為她前身和之前的版本都很受歡迎下載量也超高；她的git項目地址：https://github.com/SixLabors/ImageSharp。如果您的項目和我一樣是2.0版本（2.0以前的略過），那么直接可以通過vs的nuget控制臺下載對應的包，注意繪圖的話需要分別下載如下兩個包：

?Install-Package SixLabors.ImageSharp -Version?1.0.0-beta0001?

?Install-Package SixLabors.ImageSharp.Drawing -Version?1.0.0-beta0001?

ImageSharp用法有朋友之前寫過，不過都主要針對于之前的版本，本章主要用到的都是最新的，有部分寫法可能不相同。

試試畫兩條線（實線和虛線）

這里將用她來畫兩條直線并保存成圖片，主要起到一個介紹作用，先來看實線如下代碼：

?總要步驟我都備注上文字了，這里主要通過兩點一線來繪制圖形，Vector2對象值得注意就是C#二維坐標(x,y)對象，其實除了Vector2還有Vector3(三維坐標)等，這對于做u3d的朋友來說不會陌生，老實說這個也是我在接觸u3d時候才知道有這個類的。下面來看效果圖：

由兩個兩點一線構造的一個角，下面來看下虛線繪制：

//虛線using (Image<Rgba32> image = new Image<Rgba32>(500, 500)) //畫布大小 ? ? ? ? ? ?{image.Mutate(x => x.BackgroundColor(Rgba32.WhiteSmoke). ? //畫布背景 ? ? ? ? ? ? ? ? ? ? ? ? ? ?DrawLines(Pens.Dash(Rgba32.HotPink, 5), //字體大小new SixLabors.Primitives.PointF[]{ ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?new Vector2(10, 10), ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?new Vector2(200, 150), ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?new Vector2(50, 300)} //兩點一線坐標 ? ? ? ? ? ? ? ? ? ? ? ?));image.Save($"{path}/2.png"); //保存}

步驟都差不多，只是調用了DrawLines的擴展方法而已，其他線條例子就不多說了各位自行實驗。

生成個縮略圖和在圖片上畫字

對于圖片類型的網(wǎng)站來說縮略圖是常見的，這里用ImageSharp生成縮略圖很簡單，本實例用8.png做樣本來生成縮略圖8-1.png，直接看例子如下是netstandard 1.3+的例子：

//縮略圖using (Image<Rgba32> image = Image.Load($"{path}/8.png")){image.Mutate(x => x.Resize(image.Width / 2, image.Height / 2));image.Save($"{path}/8-1.png");}

為了更好的對比縮略圖和原圖的區(qū)別這里對接拿兩圖的屬性做對比如：

能很好的看出縮略圖文件大小和像素都減半了，實際縮略的時候不一定減半，這全由參數(shù)控制Resize(width,height)；

畫字：在圖片上畫我們想要的字，其實類似于水印的一種需求，下面是在圖片上畫字的代碼：

//畫字 var install_Family = new FontCollection().Install(System.IO.Path.Combine(Directory.GetCurrentDirectory(), "wwwroot/bak", "STKAITI.TTF") ? ? ? ? ? ? ? ?//@"C:\Windows\Fonts\STKAITI.TTF" ? //字體文件 ? ? ? ? ? ? ? ?); ? ? ? ? ? ?var font = new Font(install_Family, 50); //字體using (Image<Rgba32> image = Image.Load($"{path}/8.png")){image.Mutate(x => x.DrawText( ? ? ? ? ? ? ? ? ? ? ? ?"你們好，我是神牛", //文字內(nèi)容 ? ? ? ? ? ? ? ? ? ? ? ? font,Rgba32.HotPink, ? ? ? ? ? ? ? ? ? ? ? ? new Vector2(50, 150),TextGraphicsOptions.Default));image.Save($"{path}/8-2.png");}

這里用ImageSharp在圖片上畫字的時候需要注意：字體，因為windows系統(tǒng)自帶了字體問題這里以STKAITI.TTF字體文件為例，它存儲于?C:\Windows\Fonts\STKAITI.TTF?目錄，當然您可以直接把它拷貝到我們項目中如下我這里的例子一樣做法（這里只測試了windows下可用，尚未測試linux下直接使用該字體文件是否可行）；

制作一個驗證碼圖片

下面我們將用她來畫一個驗證碼類型的圖片，通常驗證碼都有一些點和線來干擾，上面已經(jīng)有畫線例子了，這里展示怎么畫點：

//畫點（規(guī)則的點，其他的各位自行寫算法） var dianWith = 1; //點寬度var xx = 300; //圖片寬度var yy = 200; //圖片高度var xx_space = 10; //點與點之間x坐標間隔var yy_space = 5; //y坐標間隔var listPath = new List<IPath>(); ? ? ? ? ? ?for (int i = 0; i < xx / xx_space; i++){ ? ? ? ? ? ? ? ?for (int j = 0; j < yy / yy_space; j++){ ? ? ? ? ? ? ? ? ? ?var position = new Vector2(i * xx_space, j * yy_space); ? ? ? ? ? ? ? ? ? ?var linerLine = new LinearLineSegment(position, position); ? ? ? ? ? ? ? ? ? ?var shapesPath = new SixLabors.Shapes.Path(linerLine);listPath.Add(shapesPath);}} ? ? ? ? ? ?using (Image<Rgba32> image = new Image<Rgba32>(xx, yy)) //畫布大小 ? ? ? ? ? ?{image.Mutate(x => x.BackgroundColor(Rgba32.WhiteSmoke). ? //畫布背景 ? ? ? ? ? ? ? ? ? ? ? ? ? ?Draw(Pens.Dot(Rgba32.HotPink, dianWith), ? //大小new SixLabors.Shapes.PathCollection(listPath) //坐標集合 ? ? ? ? ? ? ? ? ? ? ? ?));image.Save($"{path}/9.png"); //保存}

這里直接利用IImageProcessingContext<TPixel>擴展方法Draw來繪制有規(guī)則的點，如圖所示：

比較單調，或許您們能做的更好看些；下面來做驗證碼圖片，主要由：畫點+畫字=驗證碼圖片，這里我封裝了一個方法直接生成驗證碼圖片：

/// <summary>/// 畫點+畫字=驗證碼圖片 ?/// </summary>/// <param name="content">驗證碼</param>/// <param name="outImgPath">輸出圖片路徑</param>/// <param name="fontFilePath">字體文件</param>/// <param name="x">圖片寬度</param>/// <param name="y">圖片高度</param>public void GetValidCode( ? ? ? ? ? ? ? ? ? ?string content = "我是神牛", ? ? ? ? ? ? ? ? ? ?string outImgPath = "D:/F/學習/vs2017/netcore/Study.AspNetCore/WebApp02-1/wwwroot/images/10.png", ? ? ? ? ? ? ? ? ? ?string fontFilePath = @"D:\F\學習\vs2017\netcore\Study.AspNetCore\WebApp02-1\wwwroot\bak\STKAITI.TTF", ? ? ? ? ? ? ? ? ? ?int xx = 150, int yy = 25){ ? ? ? ? ? ?var dianWith = 1; //點寬度var xx_space = 10; //點與點之間x坐標間隔var yy_space = 5; //y坐標間隔var wenZiLen = content.Length; //文字長度var maxX = xx / wenZiLen; //每個文字最大x寬度var prevWenZiX = 0; //前面一個文字的x坐標var size = 16;//字體大小 ? ? ? ? ? ?//字體var install_Family = new FontCollection().Install(fontFilePath ? ? ? ? ? ? ?//@"C:\Windows\Fonts\STKAITI.TTF" ? //windows系統(tǒng)下字體文件 ? ? ? ? ? ? ?); ? ? ? ? ? ?var font = new Font(install_Family, size); //字體 ? ? ? ? ? ?//點坐標var listPath = new List<IPath>(); ? ? ? ? ? ?for (int i = 0; i < xx / xx_space; i++){ ? ? ? ? ? ? ? ?for (int j = 0; j < yy / yy_space; j++){ ? ? ? ? ? ? ? ? ? ?var position = new Vector2(i * xx_space, j * yy_space); ? ? ? ? ? ? ? ? ? ?var linerLine = new LinearLineSegment(position, position); ? ? ? ? ? ? ? ? ? ?var shapesPath = new SixLabors.Shapes.Path(linerLine);listPath.Add(shapesPath);}} ? ? ? ? ? ?//畫圖using (Image<Rgba32> image = new Image<Rgba32>(xx, yy)) //畫布大小 ? ? ? ? ? ?{image.Mutate(x =>{ ? ? ? ? ? ? ? ? ? ?//畫點var imgProc = x.BackgroundColor(Rgba32.WhiteSmoke). //畫布背景 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ?Draw(Pens.Dot(Rgba32.HotPink, dianWith), ? //大小new SixLabors.Shapes.PathCollection(listPath) //坐標集合 ? ? ? ? ? ? ? ? ? ? ? ? ?); ? ? ? ? ? ? ? ? ? ?//逐個畫字for (int i = 0; i < wenZiLen; i++){ ? ? ? ? ? ? ? ? ? ? ? ?//當前的要輸出的字var nowWenZi = content.Substring(i, 1); ? ? ? ? ? ? ? ? ? ? ? ?//文字坐標var wenXY = new Vector2(); ? ? ? ? ? ? ? ? ? ? ? ?var maxXX = prevWenZiX + (maxX - size);wenXY.X = new Random().Next(prevWenZiX, maxXX);wenXY.Y = new Random().Next(0, yy - size);prevWenZiX = Convert.ToInt32(Math.Floor(wenXY.X)) + size; ? ? ? ? ? ? ? ? ? ? ? ?//畫字 ? ? ? ? ? ? ? ? ? ? ? ?imgProc.DrawText(nowWenZi, ? //文字內(nèi)容 ? ? ? ? ? ? ? ? ? ? ? ? ? font,i % 2 > 0 ? Rgba32.HotPink : Rgba32.Red,wenXY,TextGraphicsOptions.Default);}}); ? ? ? ? ? ? ? ?//保存到圖片 ? ? ? ? ? ? ? ?image.Save(outImgPath);}}

通過簡單的調用?GetValidCode("我是神牛");return?Page();?能得到如圖驗證碼圖片的效果：

文字看起來好像在點的前面，不過沒關系只需要把畫點和畫字的先后順序修改下就行了，這里不貼圖了；

結合RazorPage模板，展示驗證碼圖片

上面一節(jié)是生成了驗證碼圖片，當然實際場景中我們是不需要生成驗證碼物理圖片的，只需要返回一個流或base64等方式輸出到web界面上就行了，我們可以來看看?Image<TPixel>?保存時候的擴展方法：

好吧有點多，我們只需要明白她能轉base64，stream，保存為圖片等就行了；這里我們將用到?SaveAsPng(Stream)?方法，然后獲取他的byte[]，如下代碼：

/// <summary>/// 畫點+畫字=驗證碼byte[] ? ? ?
? ?/// </summary>/// <param name="content">驗證碼</param>/// <param name="outImgPath">輸出圖片路徑</param>/// <param name="fontFilePath">字體文件</param>/// <param name="x">圖片寬度</param>/// <param name="y">圖片高度</param>public byte[] GetValidCodeByte( ? ? ? ? ? ? ? ? ? ?string content = "我是神牛", ? ? ? ? ? ? ? ?
? ?string fontFilePath = @"D:\F\學習\vs2017\netcore\Study.AspNetCore\WebApp02-1\wwwroot\bak\STKAITI.TTF", ? ? ? ? ? ? ? ? ?
?int xx = 150, int yy = 25){ ? ? ? ? ? ?

var bb = default(byte[]); ? ? ? ?
? ?try{ ? ? ? ? ?
var dianWith = 1; //點寬度var xx_space = 10; //點與點之間x坐標間隔var yy_space = 5; //y坐標間隔var wenZiLen = content.Length; //文字長度var maxX = xx / wenZiLen; //每個文字最大x寬度var prevWenZiX = 0; //前面一個文字的x坐標var size = 16;//字體大小 ? ? ? ? ? ? ? ?//字體var install_Family = new FontCollection().Install(fontFilePath ? ? ? ? ? ? ? ? ?//@"C:\Windows\Fonts\STKAITI.TTF" ? //windows系統(tǒng)下字體文件 ? ? ? ? ? ? ? ? ?); ? ? ? ? ? ? ?
? ? ? ? ? ? ??var font = new Font(install_Family, size); //字體 ? ? ? ? ? ? ? ?//點坐標var listPath = new List<IPath>(); ? ? ? ? ? ? ? ?for (int i = 0; i < xx / xx_space; i++){ ? ? ? ? ? ? ? ?
? ?for (int j = 0; j < yy / yy_space; j++){ ? ? ? ? ? ? ? ? ? ? ? ?

var position = new Vector2(i * xx_space, j * yy_space); ? ? ? ? ? ? ? ? ? ? ? ?var linerLine = new LinearLineSegment(position, position); ? ? ? ? ? ? ? ? ? ? ? ?var shapesPath = new SixLabors.Shapes.Path(linerLine);listPath.Add(shapesPath);}} ? ? ? ? ? ? ?
??//畫圖using (Image<Rgba32> image = new Image<Rgba32>(xx, yy)) //畫布大小 ? ? ? ? ? ? ? ?{image.Mutate(x =>{ ? ? ? ? ? ? ? ? ? ?
var imgProc = x; ? ? ? ? ? ? ? ? ? ? ? ?//逐個畫字for (int i = 0; i < wenZiLen; i++){ ? ? ? ? ? ? ? ? ? ?
? ? ? ?//當前的要輸出的字var nowWenZi = content.Substring(i, 1); ? ? ? ? ? ? ? ? ? ? ? ?
? ?//文字坐標var wenXY = new Vector2(); ? ? ? ? ? ? ? ? ? ? ? ? ? ?var maxXX = prevWenZiX + (maxX - size);wenXY.X = new Random().Next(prevWenZiX, maxXX);wenXY.Y = new Random().Next(0, yy - size);prevWenZiX = Convert.ToInt32(Math.Floor(wenXY.X)) + size; ? ? ? ? ? ? ? ? ? ? ? ? ? ?//畫字 ? ? ? ? ? ? ? ? ? ? ? ? ? ?imgProc.DrawText(nowWenZi, ? //文字內(nèi)容 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? font,i % 2 > 0 ? Rgba32.HotPink : Rgba32.Red,wenXY,TextGraphicsOptions.Default);} ? ? ? ? ? ? ? ?
? ? ? ?//畫點 imgProc.BackgroundColor(Rgba32.WhiteSmoke). //畫布背景 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? Draw(Pens.Dot(Rgba32.HotPink, dianWith), ? //大小new SixLabors.Shapes.PathCollection(listPath) //坐標集合 ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? );}); ? ? ? ? ? ? ? ? ? ?using (MemoryStream stream = new MemoryStream()){image.SaveAsPng(stream);bb = stream.GetBuffer();}}} ? ? ? ?
? ? ? ? ? ?catch (Exception ex){} ? ? ?
? ? ?return bb;}

該方法返回了一個byte[]數(shù)組，然后通過HttpGet方式請求Razor接口，前端就能夠獲取到這個驗證碼圖片byte[]了；

/// <summary>/// Get獲取驗證碼圖片byte[] ?
? ?? ?/// </summary>/// <returns></returns>public FileResult OnGetValidCode(){ ? ? ? ? ? ?var codebb = GetValidCodeByte(DateTime.Now.ToString("mmssfff")); ? ? ? ? ? ?return File(codebb, "image/png");}

我們通過get請求獲取驗證碼：?http://localhost:1120/login?handler=ValidCode?，然后得到如圖效果：

本篇內(nèi)容到此就結束了，如果對您有好的幫助，不妨點個“贊”；一起努力推動NetCore發(fā)展吧，謝謝。

原文地址：?http://www.cnblogs.com/wangrudong003/p/7656842.html

.NET社區(qū)新聞，深度好文，微信中搜索dotNET跨平臺或掃描二維碼關注

總結

以上是生活随笔為你收集整理的ImageSharp一个专注于NetCore平台图像处理的开源项目的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。

上一篇：最新的.NET Framework聚焦于
下一篇： RedHat宣布支持Azure、.Net