c# - 将 svg base64 字符串转换为图像 - C#

Question

我将一个 svg 字符串发布到服务器，以便

1. 将 svg 字符串转换为图像 (png)
2. 将图像保存到数据库（二进制数据）

但是，我无法成功地将字符串转换为图像。

SVG 字符串是从我使用 svgbase64 提取的https://willowsystems.github.io/jSignature/#/demo/生成的。

样本内容："image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj48c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmVyc2lvbj0iMS4xIiB3aWR0aD0iNDAzIiBoZWlnaHQ9IjEwNiI+PHBhdGggZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwMDAwIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgZD0iTSAxMjUgMSBjIC0wLjEyIDAuNjggLTMuOSAyNi4xOSAtNyAzOSBjIC0xLjkgNy44NyAtNC44NiAxNS44MiAtOCAyMyBjIC0xLjQgMy4xOSAtMy42MyA2Ljc4IC02IDkgYyAtMi41NiAyLjQgLTYuNTggNC45IC0xMCA2IGMgLTUuMzUgMS43MiAtMTEuOTYgMS42MiAtMTggMyBjIC0xMC4yNyAyLjM1IC0xOS43MSA1LjcxIC0zMCA4IGMgLTguMDYgMS43OSAtMTYuMyAzLjI4IC0yNCA0IGMgLTIuNTUgMC4yNCAtNi42MSAwLjM5IC04IC0xIGMgLTIuOTMgLTIuOTMgLTYuNzMgLTkuOTEgLTggLTE1IGMgLTIuNDkgLTkuOTYgLTMuMDggLTIxLjcyIC00IC0zMyBjIC0wLjc4IC05LjUxIC0xLjI2IC0xOS4zMSAtMSAtMjggYyAwLjA2IC0xLjk2IDEuMDggLTQuMzUgMiAtNiBjIDAuNjEgLTEuMTEgMS45MSAtMi41MiAzIC0zIGMgMS41NiAtMC42OSA0LjE1IC0wLjQ1IDYgLTEgYyAxLjM2IC0wLjQxIDIuNjUgLTEuODcgNCAtMiBjIDExLjUyIC0xLjEgMjYuMzkgLTIuNDcgMzggLTIgYyAzLjU3IDAuMTUgOC4wNCAxLjk5IDExIDQgYyA0LjgzIDMuMjggOS4zNyA4LjM3IDE0IDEzIGMgNi4zNSA2LjM1IDExLjY4IDEyLjg5IDE4IDE5IGMgMy40MyAzLjMyIDcuNDcgNS43MiAxMSA5IGMgNS45NyA1LjU0IDEwLjk4IDExLjUzIDE3IDE3IGMgNS4xNiA0LjY5IDEwLjM0IDkuNDggMTYgMTMgYyA2LjM5IDMuOTcgMTQuNDYgNi4xNSAyMSAxMCBjIDQuNjIgMi43MSA4LjQ3IDcuNjYgMTMgMTAgYyA0LjYzIDIuMzkgMTAuNTQgMy43MiAxNiA1IGMgNS45NCAxLjQgMTEuOTYgMi42OCAxOCAzIGMgMTIuOTEgMC42OCAyNS43IDAuNzMgMzkgMCBjIDM2LjI2IC0yIDczLjAzIC0zLjk1IDEwNiAtOCBjIDUuNDIgLTAuNjcgMTAuNSAtNS4xMiAxNiAtNyBjIDYuMTggLTIuMTIgMTMuMyAtMy4wMiAxOSAtNSBjIDEuNDUgLTAuNSAyLjc2IC0xLjg4IDQgLTMgYyAyLjQ1IC0yLjIzIDUuNjggLTQuNTEgNyAtNyBjIDEuMzYgLTIuNTYgMS43MiAtNi42NyAyIC0xMCBjIDAuMzggLTQuNTggMC44NyAtOS45OCAwIC0xNCBjIC0wLjY0IC0yLjk1IC0yLjk4IC02LjM1IC01IC05IGMgLTMuMTkgLTQuMTkgLTcuMjQgLTkuMzcgLTExIC0xMiBjIC0yLjEzIC0xLjQ5IC02LjMgLTEuMSAtOSAtMiBjIC0xLjA2IC0wLjM1IC0xLjk1IC0xLjc1IC0zIC0yIGMgLTQuMTMgLTAuOTcgLTkuMzIgLTEuOTEgLTE0IC0yIGMgLTExLjkyIC0wLjI0IC0yNC4xMiAtMC4wNiAtMzYgMSBjIC02LjczIDAuNiAtMTQuMiAxLjUgLTIwIDQgYyAtOC4wNSAzLjQ4IC0xNS44IDEwLjI4IC0yNCAxNSBjIC0yLjg1IDEuNjQgLTYuMzIgMi4yNSAtOSA0IGMgLTYuNzkgNC40NSAtMTMuMDcgMTAuMTUgLTIwIDE1IGwgLTEwIDYiLz48L3N2Zz4="

这是我的代码：

    var svgContent = "PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj48c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmVyc2lvbj0iMS4xIiB3aWR0aD0iNDAzIiBoZWlnaHQ9IjEwNiI+PHBhdGggZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwMDAwIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgZD0iTSAxMjUgMSBjIC0wLjEyIDAuNjggLTMuOSAyNi4xOSAtNyAzOSBjIC0xLjkgNy44NyAtNC44NiAxNS44MiAtOCAyMyBjIC0xLjQgMy4xOSAtMy42MyA2Ljc4IC02IDkgYyAtMi41NiAyLjQgLTYuNTggNC45IC0xMCA2IGMgLTUuMzUgMS43MiAtMTEuOTYgMS42MiAtMTggMyBjIC0xMC4yNyAyLjM1IC0xOS43MSA1LjcxIC0zMCA4IGMgLTguMDYgMS43OSAtMTYuMyAzLjI4IC0yNCA0IGMgLTIuNTUgMC4yNCAtNi42MSAwLjM5IC04IC0xIGMgLTIuOTMgLTIuOTMgLTYuNzMgLTkuOTEgLTggLTE1IGMgLTIuNDkgLTkuOTYgLTMuMDggLTIxLjcyIC00IC0zMyBjIC0wLjc4IC05LjUxIC0xLjI2IC0xOS4zMSAtMSAtMjggYyAwLjA2IC0xLjk2IDEuMDggLTQuMzUgMiAtNiBjIDAuNjEgLTEuMTEgMS45MSAtMi41MiAzIC0zIGMgMS41NiAtMC42OSA0LjE1IC0wLjQ1IDYgLTEgYyAxLjM2IC0wLjQxIDIuNjUgLTEuODcgNCAtMiBjIDExLjUyIC0xLjEgMjYuMzkgLTIuNDcgMzggLTIgYyAzLjU3IDAuMTUgOC4wNCAxLjk5IDExIDQgYyA0LjgzIDMuMjggOS4zNyA4LjM3IDE0IDEzIGMgNi4zNSA2LjM1IDExLjY4IDEyLjg5IDE4IDE5IGMgMy40MyAzLjMyIDcuNDcgNS43MiAxMSA5IGMgNS45NyA1LjU0IDEwLjk4IDExLjUzIDE3IDE3IGMgNS4xNiA0LjY5IDEwLjM0IDkuNDggMTYgMTMgYyA2LjM5IDMuOTcgMTQuNDYgNi4xNSAyMSAxMCBjIDQuNjIgMi43MSA4LjQ3IDcuNjYgMTMgMTAgYyA0LjYzIDIuMzkgMTAuNTQgMy43MiAxNiA1IGMgNS45NCAxLjQgMTEuOTYgMi42OCAxOCAzIGMgMTIuOTEgMC42OCAyNS43IDAuNzMgMzkgMCBjIDM2LjI2IC0yIDczLjAzIC0zLjk1IDEwNiAtOCBjIDUuNDIgLTAuNjcgMTAuNSAtNS4xMiAxNiAtNyBjIDYuMTggLTIuMTIgMTMuMyAtMy4wMiAxOSAtNSBjIDEuNDUgLTAuNSAyLjc2IC0xLjg4IDQgLTMgYyAyLjQ1IC0yLjIzIDUuNjggLTQuNTEgNyAtNyBjIDEuMzYgLTIuNTYgMS43MiAtNi42NyAyIC0xMCBjIDAuMzggLTQuNTggMC44NyAtOS45OCAwIC0xNCBjIC0wLjY0IC0yLjk1IC0yLjk4IC02LjM1IC01IC05IGMgLTMuMTkgLTQuMTkgLTcuMjQgLTkuMzcgLTExIC0xMiBjIC0yLjEzIC0xLjQ5IC02LjMgLTEuMSAtOSAtMiBjIC0xLjA2IC0wLjM1IC0xLjk1IC0xLjc1IC0zIC0yIGMgLTQuMTMgLTAuOTcgLTkuMzIgLTEuOTEgLTE0IC0yIGMgLTExLjkyIC0wLjI0IC0yNC4xMiAtMC4wNiAtMzYgMSBjIC02LjczIDAuNiAtMTQuMiAxLjUgLTIwIDQgYyAtOC4wNSAzLjQ4IC0xNS44IDEwLjI4IC0yNCAxNSBjIC0yLjg1IDEuNjQgLTYuMzIgMi4yNSAtOSA0IGMgLTYuNzkgNC40NSAtMTMuMDcgMTAuMTUgLTIwIDE1IGwgLTEwIDYiLz48L3N2Zz4=";
    var bytes = Convert.FromBase64String(svgContent);


    using (MemoryStream ms = new MemoryStream(Convert.FromBase64String(svgContent)))
    {
        using (Bitmap bm2 = new Bitmap(ms))
        {
            bm2.Save("c:\\temp" + "myImage.jpg");
        }
    }

将流设置为位图时出现异常。我想问题出在我的 svgContent 上，但不确定是什么。

Answer 1

使用 xamarin nuget 的 SkiaSharp.Svg 和微软的 SkiaSharp nuget，这是跨平台的 BTW：

var svgContent = "PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj48c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmVyc2lvbj0iMS4xIiB3aWR0aD0iNDAzIiBoZWlnaHQ9IjEwNiI+PHBhdGggZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwMDAwIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgZD0iTSAxMjUgMSBjIC0wLjEyIDAuNjggLTMuOSAyNi4xOSAtNyAzOSBjIC0xLjkgNy44NyAtNC44NiAxNS44MiAtOCAyMyBjIC0xLjQgMy4xOSAtMy42MyA2Ljc4IC02IDkgYyAtMi41NiAyLjQgLTYuNTggNC45IC0xMCA2IGMgLTUuMzUgMS43MiAtMTEuOTYgMS42MiAtMTggMyBjIC0xMC4yNyAyLjM1IC0xOS43MSA1LjcxIC0zMCA4IGMgLTguMDYgMS43OSAtMTYuMyAzLjI4IC0yNCA0IGMgLTIuNTUgMC4yNCAtNi42MSAwLjM5IC04IC0xIGMgLTIuOTMgLTIuOTMgLTYuNzMgLTkuOTEgLTggLTE1IGMgLTIuNDkgLTkuOTYgLTMuMDggLTIxLjcyIC00IC0zMyBjIC0wLjc4IC05LjUxIC0xLjI2IC0xOS4zMSAtMSAtMjggYyAwLjA2IC0xLjk2IDEuMDggLTQuMzUgMiAtNiBjIDAuNjEgLTEuMTEgMS45MSAtMi41MiAzIC0zIGMgMS41NiAtMC42OSA0LjE1IC0wLjQ1IDYgLTEgYyAxLjM2IC0wLjQxIDIuNjUgLTEuODcgNCAtMiBjIDExLjUyIC0xLjEgMjYuMzkgLTIuNDcgMzggLTIgYyAzLjU3IDAuMTUgOC4wNCAxLjk5IDExIDQgYyA0LjgzIDMuMjggOS4zNyA4LjM3IDE0IDEzIGMgNi4zNSA2LjM1IDExLjY4IDEyLjg5IDE4IDE5IGMgMy40MyAzLjMyIDcuNDcgNS43MiAxMSA5IGMgNS45NyA1LjU0IDEwLjk4IDExLjUzIDE3IDE3IGMgNS4xNiA0LjY5IDEwLjM0IDkuNDggMTYgMTMgYyA2LjM5IDMuOTcgMTQuNDYgNi4xNSAyMSAxMCBjIDQuNjIgMi43MSA4LjQ3IDcuNjYgMTMgMTAgYyA0LjYzIDIuMzkgMTAuNTQgMy43MiAxNiA1IGMgNS45NCAxLjQgMTEuOTYgMi42OCAxOCAzIGMgMTIuOTEgMC42OCAyNS43IDAuNzMgMzkgMCBjIDM2LjI2IC0yIDczLjAzIC0zLjk1IDEwNiAtOCBjIDUuNDIgLTAuNjcgMTAuNSAtNS4xMiAxNiAtNyBjIDYuMTggLTIuMTIgMTMuMyAtMy4wMiAxOSAtNSBjIDEuNDUgLTAuNSAyLjc2IC0xLjg4IDQgLTMgYyAyLjQ1IC0yLjIzIDUuNjggLTQuNTEgNyAtNyBjIDEuMzYgLTIuNTYgMS43MiAtNi42NyAyIC0xMCBjIDAuMzggLTQuNTggMC44NyAtOS45OCAwIC0xNCBjIC0wLjY0IC0yLjk1IC0yLjk4IC02LjM1IC01IC05IGMgLTMuMTkgLTQuMTkgLTcuMjQgLTkuMzcgLTExIC0xMiBjIC0yLjEzIC0xLjQ5IC02LjMgLTEuMSAtOSAtMiBjIC0xLjA2IC0wLjM1IC0xLjk1IC0xLjc1IC0zIC0yIGMgLTQuMTMgLTAuOTcgLTkuMzIgLTEuOTEgLTE0IC0yIGMgLTExLjkyIC0wLjI0IC0yNC4xMiAtMC4wNiAtMzYgMSBjIC02LjczIDAuNiAtMTQuMiAxLjUgLTIwIDQgYyAtOC4wNSAzLjQ4IC0xNS44IDEwLjI4IC0yNCAxNSBjIC0yLjg1IDEuNjQgLTYuMzIgMi4yNSAtOSA0IGMgLTYuNzkgNC40NSAtMTMuMDcgMTAuMTUgLTIwIDE1IGwgLTEwIDYiLz48L3N2Zz4=";           
   var byteArray = Convert.FromBase64String(svgContent);
   using (var stream = new MemoryStream(byteArray))
   {
     var bitmap = new SKBitmap(500, 500);
     var canvas = new SKCanvas(bitmap);
     // load the SVG
     var svg = new SkiaSharp.Extended.Svg.SKSvg(new SKSize(100, 100));
     svg.Load(stream);
     // draw the SVG to the bitmap
     canvas.DrawPicture(svg.Picture);
     var skData = SKImage.FromBitmap(bitmap).Encode(SKEncodedImageFormat.Png, 100);
     using (var file = new FileStream(@"C:\temp\0\1.png", FileMode.Create))
     {
        skData.SaveTo(file);
     }
}

或者通过 vvv使用 Svg nuget ：

var svgContent = "PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+PCFET0NUWVBFIHN2ZyBQVUJMSUMgIi0vL1czQy8vRFREIFNWRyAxLjEvL0VOIiAiaHR0cDovL3d3dy53My5vcmcvR3JhcGhpY3MvU1ZHLzEuMS9EVEQvc3ZnMTEuZHRkIj48c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgdmVyc2lvbj0iMS4xIiB3aWR0aD0iNDAzIiBoZWlnaHQ9IjEwNiI+PHBhdGggZmlsbD0ibm9uZSIgc3Ryb2tlPSIjMDAwMDAwIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCIgZD0iTSAxMjUgMSBjIC0wLjEyIDAuNjggLTMuOSAyNi4xOSAtNyAzOSBjIC0xLjkgNy44NyAtNC44NiAxNS44MiAtOCAyMyBjIC0xLjQgMy4xOSAtMy42MyA2Ljc4IC02IDkgYyAtMi41NiAyLjQgLTYuNTggNC45IC0xMCA2IGMgLTUuMzUgMS43MiAtMTEuOTYgMS42MiAtMTggMyBjIC0xMC4yNyAyLjM1IC0xOS43MSA1LjcxIC0zMCA4IGMgLTguMDYgMS43OSAtMTYuMyAzLjI4IC0yNCA0IGMgLTIuNTUgMC4yNCAtNi42MSAwLjM5IC04IC0xIGMgLTIuOTMgLTIuOTMgLTYuNzMgLTkuOTEgLTggLTE1IGMgLTIuNDkgLTkuOTYgLTMuMDggLTIxLjcyIC00IC0zMyBjIC0wLjc4IC05LjUxIC0xLjI2IC0xOS4zMSAtMSAtMjggYyAwLjA2IC0xLjk2IDEuMDggLTQuMzUgMiAtNiBjIDAuNjEgLTEuMTEgMS45MSAtMi41MiAzIC0zIGMgMS41NiAtMC42OSA0LjE1IC0wLjQ1IDYgLTEgYyAxLjM2IC0wLjQxIDIuNjUgLTEuODcgNCAtMiBjIDExLjUyIC0xLjEgMjYuMzkgLTIuNDcgMzggLTIgYyAzLjU3IDAuMTUgOC4wNCAxLjk5IDExIDQgYyA0LjgzIDMuMjggOS4zNyA4LjM3IDE0IDEzIGMgNi4zNSA2LjM1IDExLjY4IDEyLjg5IDE4IDE5IGMgMy40MyAzLjMyIDcuNDcgNS43MiAxMSA5IGMgNS45NyA1LjU0IDEwLjk4IDExLjUzIDE3IDE3IGMgNS4xNiA0LjY5IDEwLjM0IDkuNDggMTYgMTMgYyA2LjM5IDMuOTcgMTQuNDYgNi4xNSAyMSAxMCBjIDQuNjIgMi43MSA4LjQ3IDcuNjYgMTMgMTAgYyA0LjYzIDIuMzkgMTAuNTQgMy43MiAxNiA1IGMgNS45NCAxLjQgMTEuOTYgMi42OCAxOCAzIGMgMTIuOTEgMC42OCAyNS43IDAuNzMgMzkgMCBjIDM2LjI2IC0yIDczLjAzIC0zLjk1IDEwNiAtOCBjIDUuNDIgLTAuNjcgMTAuNSAtNS4xMiAxNiAtNyBjIDYuMTggLTIuMTIgMTMuMyAtMy4wMiAxOSAtNSBjIDEuNDUgLTAuNSAyLjc2IC0xLjg4IDQgLTMgYyAyLjQ1IC0yLjIzIDUuNjggLTQuNTEgNyAtNyBjIDEuMzYgLTIuNTYgMS43MiAtNi42NyAyIC0xMCBjIDAuMzggLTQuNTggMC44NyAtOS45OCAwIC0xNCBjIC0wLjY0IC0yLjk1IC0yLjk4IC02LjM1IC01IC05IGMgLTMuMTkgLTQuMTkgLTcuMjQgLTkuMzcgLTExIC0xMiBjIC0yLjEzIC0xLjQ5IC02LjMgLTEuMSAtOSAtMiBjIC0xLjA2IC0wLjM1IC0xLjk1IC0xLjc1IC0zIC0yIGMgLTQuMTMgLTAuOTcgLTkuMzIgLTEuOTEgLTE0IC0yIGMgLTExLjkyIC0wLjI0IC0yNC4xMiAtMC4wNiAtMzYgMSBjIC02LjczIDAuNiAtMTQuMiAxLjUgLTIwIDQgYyAtOC4wNSAzLjQ4IC0xNS44IDEwLjI4IC0yNCAxNSBjIC0yLjg1IDEuNjQgLTYuMzIgMi4yNSAtOSA0IGMgLTYuNzkgNC40NSAtMTMuMDcgMTAuMTUgLTIwIDE1IGwgLTEwIDYiLz48L3N2Zz4=";           
var byteArray = Convert.FromBase64String(svgContent);
using (var stream = new MemoryStream(byteArray))
{
   var svgDocument = SvgDocument.Open<SvgDocument>(stream);
   var bitmap = svgDocument.Draw();
   bitmap.Save(@"C:\temp\0\1.png");
}