Преобразование svg base64 строки в изображение - C #

Question

Я отправляю svg строку на сервер, чтобы

1. Преобразование строки SVG в изображение (PNG)
2. Сохранить изображение в базе данных (двоичные данные)

Однако я не могу успешно преобразовать строку в изображение.

Строка SVG генерируется из https://willowsystems.github.io/jSignature/#/demo/, где я использую извлечение svgbase64.

Пример содержимого: "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

Используйте SkiaSharp.Svg от xamarin nuget с SkiaSharp nuget от Microsoft, который является кроссплатформенным. Кстати:

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);
     }
}

Или используйте SVG nuget от vvv:

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");
}