从URI到.NET中的图像 [英] From URI to Image in .NET
问题描述
我在Web客户端上有一个像data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBzdGFuZGFsb25lPSJubyI/PjwhRE9DVFlQRSBzdmcgUFVCTElDI .....这样的URI，我要做的就是将uri发送到ASP.NET服务器，并始终在服务器端生成相应的png图像.
如果将uri设置为页面的img.src元素，则一切正常，但是在服务器端，我找不到将流保存到文件中的方法.
如何使用C#(最好是ASP.Net)渲染SVG?
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)?
解决方案1:使用精心制作svg流并将其保存到png文件的外部.NET库.
解决方案2:我在客户端上解决了问题；使用此javascrpit代码
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');
}
我可以获得带有png内容的新URI；因此，当我在服务器上收到它时，我需要做的是将其保存为以下代码:
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();
}
推荐答案
只需删除字符串"data:image/svg + xml; base64"的开头部分，逗号之后的所有内容均为实际的base64图像，您可以将该图像保存在.NET中，如下所示:
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();
}
为进一步说明问题，
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();
}
}
}
及其结果.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>
如果要使用png，可以使用Inkscape.
If you want a png you can use Inkscape.
这里是教程的链接: 查看全文
