【java batik_使用BATIK解析SVG生成PNG图片】

news2024/11/26 16:46:07

矢量图的介绍及应用场景

矢量图是什么意思？

矢量图，也称为向量图，英文名字是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;
		}
	}