矢量图的介绍及应用场景
矢量图是什么意思?
矢量图,也称为向量图,英文名字是Vector graphics。
矢量图是一种基于矢量的图形,由一系列的线段和曲线组成。由数学公式和算法生成的。这意味着矢量图可以在任何分辨率下清晰地显示,而不会出现模糊或失真的情况。
矢量图一般应用在哪些领域?
矢量图常用于创建图形、图表、标志和插图等,因为它们可以在任何尺寸下保持清晰度,并且可以轻松地进行编辑和修改,所以应用领域就非常广泛,主要分为五个大的领域,包括1. 计算机图形学、2. 平面设计、3. 印刷和出版、4. 建筑和工程以及5. 动画和游戏动画和游戏等领域。
矢量图有哪些特点?
矢量图的特点用一句话就可以总总结:矢量图一种基于矢量的图形,具有清晰度高、可编辑性强、易于缩放等优点。
矢量图最大的优势是我们在文章开始提到的,由数学公式和算法生成的,缩放和修改,可以在任何分辨率下清晰地显示,而不会出现模糊或失真,依旧有优秀的图像质量,也不会丢失原始图像的任何细节。#探秘硬核知识#
哪些软件可以编辑矢量格式的图片?
Adobe Illustrator它支持多种矢量图形格式,包括.AI、.SVG、.EPS等。
AI矢量软件教程-连续旋转复制-设计技能再升级CorelDraw也是一款优秀的矢量图形编辑软件,包括.CDR、.AI、.EPS等。
Ai转cdr怎么转?用什么格式?Inkscape也是一款开源的矢量图形编辑软件。它支持多种矢量图形格式,包括.SVG、.EPS、.PNG等。
在现代的应用开发中,矢量图形的使用越来越广泛,特别是在Web开发和图像处理领域。Batik库作为一款优雅的SVG图形处理工具,可以帮助我们生成、操作和展示矢量图形。
本文将深入探讨Batik库的基本概念、特点,以及如何在实际应用中使用它进行SVG图形处理。
Batik库简介
Batik是由Apache软件基金会开发的一款Java库,用于处理和渲染SVG(Scalable Vector Graphics)图形。它提供了一组丰富的API和工具,用于创建、修改、呈现和操作SVG图形。
Batik库的特点
完整的SVG支持: Batik库支持SVG的各种规范,包括形状、路径、文本、滤镜、动画等。
高质量渲染: Batik库提供了高质量的SVG渲染引擎,可以在不同设备上保持一致的呈现效果。
可扩展性: Batik库允许开发者自定义SVG解析和呈现的行为,以适应不同需求。
跨平台: Batik库是基于Java开发的,因此可以在各种平台上使用。
Batik库的用法
添加依赖
在Maven项目中,你可以通过添加以下依赖来引入Batik库:
<dependency>
<groupId>org.apache.xmlgraphics</groupId>
<artifactId>batik-all</artifactId>
<version>1.14</version>
</dependency>
创建SVG图形
import org.apache.batik.dom.*;
import org.w3c.dom.*;
import org.apache.batik.svggen.*;
public class SvgExample {
public static void main(String[] args) throws Exception {
DocumentFactory documentFactory = new SAXDocumentFactory(
XMLResourceDescriptor.getXMLParserClassName(),
"org.apache.xerces.parsers.SAXParser");
DOMImplementation domImpl = SVGDOMImplementation.getDOMImplementation();
String svgNS = SVGDOMImplementation.SVG_NAMESPACE_URI;
Document document = domImpl.createDocument(svgNS, "svg", null);
SVGGraphics2D svgGenerator = new SVGGraphics2D(document);
svgGenerator.draw(new Rectangle(100, 100));
svgGenerator.stream(System.out, true);
}
}
Batik库的应用场景
Web图形展示: 可以使用Batik库将SVG图形嵌入到网页中,实现动态图形展示。
图像生成: Batik库可以生成高质量的SVG图像,用于生成报表、图表等。
图像处理: 可以使用Batik库修改SVG图形,添加滤镜、变形等效果。
注意事项
学习SVG规范: 要熟悉SVG的基本概念和规范,以便更好地使用Batik库处理图形。
性能考虑: 在处理大型SVG图形时,要注意性能问题,避免性能瓶颈。
2 矢量图转为PNG
在验证识别测试中,发现有些网站使用了SVG 矢量图,那么矢量图的处理有些独特的方法,处理不好,则无法进行识别,如何正确的处理主要有以下两部分:
1 获取的矢量图字符串
获取DIV标签内的矢量图字符串,该字符串经过了URL 编码 ,
如:
imgUrl=data:image/svg+xml;charset=utf8,%3Csvg%20preserveAspectRatio%3D%22none%20meet%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22188%22%20height%3D%2260%22%20viewBox%3D%220%2C0%2C188%2C60%22%3E%3Crect%20width%3D%22100%25%22%20height%3D%22100%25%22%20fill%3D%22%23cc9966%22%2F%3E%3Cpath%20fill%3D%22%23332f23%22%20d%3D%22M144.57%2030.07L144.56%2030.06L144.65%2030.15Q145.51%2030.48%20147.49%2030.48L147.37%2030.36L147 。。。
对URL 编码进行解码处理
imgElement = driver.findElement(By.xpath("//div[contains(@style,'data:image/svg+xml;charset=utf8,')]"));
String cssValue = (imgElement != null) ? imgElement.getCssValue("background-image") : null;
String imgUrl = (cssValue != null && cssValue.contains("\"")) ? cssValue.split("\"")[1] : null;
String imgBase64 = URLDecoder.decode(imgUrl.substring(32), "UTF-8");
System.out.println(imgBase64);
2 将矢量图字符串 转换为PNG 后再进行识别
// 将SVG 转为PNG格式
private byte[] svgTbyte(String imgBase64) {
// 创建DocumentBuilderFactory
try {
DocumentBuilderFactory factory = DocumentBuilderFactory.newInstance();
DocumentBuilder builder = factory.newDocumentBuilder();
Document document = builder.parse(new java.io.ByteArrayInputStream(imgBase64.getBytes()));
// 序列化SVG为字符串
TransformerFactory transformerFactory = TransformerFactory.newInstance();
Transformer transformer = transformerFactory.newTransformer();
transformer.setOutputProperty(OutputKeys.OMIT_XML_DECLARATION, "yes");
transformer.setOutputProperty(OutputKeys.INDENT, "yes");
StringWriter writer = new StringWriter();
transformer.transform(new DOMSource(document), new StreamResult(writer));
String svgContent = writer.getBuffer().toString();
// 使用TranscoderInput将SVG转换为PNG字节数组
PNGTranscoder transcoder = new PNGTranscoder();
TranscoderInput input = new TranscoderInput(new ByteArrayInputStream(svgContent.getBytes()));
ByteArrayOutputStream pngOutputStream = new ByteArrayOutputStream();
TranscoderOutput output = new TranscoderOutput(pngOutputStream);
transcoder.transcode(input, output);
// 获取PNG字节数组
byte[] pngBytes = pngOutputStream.toByteArray();
return pngBytes;
} catch (Exception e) {
return null;
}
}