.NetCore如何使用ImageSharp进行图片的生成

    ImageSharp是对NetCore平台扩展的一个图像处理方案,以往网上的案例多以生成文字及画出简单图形、验证码等方式进行探讨和实践。

    今天我分享一下所在公司项目的实际应用案例,导出微信二维码图片,圆形头像等等。

一、源码获取

    Git项目地址:https://github.com/SixLabors/ImageSharp

    安装这两个包即可:

    Install-Package SixLabors.ImageSharp -Version 1.0.0-beta0001 

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

二、应用

    1.在图片中画出文字

     首先要注意字体问题,Windows自带的字体一般存储于 C:\Windows\Fonts 文件夹内,如果是部署在Linux系统的应用程序,则存储于 usr/share/fonts 文件夹内。以黑体为例,我们找到对应的字体文件 SIMHEI.TTF ,将其放入项目的根目录内方便调用。

 

 1   var path = "Image/Mud.png"                                  //图片路径
 2   FontCollection fonts = new FontCollection();
 3   FontFamily fontfamily = fonts.Install("Source/SIMHEI.TTF"); //字体的路径
var font = new Font(fontfamily,50); 4 using (Image<Rgba32> image = Image.Load(path)) 5 { 6 image.Mutate(x => x.
DrawText (
8 "陆家嘴旗舰店", //文字内容 9 font, 10 Rgba32.Black, //文字颜色 11 new PointF(100,100)) //坐标位置(浮点) 12 ); 13 image.Save(path); 14 }

 

       关于Image.Load()获取图片方法的使用,可以直接读取Stream类型的流,也可以根据图片的本地路径获取。

//线上地址的图片,通过获取流的方式读取   
WebRequest imgRequest = WebRequest.Create(url);
var res = (HttpWebResponse)imgRequest.GetResponse();
var image  = Image.Load(res.GetResponseStream());

      获取文字的像素宽度,可以使用:

  var str = "我是什么长度"  var size = TextMeasurer.Measure(str, new RendererOptions(new Font(fontfamily,50)));
var width = size.Width;

 

 

      2.在图片中画出圆形的头像

      我在ImageSharp的源码中,发现有画圆形的工具类可以使用,在这里直接copy出来。

 1 using SixLabors.ImageSharp;
 2 using SixLabors.ImageSharp.PixelFormats;
 3 using SixLabors.ImageSharp.Processing;
 4 using SixLabors.Primitives;
 5 using SixLabors.Shapes;
 6 using System;
 7 using System.Collections.Generic;
 8 using System.Text;
 9 
10 namespace CodePicDownload
11 {
12     public static class CupCircularHelper
13     {
14 
15         public static IImageProcessingContext<Rgba32> ConvertToAvatar(this IImageProcessingContext<Rgba32> processingContext, Size size, float cornerRadius)
16         {
17             return processingContext.Resize(new ResizeOptions
18             {
19                 Size = size,
20                 Mode = ResizeMode.Crop
21             }).Apply(i => ApplyRoundedCorners(i, cornerRadius));
22         }
23 
24 
25         // This method can be seen as an inline implementation of an `IImageProcessor`:
26         // (The combination of `IImageOperations.Apply()` + this could be replaced with an `IImageProcessor`)
27         private static void ApplyRoundedCorners(Image<Rgba32> img, float cornerRadius)
28         {
29             IPathCollection corners = BuildCorners(img.Width, img.Height, cornerRadius);
30 
31             var graphicOptions = new GraphicsOptions(true)
32             {
33                 AlphaCompositionMode = PixelAlphaCompositionMode.DestOut // enforces that any part of this shape that has color is punched out of the background
34             };
35             // mutating in here as we already have a cloned original
36             // use any color (not Transparent), so the corners will be clipped
37             img.Mutate(x => x.Fill(graphicOptions, Rgba32.LimeGreen, corners));
38         }
39 
40         private static IPathCollection BuildCorners(int imageWidth, int imageHeight, float cornerRadius)
41         {
42             // first create a square
43             var rect = new RectangularPolygon(-0.5f, -0.5f, cornerRadius, cornerRadius);
44 
45             // then cut out of the square a circle so we are left with a corner
46             IPath cornerTopLeft = rect.Clip(new EllipsePolygon(cornerRadius - 0.5f, cornerRadius - 0.5f, cornerRadius));
47 
48             // corner is now a corner shape positions top left
49             //lets make 3 more positioned correctly, we can do that by translating the orgional artound the center of the image
50 
51             float rightPos = imageWidth - cornerTopLeft.Bounds.Width + 1;
52             float bottomPos = imageHeight - cornerTopLeft.Bounds.Height + 1;
53 
54             // move it across the width of the image - the width of the shape
55             IPath cornerTopRight = cornerTopLeft.RotateDegree(90).Translate(rightPos, 0);
56             IPath cornerBottomLeft = cornerTopLeft.RotateDegree(-90).Translate(0, bottomPos);
57             IPath cornerBottomRight = cornerTopLeft.RotateDegree(180).Translate(rightPos, bottomPos);
58 
59             return new PathCollection(cornerTopLeft, cornerBottomLeft, cornerTopRight, cornerBottomRight);
60         }
61   }
62 }

           有了画圆形的方法,我们只需要调用ConvertToAvatar() 方法把方形的图片转为圆形,画在图片上即可。

1 using (Image<Rgba32> image = Image.Load("Image/Mud.png"))
2 {
3     var logoWidth = 300;
4     var logo = Image.Load("Image/Logo.png")
5 logo.Mutate(x => x.ConvertToAvatar(new Size(logoWidth, logoWidth), logoWidth / 2)); 6 image.Mutate(x => x.DrawImage(logo, new Point(100, 100), 1)); 7 Image.Save("..");
8 }

 

 

  3.处理二维码的BitMatrix类型

   我以微信获取的二维码类型为例,因为我的项目中二维码是从微信公众号平台API获取,在这次获取图片中,将BitMatrix类型转换为流的格式从而可以通过Image.Load()方法获取图片信息成为了关键。在这里我还是引用到了System.Drawing,可以单独提取公用方法。

 

 1         public void WriteToStream(BitMatrix QrMatrix, ImageFormat imageFormat, Stream stream)
 2         {
 3             if (imageFormat != ImageFormat.Exif && imageFormat != ImageFormat.Icon && imageFormat != ImageFormat.MemoryBmp)
 4             {
 5                 DrawingSize size = m_iSize.GetSize(QrMatrix?.Width ?? 21);
 6                 using (Bitmap bitmap = new Bitmap(size.CodeWidth, size.CodeWidth))
 7                 {
 8                     using (Graphics graphics = Graphics.FromImage(bitmap))
 9                     {
10                         Draw(graphics, QrMatrix);
11                         bitmap.Save(stream, imageFormat);
12                     }
13                 }
14             }
15         }

 

       这样数据就存入了stream中,但直接用ImageSharp去Load处理过的流可能会有些问题,为了保险,我将数据流中的byte取出,实例化了一个新的MemoryStream类型。这样,就可以获取到二维码的图片了。

1 //Matrix为BitMatrix类型数据,ImageFormat我选择了png类型
2 MemoryStream ms = new MemoryStream();   
3 WriteToStream(Matrix,System.Drawing.Imaging.ImageFormat.Png, ms);
4 byte[] data = new byte[ms.Length];
5 ms.Seek(0, SeekOrigin.Begin);
6 ms.Read(data, 0, Convert.ToInt32(ms.Length));
7 var image =  Image.Load(new MemoryStream(data));

 

      最后附上保存后图片的效果:

 

      本篇内容到此就结束了,非常感谢您的观看,有机会的话,希望能够一起讨论技术,一起成长!

 

转载于:https://www.cnblogs.com/niwan/p/11126239.html

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/247654.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

vue2工程

vue当然可以使用script标签引入&#xff0c;不需任何依赖即可按照vue的语法进行使用。但中大型商用项目中&#xff0c;还是建议使用工程化方式使用vue&#xff0c;vue提供了官方脚手架vue-cli&#xff0c;可以快速构建vue项目&#xff0c;脚手架会帮助开发者创建好建议的工程目…

【GamePlay】入门篇

【GamePlay】入门篇 游戏性编程是指通过一系列游戏系统将游戏想法变成现实的过程。 本次的简例以NPC设计为主。 通常在进行脚本设计前&#xff0c;对NPC的属性进行基本的添加和设定&#xff0c;诸如动画系统、物理系统等等。 1.动画系统 添加Animator组件&#xff0c;绑定骨骼。…

HttpHttps

http协议与https Http 客户端发送一个HTTP请求到服务器的请求消息包括以下格式&#xff1a; **请求行&#xff08;request line&#xff09;、请求头部&#xff08;header&#xff09;、空行 和请求数据四个部分组成。** Get请求例子&#xff0c;使用Charles抓取的request&…

vue2使用axios post跳坑,封装成模块

终于将vue-resource替换成axios了&#xff0c;其中像application/x-www-form-urlencoded发送的头信息以及返回的response结果这两点都需要注意一下。 其实https://github.com/mzabriskie/axios也有说明的。因为我在vue-resource中使用了Vue.http.options.emulateJSON true;&am…

并发与多线程

并发 并发&#xff08;concurrency&#xff09;是指CPU在某个时间段内交替处理多任务的能力。每个CPU不可能只顾着执行某个进程&#xff0c;而让其他进程一直等待被执行。所以&#xff0c;CPU把可执行时间均分成若干份&#xff0c;每个进程执行一份或多份时间后&#xff0c;记录…

synchronize原理

synchronized的三种应用方式 一. 修饰实例方法&#xff0c;作用于当前实例加锁&#xff0c;进入同步代码前要获得当前实例的锁。 二. 修饰静态方法&#xff0c;作用于当前类对象加锁&#xff0c;进入同步代码前要获得当前类对象的锁。 三. 修饰代码块&#xff0c;指定加锁对象&…

不能修改“System Roots”钥匙串

iOS mac添加证书 不能修改“System Roots”钥匙串错误 如图&#xff1a; 解决方式&#xff1a; 打开钥匙串---登录---&#xff0c;直接把证书拖过来 然后&#xff0c;查看--我的证书&#xff0c;里面&#xff0c;找到证书&#xff0c;即可

未来产品的设计

Donald A. Norman继《情感化设计》之后&#xff0c;又一设计精品力作&#xff1a; 未来产品的设计样章试读及本书预定&#xff1a;http://www.china-pub.com/195642市场价 &#xff1a;&#xffe5;39.00 会员价 &#xff1a; &#xffe5;29.25(75折) 【作  者】(美)Donald…

css之字体图标

SVG与字体图标 SVG图片是矢量图片&#xff0c;不会随着图片的伸缩而影响质量&#xff0c;通常把只有一种颜色的图标做成SVG&#xff0c;通过SVG生成字体图标&#xff0c;放到项目中使用。 https://icomoon.io/是一个比较快捷的生成字体图标的线上工具&#xff0c;进入主页后&…

研发阶段模拟接口数据

因为在vue-cli工程中需要创建很多.vue文件&#xff0c;我们希望创建vue文件和创建html、css、js文件一样右键即可选择创建&#xff0c;并且创建的文件中可预先写好模板代码。 webstorm-Preferences打开选项界面 选择File and Code Templates&#xff0c;点击绿色加号 填…

真实项目中 ThreadLocal 的妙用

一、什么是 ThreadLocal ThreadLocal 提供了线程的局部变量&#xff0c;每个线程都可以通过 set() 和 get() 来对这个局部变量进行操作&#xff0c;但不会和其他线程的局部变量冲突&#xff0c;实现了线程间的据隔离。 简单讲&#xff1a;一个获取用户的请求线程 A&#xff0c;…

css之flex布局

flex布局是css3中的重要布局方式&#xff0c;称为“弹性布局”&#xff0c;每次想到它主要是遇到元素垂直居中、元素宽高自适应的问题&#xff0c;这些问题在flex中都能过简单设置就解决&#xff0c;它更像是原生APP中的布局操作&#xff0c;布局不必写N多的盒模型代码来实现&a…

javascript对URL中的参数进行简单加密处理

javascript的api本来就支持Base64&#xff0c;因此我们可以很方便的来进行编码和解码。 var encodeData window.btoa("namexiaoming&age10")//编码 var decodeData window.atob(encodeData)//解码。 下面来个具体的例子来说明如何对url中参数进行转码&#xff…

HTML元素title里面如何换行

在调试代码的时候我就遇到一个问题&#xff0c;HTML元素title里面通常只显示一行&#xff0c;那我想要他换行&#xff0c;就是多行显示&#xff0c;如何实现&#xff1f;JS代码里面比如Alert里面又该如何换行&#xff1f; 经过我的一番实验 要实现这种效果有几种方法&#xff0…

div内图片和文字水平垂直居中

大小不固定的图片、多行文字的水平垂直居中 本文综述 想必写css的都知道如何让单行文字在高度固定的容器内垂直居中&#xff0c;但是您知道或者想过让行数不固定的文字在高度固定的容器内垂直居中呢&#xff1f;本文将会告诉你如何实现多行文字的垂直居中显示。 关于图片垂直居…

敏友的【敏捷个人】有感(3): 有感于“敏捷个人”讨论与练习

2010年我对个人管理进行了自己的一些思考&#xff0c;在2011年提出敏捷个人概念&#xff0c;并且在线上、线下进行了多次交流&#xff0c;在一些大会上也做过分享。现在&#xff0c;已经有很 多IT和非IT的敏友们知道并在践行敏捷个人&#xff0c;帮助自己更快的成长。我收到大家…

jQuery编写插件

引言&#xff1a; 在项目中不同页面经常要用到已经写好的交互&#xff0c;比如弹窗&#xff0c;比如下拉菜单&#xff0c;比如选项卡&#xff0c;比如删除... 此时如果每次都把代码copy一份无疑是一件比较麻烦并且无趣的事情&#xff0c;而且个人认为有些low了&#xff0c;我们…

webstorm中nodejs代码提示

preferences->languages&frameworks->Node.js and Npm中选择一个本地的node版本 preferences->languages&frameworks->JavaScript->Libraries 勾选node.js Core 回到代码

Array.prototype.slice.call(arguments)

Array.prototype.slice.call(arguments)能将具有length属性的对象转成数组&#xff0c;除了IE下的节点集合&#xff08;因为ie下的dom对象是以com对象的形式实现的&#xff0c;js对象与com对象不能进行转换&#xff09;如&#xff1a;1 var a{length:2,0:first,1:second}; 2 Ar…

nodejs常用模块-url

URL nodejs中针对url的常用方法。 node下打印url&#xff0c;结果&#xff1a; 引入url模块 var url require(url) 1、parse方法 将url解析成对象&#xff0c;parse方法原型&#xff1a; url.parse(urlStr[, parseQueryString][, slashesDenoteHost]) 可传递三个参数…