From URI to Image in .NET

Question

I've a URI like this one data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDI ..... on my web client and what I've to do, is to send that uri to an ASP.NET server and, always on server side, generate the corresponding png image.
Everything works fine if i set the uri to an img.src element of the page, but server side I can't find a way to save this stream inside a file.
How can I render SVG with C# (preferably ASP.Net)?

[EDIT]

Solution 1: Use an external .NET library which elaborate svg stream and save it to png file.
Solution 2: I moved the problem on the client; with this javascrpit code

function (svg_uri) {
            var image = new Image();
            image.src = svg_uri;
            image.onload = function () {
                var canvas = document.createElement('canvas');
                canvas.width = image.width;
                canvas.height = image.height;
                var context = canvas.getContext('2d');
                context.drawImage(image, 0, 0);    
                return canvas.toDataURL('image/png');                    
            }

I can get the new URI with the png content; so when I receive it on the server what I need to do is save it with the following code:

var bytes = Convert.FromBase64String(base64string.Replace("data:image/png;base64,",""));
using (var img = new FileStream(filePath, FileMode.Create))
{
    img.Write(bytes ,0, bytes.Length);
    img.Flush();
}

Wow, there's a lot going on here. On the server side, you'll want to base64-decode everything after the comma, which will give you an SVG document, which you will then need to render somehow (presumably using some .NET SVG library if one exists), and save the rendered image as a .PNG file. — adv12, Jan 21 '15 at 16:31
@Oscar: the problem is not pass the data, the problem is to convert that data to a png image. — Marco, Jan 21 '15 at 16:39
@adv12: understood, so in your opinion I need to use an external library to do this. — Marco, Jan 21 '15 at 16:41
Unless you want to write an SVG parser/renderer yourself, yes. This question has some possibly-helpful links: http://stackoverflow.com/questions/58910/converting-svg-to-png-using-c-sharp/58912#58912 — adv12, Jan 21 '15 at 16:43
Marco, the question as it stands now is to broad: you have at least 2 distinct unrelated questions - "how to convert data uri into byte array/stream" and "how to render SVG with C# (preferably ASP.Net)". Note that both questions have at least some existing answers on SO. Please check for duplicates before editing or asking new once. — Alexei Levenkov, Jan 21 '15 at 16:47
@AlexeiLevenkov: After adv12's answer, i think that the real question is "how to render SVG with C# (preferably ASP.Net)". I already tried http://svg.codeplex.com/, but when i do 'svgDocument.Draw();' command i got an Exception. — Marco, Jan 21 '15 at 17:07

Aerokneeus · Answer 1 · 2015-01-21T22:35:03.570

Just remove the beginning portion of the string "data:image/svg+xml;base64," everything after the comma is the actual base64 image, and you can save that image in .NET like this:

var bytes = Convert.FromBase64String(base64string);
using (var img = new FileStream(filePath, FileMode.Create))
{
    img.Write(bytes ,0, bytes.Length);
    img.Flush();
}

To help further clarify:

    class Program
    {
        static void Main(string[] args)
        {
            string b64 = "PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2ZXJzaW9uPSIxLjEiIGlkPSJMYXllcl8xIiB4PSIwcHgiIHk9IjBweCIgdmlld0JveD0iNS4wIC0xMC4wIDEwMC4wIDEzNS4wIiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAxMDAgMTAwIiB4bWw6c3BhY2U9InByZXNlcnZlIiBoZWlnaHQ9IjEwMHB4IiB3aWR0aD0iMTAwcHgiPgo8cGF0aCBpZD0icGF0aDE5ODNfM18iIGQ9Ik01MC4xLDQuOXY3LjRjMCwwLDAsMC0wLjIsMGMtMC4xLDAtMC40LDAuMi0wLjQsMC40YzAsMC4yLDAsNS4xLDAsNS4zYzAsMC4yLTAuMiwwLjItMC4yLDAuNCAgYzAsMC4yLDAsNC42LDAsNC44cy0wLjIsMC4yLTAuMiwwLjRjMCwwLjIsMCwxLjcsMCwxLjdsLTEuMywzLjZjMCwwLTAuNSwwLTAuNywwYy0wLjIsMC0wLjQsMC4yLTAuNCwwLjRjMCwwLjIsMCwwLjksMCwwLjkgIHMtMC40LDAtMC41LDBzLTAuNCwwLjItMC40LDAuNGMwLDAuMiwwLDUuMSwwLDUuMXMtMC40LDAtMC41LDBjLTAuMiwwLTAuNCwwLjItMC40LDAuNGMwLDAuMiwwLDYsMCw2LjJjMCwwLjMtMC42LDAuNC0wLjYsMC42ICBjMCwwLjIsMCwzMCwwLDMwcy0wLjcsMC0wLjksMGMtMC4yLDAtMC40LDAuMi0wLjQsMC40YzAsMC4yLDAsNi42LDAsNi42cy0xLjgsMC0yLDBjLTAuMiwwLTAuNCwwLjItMC40LDAuNGMwLDAuMiwwLDkuOSwwLDkuOSAgcy0yLjYsMC0yLjgsMHMtMC40LDAuMi0wLjQsMC40YzAsMC4yLDAsNC41LDAsNC41aDI1LjljMCwwLDAtNC4zLDAtNC41YzAtMC4yLTAuMi0wLjQtMC40LTAuNGMtMC4yLDAtMi44LDAtMi44LDBzMC05LjcsMC05LjkgIGMwLTAuMi0wLjItMC40LTAuNC0wLjRjLTAuMiwwLTIsMC0yLDBzMC02LjQsMC02LjZjMC0wLjItMC4yLTAuNC0wLjQtMC40Yy0wLjIsMC0wLjksMC0wLjksMHMwLTI5LjgsMC0zMGMwLTAuMi0wLjYtMC4zLTAuNi0wLjYgIGMwLTAuMywwLTYuMSwwLTYuMmMwLTAuMi0wLjItMC40LTAuNC0wLjRjLTAuMiwwLTAuNSwwLTAuNSwwczAtNSwwLTUuMWMwLTAuMi0wLjItMC40LTAuNC0wLjRjLTAuMiwwLTAuNiwwLTAuNiwwczAtMC43LDAtMC45ICBjMC0wLjItMC4yLTAuNC0wLjQtMC40Yy0wLjIsMC0wLjcsMC0wLjcsMGwtMS4zLTMuNmMwLDAsMC0xLjUsMC0xLjdjMC0wLjItMC4yLTAuMi0wLjItMC40czAtNC42LDAtNC44YzAtMC4yLTAuMi0wLjItMC4yLTAuNCAgYzAtMC4yLDAtNS4xLDAtNS4zYzAtMC4yLTAuMi0wLjQtMC40LTAuNHMtMC4yLDAtMC4yLDBWNC45aC0wLjRoLTAuMUg1MC4xeiIvPgo8dGV4dCB4PSIwLjAiIHk9IjExNy41IiBmb250LXNpemU9IjUuMCIgZm9udC13ZWlnaHQ9ImJvbGQiIGZvbnQtZmFtaWx5PSJIZWx2ZXRpY2EgTmV1ZSwgSGVsdmV0aWNhLCBBcmlhbC1Vbmljb2RlLCBBcmlhbCwgU2Fucy1zZXJpZiIgZmlsbD0iIzAwMDAwMCI+Q3JlYXRlZCBieSBMYXphciBOaWtvbGljPC90ZXh0Pjx0ZXh0IHg9IjAuMCIgeT0iMTIyLjUiIGZvbnQtc2l6ZT0iNS4wIiBmb250LXdlaWdodD0iYm9sZCIgZm9udC1mYW1pbHk9IkhlbHZldGljYSBOZXVlLCBIZWx2ZXRpY2EsIEFyaWFsLVVuaWNvZGUsIEFyaWFsLCBTYW5zLXNlcmlmIiBmaWxsPSIjMDAwMDAwIj5mcm9tIHRoZSBOb3VuIFByb2plY3Q8L3RleHQ+PC9zdmc+";
            ImageFromBase64(b64);
        }

        public static  void ImageFromBase64(string base64Img)
        {
            var bytes = Convert.FromBase64String(base64Img);
            using (var img = new FileStream(@"result.svg", FileMode.Create))
            {
                img.Write(bytes, 0, bytes.Length);
                img.Flush();
            }
        }
    }

and the resulting result.svg:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" viewBox="5.0 -10.0 100.0 135.0" enable-background="new 0 0 100 100" xml:space="preserve" height="100px" width="100px">
<path id="path1983_3_" d="M50.1,4.9v7.4c0,0,0,0-0.2,0c-0.1,0-0.4,0.2-0.4,0.4c0,0.2,0,5.1,0,5.3c0,0.2-0.2,0.2-0.2,0.4  c0,0.2,0,4.6,0,4.8s-0.2,0.2-0.2,0.4c0,0.2,0,1.7,0,1.7l-1.3,3.6c0,0-0.5,0-0.7,0c-0.2,0-0.4,0.2-0.4,0.4c0,0.2,0,0.9,0,0.9  s-0.4,0-0.5,0s-0.4,0.2-0.4,0.4c0,0.2,0,5.1,0,5.1s-0.4,0-0.5,0c-0.2,0-0.4,0.2-0.4,0.4c0,0.2,0,6,0,6.2c0,0.3-0.6,0.4-0.6,0.6  c0,0.2,0,30,0,30s-0.7,0-0.9,0c-0.2,0-0.4,0.2-0.4,0.4c0,0.2,0,6.6,0,6.6s-1.8,0-2,0c-0.2,0-0.4,0.2-0.4,0.4c0,0.2,0,9.9,0,9.9  s-2.6,0-2.8,0s-0.4,0.2-0.4,0.4c0,0.2,0,4.5,0,4.5h25.9c0,0,0-4.3,0-4.5c0-0.2-0.2-0.4-0.4-0.4c-0.2,0-2.8,0-2.8,0s0-9.7,0-9.9  c0-0.2-0.2-0.4-0.4-0.4c-0.2,0-2,0-2,0s0-6.4,0-6.6c0-0.2-0.2-0.4-0.4-0.4c-0.2,0-0.9,0-0.9,0s0-29.8,0-30c0-0.2-0.6-0.3-0.6-0.6  c0-0.3,0-6.1,0-6.2c0-0.2-0.2-0.4-0.4-0.4c-0.2,0-0.5,0-0.5,0s0-5,0-5.1c0-0.2-0.2-0.4-0.4-0.4c-0.2,0-0.6,0-0.6,0s0-0.7,0-0.9  c0-0.2-0.2-0.4-0.4-0.4c-0.2,0-0.7,0-0.7,0l-1.3-3.6c0,0,0-1.5,0-1.7c0-0.2-0.2-0.2-0.2-0.4s0-4.6,0-4.8c0-0.2-0.2-0.2-0.2-0.4  c0-0.2,0-5.1,0-5.3c0-0.2-0.2-0.4-0.4-0.4s-0.2,0-0.2,0V4.9h-0.4h-0.1H50.1z"/>
<text x="0.0" y="117.5" font-size="5.0" font-weight="bold" font-family="Helvetica Neue, Helvetica, Arial-Unicode, Arial, Sans-serif" fill="#000000">Created by Lazar Nikolic</text><text x="0.0" y="122.5" font-size="5.0" font-weight="bold" font-family="Helvetica Neue, Helvetica, Arial-Unicode, Arial, Sans-serif" fill="#000000">from the Noun Project</text></svg>

If you want a png you can use Inkscape.

Here is a link to a tutorial: http://www.31a2ba2a-b718-11dc-8314-0800200c9a66.com/2012/09/how-to-convert-svg-data-to-png-image.html

this code will save uri data to a generic file, not to a png image file — Marco, Jan 21 '15 at 20:01
I would not recommend using a canvas as this would require HTML5 compliant browsers. The file is not generic if you name it correctly. — Aerokneeus, Jan 21 '15 at 20:37
I tried your example, but when i call Image img = Image.FromStream(imageFile); I'll have an ArgumentException. Maybe because I'm using nvd3 library to draw svg? — Marco, Jan 21 '15 at 21:24

From URI to Image in .NET

1 Answers1

Linked

Related