问题描述

看见一个有趣的页面，可以把输入的文字信息，直接输出SVG图片，还可以实现动图模式。

https://readme-typing-svg.demolab.com/?font=Fira+Code&pause=1000&color=F7F7F7&background=233911F6&center=true&vCenter=true&random=false&width=435&lines=%E6%8A%8A%E5%AD%97%E5%8F%98%E5%8A%A8%E5%8A%A8%E5%9B%BE%E8%BE%93%E5%87%BA

示例效果：

那么，用.NET API怎么来快速实现这个目的呢？

问题解答

通过查看示例URL的Response Headers 和 Body Content，发现其使用的Content-Type 为image/svg+xml，内容使用svg, path,animate, text元素组合而成的HTML代码。

Content-Type（内容类型），一般是指网页中存在的 Content-Type，用于定义网络文件的类型和网页的编码，决定浏览器将以什么形式、什么编码读取这个文件

SVG 意为可缩放矢量图形（Scalable Vector Graphics）。 SVG 使用 XML 格式定义图像。

SVG 路径 – 元素用于定义一个路径。它开始于位置150 0，到达位置75 200，然后从那里开始到225 200，最后在150 0关闭路径。

随时间动态改变属性

所以是不是只要API的返回体相类似就可以呢？

试验开始

第一步：在Visual Studio 2022中，创建一个.NET Core WEBAPI项目，使用top-level statements.

第二步：设置app.MapGet(“/”, …)，添加httpResponse 参数并在函数体中设置 httpResponse.ContentType = “image/svg+xml”

第三步：直接把示例URL中的全部返回作为httpResponse 内容输出，F5运行项目测试效果。

app.MapGet("/", async (HttpResponse httpResponse) =>
{
    httpResponse.ContentType = "image/svg+xml";
    string content = "rnrn                rn                            rn                                rn                    rn    rn        rn            把字变动动图输出rn        rn    rnrn";
    await httpResponse.WriteAsync(content);
    await httpResponse.Body.FlushAsync();
});

测试成功，达到预期的效果。

第四步：优化代码，把文本和颜色变为参数

获取 Request中携带的参数 name 和 hex来替换HTML中的文本与颜色值。

PS: 如果有更多的需求，如多行字体，字体，大小，SVG的长宽等，都可以把提取出来变为参数。

完整代码如下：

app.MapGet("/tosvg", async (HttpRequest request, HttpResponse httpResponse) =>
{
    string name = request.Query["name"];
    string colorHex = request.Query["hex"];
    
    name = name ?? "No Name";
    colorHex = colorHex ?? "3943BB";
    httpResponse.ContentType = "image/svg+xml";await httpResponse.WriteAsync(GenerateSVGcontent(name, colorHex));
    await httpResponse.Body.FlushAsync();

});

string GenerateSVGcontent(string name, string colorHex = "#3943BB")
{
    StringBuilder sb = new StringBuilder();

    sb.Append("");
    sb.Append("");
    sb.Append("");
    sb.Append("");
    sb.Append(name);
    sb.Append("rn");

    return sb.ToString();
}

第五步：在VS2022中，一键部署到Azure App Service，轻松提供一个HTTP/S API实现文字转动图功能。

附录：完整的示例代码

using System.Text; 
var builder = WebApplication.CreateBuilder(args);
 
// Add services to the container.
var app = builder.Build();
app.MapGet("/", async (HttpResponse httpResponse) =>
{
    httpResponse.ContentType = "image/svg+服务器托管xml";
    string content = "rnrn                rn                            rn                                rn                    rn    rn        rn            把字变动动图输出rn        rn    rnrn";
    await httpResponse.WriteAsync(content);
    await httpResponse.Body.FlushAsync();
});

app.MapGet("/tosvg", async (HttpRequest request, HttpResponse httpResponse) =>
{
    string name = request.Query["name"];
    string colorHex = request.Query["hex"];
    //name = name:? "Name";
    name = name ?? "No Name";
    colorHex = colorHex ?? "3943BB";
    httpResponse.ContentType = "image/svg+xml";await httpResponse.WriteAsync(GenerateSVGcontent(name, colorHex));
    await httpResponse.Body.FlushAsync();

});

string GenerateSVGcontent(string name, string colorHex = "#3943BB")
{
    StringBuilder sb = new StringBuilder();

    sb.Append("");
     
    sb.Append("");
    //sb.Append(" ");
    sb.Append("");
    sb.Append("");
    sb.Append(name);
    sb.Append("rn");

    return sb.ToString();
}


app.Run();

参考资料

Readme Typing SVG :https://readme-typing-svg.demolab.com/demo/

HTTP content-type :https://www.runoob.com/http/http-content-type.html

:https://www.runoob.com/svg/svg-reference.html

服务器托管，北京服务器托管，服务器租用 http://www.fwqtg.net
机房租用，北京机房租用，IDC机房托管， http://www.fwqtg.net

【Azure Developer】.Net 简单示例 “文字动图显示” Typing to SVG

问题描述

问题解答

试验开始

参考资料

服务器托管，北京服务器托管，服务器租用，机房机柜带宽租用