[英]Convert an SVG to PNG using Javascript/jQuery and C# for download
I have an svg image on a page. 我在页面上有一个svg图片。 A user then clicks a link and this is called to get the toDataUrl(): 然后,用户单击一个链接,然后调用该链接以获取toDataUrl():
console.log('Processing svg for NOT Internet Explorer');
var svgText = $("#div-surrounding-svg-element").html();
var d3Canvas = document.getElementById("d3-canvas");
d3Canvas.width = 2000;
d3Canvas.height = 300;
var ctxt = d3Canvas.getContext("2d");
// make canvas background
ctxt.fillStyle = "#fff";
ctxt.fillRect(0, 0, d3Canvas.width, d3Canvas.height);
var svg = new Blob([svgText], { type: "image/svg+xml;charset=utf-8" });
var domURL = self.URL || self.webkitURL || self;
var url = domURL.createObjectURL(svg);
var img = new Image();
img.onload = function ()
{
ctxt.drawImage(this, 0, 0);
domURL.revokeObjectURL(url);
var dataUrl = d3Canvas.toDataURL();
// $('#download-chart-dataUrl').val(dataUrl);
// var downloadExcelForm = $('#download-chart-form');
// downloadExcelForm.submit();
// $('#download-chart-form').submit();
DownloadPNG(dataUrl);
};
img.src = url;
}
DownloadPNG does a POST to the server and C# does this: DownloadPNG对服务器执行POST,而C#执行此操作:
var base64Data = Regex.Match(dataUrl, @"data:image/(?<type>.+?),(?<data>.+)").Groups["data"].Value;
var binData = Convert.FromBase64String(base64Data);
using (var stream = new MemoryStream(binData))
{
var tempFolder = ConfigurationManager.AppSettings["tempFilesDirectory"];
var bitmap = new Bitmap(stream);
var folder = Server.MapPath(tempFolder);
var imagePath = folder + $"/{Guid.NewGuid().ToString()}.png";
bitmap.Save(imagePath);
//return File(imagePath, "image/png", "Chart.png");
Response.Clear();
Response.AddHeader("Content-Disposition", "attachment;filename=Chart.png");
Response.WriteFile(imagePath);
Response.End();
}
I am getting a plain white png instead of the image I want. 我得到的是普通的白色png而不是我想要的图像。 What am I missing? 我想念什么? Thanks. 谢谢。
You don't need any server-side for download png)))Please see an example PS Using jquery for a dom manipulation is a "bad taste" in 2k18, please use dom api)) 您不需要任何服务器端即可下载png))))请参见示例PS在2k18中将jQuery用于dom操作是“不好的味道”,请使用dom api))
Update: I have added querySelector to the SVG child of SVG, and SVG serializing code. 更新:我已经将querySelector添加到SVG的SVG子级,以及SVG序列化代码。
downloadPng=function(){ var img = new Image(); img.onload = function (){ var canvas = document.createElement("canvas"); canvas.width = img.naturalWidth; canvas.height = img.naturalHeight; var ctxt = canvas.getContext("2d"); ctxt.fillStyle = "#fff"; ctxt.fillRect(0, 0, canvas.width, canvas.height); ctxt.drawImage(img, 0, 0); var a = document.createElement("a"); a.href = canvas.toDataURL("image/png"); a.download = "image.png" document.body.appendChild(a); a.click(); document.body.removeChild(a); }; var innerSvg = document.querySelector("#div-surrounding-svg-element svg svg"); var svgText = (new XMLSerializer()).serializeToString(innerSvg); img.src = "data:image/svg+xml;utf8," + encodeURIComponent(svgText); }
<div id="div-surrounding-svg-element"> <svg id="inner-svg" height="100" width="500" xmlns="http://www.w3.org/2000/svg"> <svg height="100" width="500" xmlns="http://www.w3.org/2000/svg"> <ellipse cx="240" cy="50" rx="220" ry="30" style="fill:green" /> </svg> <ellipse cx="240" cy="50" rx="220" ry="30" style="fill:yellow" /> </svg> </div> <button onclick="downloadPng()">download</button>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.