我有html5 canvas imageData,想在服务器上保存为矢量图像(esp或svg)。我曾尝试使用Magick.NET和SVG渲染引擎库,但无法找到将此imageData转换为矢量图像格式的任何方法。你可以为此分享代码吗?这是我的代码。
public static string UploadImage(string imageData, string userEmail, int quantity)
{
string completePath = @"~\user-images\file.svg";
byte[] byteArray = Convert.FromBase64String(imageData);
//How can i convert this byteArray into vector image array so that i can save it as vector image on spcified path?
using (FileStream fs = new FileStream(HttpContext.Current.Server.MapPath(completePath), FileMode.Create))
{
using (BinaryWriter bw = new BinaryWriter(fs))
{
byte[] data = Convert.FromBase64String(imageData);
bw.Write(data);
bw.Close();
}
}
}
编辑:我向某人学习,一旦生成栅格imageData,就无法将其转换为矢量图像。所以问题是如何在不获取光栅imageData的情况下将html画布保存为服务器上的矢量图像。
所以现在我尝试使用.toSVG()结构方法使用结构库生成SVG图像。这是代码:
var fCanvas = new fabric.Image('c');
var imageurl = myCanvas.toDataURL("image/png"); // this is the origional html canvas that I used to draw images.
fabric.Image.fromURL(imageurl, function (img) {
img.scaleToWidth(fCanvas.width);
fCanvas.add(img);
fCanvas.renderAll();
}, { crossOrigin: 'anonymous' });
//fCanvas.deactivateAll().renderAll();
window.open('data:image/svg+xml;utf8,' + fCanvas.toSVG());
但是在这种情况下产生了空白输出。任何人都可以建议问题出在哪里。