没有自动跟踪的光栅到矢量图像 [英] Raster to Vector Image without autotrace

问题描述

我目前正在编写将栅格图像转换为矢量图像的代码段。它工作但输出在较大的图像上变得非常大，例如。在960px * 800px图像上，输出大约为160mb，我在google上无情地搜索了一个为填充块创建一系列排序的解决方案（我保存了颜色值）。到目前为止还没有这样的运气，所以我决定寻求我的同事们的协助，询问他们对手头问题的知识和专业知识。如果您有知识或信息，请随时发表评论，或者如果您必须进一步讨论这个概念或咆哮:)。到目前为止，这是我正在使用的代码片段。

I'm currently in the process of writing a code snippet that converts a Raster image to a Vector image. It works but the output becomes quite large on larger images, ex. on an 960px * 800px image the output is around 160mb, I've searched relentlessly on google for a solution of creating an array of sorts for fill blocks(what i save the color values in). So far no such luck so I have decided to seek out the assistance of my fellow coders to enquire of their knowledge and expertise on the matter at hand. Please feel free to leave a comment if you have and knowledge or information, or would like to discuss this concept further or rant if you must :). So far here is the code snippet that i am working with.

public static unsafe void SaveVector(this Image @this, Stream outputStream)
		{
			
			int PixelSize = 4;
			Rectangle rect = new Rectangle(new Point(0,0), @this.Size);						
			using(StreamWriter SvgWriter = new StreamWriter(outputStream))
			{
				using(Bitmap bitmap = new Bitmap(@this))
				{
					BitmapData bitmapData = bitmap.LockBits(rect, ImageLockMode.ReadOnly,PixelFormat.Format32bppArgb);
					SvgWriter.WriteLine("<?xml version=\"1.0\" encoding=\"UTF-8\" standalone=\"no\"?>");
					SvgWriter.WriteLine("<svg");
					SvgWriter.WriteLine("   xmlns:svg=\"http://www.w3.org/2000/svg\"");
					SvgWriter.WriteLine("   xmlns=\"http://www.w3.org/2000/svg\"");
					SvgWriter.WriteLine(string.Format("   width=\"{0}\"", @this.Width));
					SvgWriter.WriteLine(string.Format("   height=\"{0}\"", @this.Height));
					SvgWriter.WriteLine("   id=\"svg2\"");
					SvgWriter.WriteLine("   version=\"1.1\">");
					SvgWriter.WriteLine("  <defs");
					SvgWriter.WriteLine("     id=\"defs4\" />");
					SvgWriter.WriteLine("  <metadata");
					SvgWriter.WriteLine("     id=\"metadata7\" />");
					SvgWriter.WriteLine("  <g");
					SvgWriter.WriteLine("     id=\"layer1\">");
					int num = 0;				
					for(int y = 0; y < bitmapData.Height; y++)
					{
						byte* row=(byte *)bitmapData.Scan0+(y*bitmapData.Stride);
						for(int x = 0; x < bitmapData.Width; x++)
						{
							SvgWriter.WriteLine("    <rect");							
							SvgWriter.WriteLine(string.Format("       style=\"fill:{0};fill-opacity:1;stroke-width:0.43599999000000000;stroke-miterlimit:4;stroke-dasharray:none\"", 
								ColorTranslator.ToHtml(Color.FromArgb(
								row[(x * PixelSize) + 3],
								row[(x * PixelSize) + 2],
								row[(x * PixelSize) + 1],
								row[x * PixelSize]))));
							SvgWriter.WriteLine(string.Format("       id=\"rect{0}\"", num));
							SvgWriter.WriteLine("       width=\"1\"");
							SvgWriter.WriteLine("       height=\"1\"");
							SvgWriter.WriteLine(string.Format("       x=\"{0}\"", x));
							SvgWriter.WriteLine(string.Format("       y=\"{0}\" />", y));							
							num++;
						}						
					}
					bitmap.UnlockBits(bitmapData);
				}
				SvgWriter.WriteLine("  </g>");
				SvgWriter.WriteLine("</svg>");
			}
		}
	}

推荐答案

呃我不想告诉你这个，但那不是矢量转换。没有丝毫。



您所做的只是从图像中读取一个像素并将其包装在看起来像XML文本的大块中。是的，难怪你生成的文件会膨胀到160MB。



你看起来的方向就是所谓的运行长度编码（RLE）图像。尽管如此，它远不如原始位图作为存储介质那么高效。



你还想用这个做什么？

Uhhh I hate to tell you this, but that's NOT a vector conversion. Not in the slightest.

All you did was read a pixel from the image and wrap it in a LARGE block of what looks like XML text. Yeah, it's no wonder your resulting files balloon to 160MB.

The direction you appear to be going is what was called Run Length Encoding (RLE) images. Still, it's nowhere near as efficient as your original bitmap as a storage medium.

What are you trying to do with this anyway?

我同意谢尔盖和戴夫的意见 - 你正在以错误的方式解决这个问题。我不确定你要完成什么，但我认为你最好插入一个< image>在您的SVG中标记并链接到图像文件或可能base64编码图像并将其嵌入SVG图像标记。



下面你应该可以看到两个版本Bob图像一个是链接到在线图像，另一个是嵌入同一图像的base64版本。

< svg xmlns =http://www.w3.org/2000/svgversion = 1.1width =300pxheight =140px>

[< svg xmlns =http：// www .w3.org / 2000 / svgversion =1.1width =300pxheight =140px>< image height =125width =125x =10y =10xlink ：href =http://www.codeproject.com/App_Themes/CodeProject/Img/logo125x125.gif/>< / svg>]



< ; svg xmlns =http://www.w3.org/2000/svgversion =1.1width =300pxheight =140px>

[要查看base64嵌入版本，右键单击图像并选择检查元素]



这里有我用过的一些好的SVG参考链接：

今日浏览器的SVG入门 [ ^ ]

将SVG添加到网页 [ ^ ]

SVG教程 - Jenkov [ ^ ]



我使用此在线转换器生成Bob图像的base64版本：

http://webcodertools.com/imagetobase64converter/Create [ ^ ]





Soren Madsen

I agree with Sergey and Dave - you are going about this the wrong way. I am not sure exactly what you are trying to accomplish, but I think you would be better off inserting an <image> tag in your SVG and either link to the image file or possibly base64 encoding the image and embedding that in your SVG image tag.

Below you should be able see two versions of a Bob image. One is linking to the online image, the other is embedding a base64 version of the same image.
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300px" height="140px">
[<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300px" height="140px"><image height="125" width="125" x="10" y="10" xlink:href="http://www.codeproject.com/App_Themes/CodeProject/Img/logo125x125.gif"/></svg>]

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="300px" height="140px">
[To see the base64 embedded version, right-click on the image and select "Inspect Element"]

Here are a few good SVG reference links I have used:
An SVG Primer for Today's Browsers[^]
Adding SVG to a webpage[^]
SVG Tutorial - Jenkov[^]

I used this online converter to generate the base64 version of the Bob image:
http://webcodertools.com/imagetobase64converter/Create[^]


Soren Madsen

这篇关于没有自动跟踪的光栅到矢量图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！