1

I have html5 canvas imageData and want to save as vector image(esp or svg) on server. I have tried to use Magick.NET and SVG Rendering Engine libraries but could not found any way to convert this imageData into vector image format. Can you please share code for this purpose. Here is my code.

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

    }

}

EDIT: I have learn from someone that once raster imageData is generated it can't be converted to vector image. So the question will be that how can I saved the html canvas as vector image on server without getting raster imageData.

So for now I have tried to use fabric library to generate SVG image by using .toSVG() fabric method. Here is code: 

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

But in this case blank output generated. Can anybody please suggest where the problem is.

jdk
  • 51
  • 2
  • 9
  • You need a function that vectorizes a bitmap image. There are many ways to do this and the results can vary greatly. For most methods there will be a loss of quality. Or you can opt for no loss just huge files by converting each pixel into a rect. You can do a reverse Quad tree to save a little space. But what would be the point, just save the file as a bitmap. If you want a vector image then you must abstract the rendering as vectors then save the render steps. – Blindman67 Nov 14 '16 at 13:27
  • This other question may be useful. http://stackoverflow.com/questions/1861382/convert-png-to-svg – Paul LeBeau Nov 14 '16 at 16:09
  • @Blindman67 I think that vector image can be converted to bitmap but vice versa is not possible. as discussed here. http://stackoverflow.com/questions/4022774/conversion-of-jpeg-to-svg-in-javascript – jdk Nov 15 '16 at 09:13
  • What if I create SVG element and embed the image tag with canvas generated uri to that svg . Will the output be vector image? – jdk Nov 15 '16 at 09:16
  • It is possible to go from bitmap to vector. I know as I have written the software to do it and there are plenty of online and offline utilities to do it., but for most methods there is a quality pay off. AND... No adding a bitmap image to the content of a SVG image will not convert it to vectors. – Blindman67 Nov 15 '16 at 10:41
  • The only solution I found to generate output in vector image is to use SVG or any other web designer. As I want the output in vector format so that I can cut the image using vinyl cutter. What should be the best choice other than canvas designer? – jdk Nov 16 '16 at 08:42

0 Answers0