svg转png

news2024/11/17 8:25:45

svg转png

  • 写了一个spring boot项目,支持传入svg文件转出png图片,并且自定义转出png的宽和高。
    • 主要代码如下:
    • 所需依赖如下:
    • 演示如下:
      • 首先,运行项目
      • 使用接口调用工具调用接口
      • 发送请求,提取文件
      • 10000分辨率的超清大图
  • 项目已经开源,开源🔗链接如下:

写了一个spring boot项目,支持传入svg文件转出png图片,并且自定义转出png的宽和高。

svg是矢量图,因此我们用svg可以转出任意大小的高清png大图。

主要代码如下:

import org.apache.batik.transcoder.Transcoder;
import org.apache.batik.transcoder.TranscoderException;
import org.apache.batik.transcoder.TranscoderInput;
import org.apache.batik.transcoder.TranscoderOutput;
import org.apache.batik.transcoder.image.PNGTranscoder;
import org.springframework.http.MediaType;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.web.multipart.MultipartFile;

import javax.servlet.http.HttpServletResponse;
import java.io.ByteArrayInputStream;
import java.io.IOException;
import java.io.InputStream;
import java.net.URLEncoder;
import java.nio.charset.StandardCharsets;
import java.util.Objects;

/**
 * @author Peter Cheung
 * 2023/2/16 15:21
 */
@RestController
public class SvgToPngController {
    /**
     * 上传svg
     * <p>
     * 然后
     * <p>
     * 下载png
     * <p>
     * consumes定义multipart/form-data
     */
    @GetMapping(path = "download", consumes = MediaType.MULTIPART_FORM_DATA_VALUE)
    public void download(float height, float width, MultipartFile file, HttpServletResponse response) throws IOException, TranscoderException {
        //MultipartFile转InputStream
        InputStream in = new ByteArrayInputStream(file.getBytes());
        Transcoder transcoder = new PNGTranscoder();
        //设置png图片的宽和长
        transcoder.addTranscodingHint(PNGTranscoder.KEY_WIDTH, width);
        transcoder.addTranscodingHint(PNGTranscoder.KEY_HEIGHT, height);
        try {
            TranscoderInput input = new TranscoderInput(in);
            //清空response
            response.reset();
            //强制下载不打开
            response.setContentType(MediaType.APPLICATION_OCTET_STREAM_VALUE);
            //设置编码为UTF_8
            response.setCharacterEncoding(StandardCharsets.UTF_8.name());
            //Content-Disposition的作用:告知浏览器以何种方式显示响应返回的文件,用浏览器打开还是以附件的形式下载到本地保存
            //attachment表示以附件方式下载 inline表示在线打开 "Content-Disposition:inline; filename=文件名.mp3"
            //filename表示文件的默认名称,因为网络传输只支持URL编码,因此需要将文件名URL编码后进行传输,前端收到后需要反编码才能获取到真正的名称
            response.setHeader("Content-Disposition", "attachment;filename=" + URLEncoder.encode((Objects.requireNonNull(file.getOriginalFilename()).split("\\."))[0], StandardCharsets.UTF_8.name()) + ".png");
            TranscoderOutput output = new TranscoderOutput(response.getOutputStream());
            transcoder.transcode(input, output);
        } finally {
            in.close();
        }
    }
}

所需依赖如下:

<dependencies>
        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-web</artifactId>
        </dependency>
        <!--文件上传-->
        <dependency>
            <groupId>commons-fileupload</groupId>
            <artifactId>commons-fileupload</artifactId>
            <version>1.4</version>
        </dependency>
        <dependency>
            <groupId>commons-io</groupId>
            <artifactId>commons-io</artifactId>
            <version>2.11.0</version>
        </dependency>

        <dependency>
            <groupId>batik</groupId>
            <artifactId>batik-svggen</artifactId>
            <version>1.6</version>
        </dependency>
        <dependency>
            <groupId>batik</groupId>
            <artifactId>batik-awt-util</artifactId>
            <version>1.6</version>
        </dependency>
        <dependency>
            <groupId>batik</groupId>
            <artifactId>batik-bridge</artifactId>
            <version>1.6</version>
        </dependency>
        <dependency>
            <groupId>batik</groupId>
            <artifactId>batik-css</artifactId>
            <version>1.6</version>
        </dependency>
        <dependency>
            <groupId>batik</groupId>
            <artifactId>batik-dom</artifactId>
            <version>1.6</version>
        </dependency>
        <dependency>
            <groupId>batik</groupId>
            <artifactId>batik-gvt</artifactId>
            <version>1.6</version>
        </dependency>
        <dependency>
            <groupId>batik</groupId>
            <artifactId>batik-parser</artifactId>
            <version>1.6</version>
        </dependency>
        <dependency>
            <groupId>batik</groupId>
            <artifactId>batik-script</artifactId>
            <version>1.6</version>
        </dependency>
        <dependency>
            <groupId>batik</groupId>
            <artifactId>batik-svg-dom</artifactId>
            <version>1.6</version>
        </dependency>
        <dependency>
            <groupId>batik</groupId>
            <artifactId>batik-transcoder</artifactId>
            <version>1.6</version>
        </dependency>
        <dependency>
            <groupId>batik</groupId>
            <artifactId>batik-util</artifactId>
            <version>1.6</version>
        </dependency>
        <dependency>
            <groupId>batik</groupId>
            <artifactId>batik-xml</artifactId>
            <version>1.6</version>
        </dependency>
        <!-- 此处不能使用2.9.1版本,使用2.9.1生成png会失败 -->
        <dependency>
            <groupId>xerces</groupId>
            <artifactId>xercesImpl</artifactId>
            <version>2.5.0</version>
        </dependency>
        <dependency>
            <groupId>xml-apis</groupId>
            <artifactId>xmlParserAPIs</artifactId>
            <version>2.0.2</version>
        </dependency>

        <dependency>
            <groupId>org.axsl.org.w3c.dom.svg</groupId>
            <artifactId>svg-dom-java</artifactId>
            <version>1.1</version>
        </dependency>
        <dependency>
            <groupId>xml-apis</groupId>
            <artifactId>xml-apis</artifactId>
            <version>2.0.0</version>
        </dependency>

        <dependency>
            <groupId>org.w3c.css</groupId>
            <artifactId>sac</artifactId>
            <version>1.3</version>
        </dependency>


        <dependency>
            <groupId>org.springframework.boot</groupId>
            <artifactId>spring-boot-starter-test</artifactId>
            <scope>test</scope>
        </dependency>
</dependencies>

演示如下:

首先,运行项目

在这里插入图片描述

使用接口调用工具调用接口

在这里插入图片描述

注意:get请求,路径如同,body里使用form-data,三个参数,file是你要上传的svg文件,height是转出png图片的高,width是转出png图片的长,height和width是数字类型,支持整数和小数。

发送请求,提取文件

在这里插入图片描述

在这里插入图片描述

如图,我将转出的png放于桌面

10000分辨率的超清大图

在这里插入图片描述

项目已经开源,开源🔗链接如下:

🔗svg转png

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/350210.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

日本机载激光雷达测深进展(一)日本启动测量90%沿岸水深项目

海洋地图项目利用航空测深绘制日本90%沿海20m以浅区域&#xff0c;是日本海道协会&#xff08;JHA&#xff09;和日本财团的一个联合项目。 迄今为止&#xff0c;只有不到2%的日本沿海水域得到了测绘&#xff0c;严重拖累了在海洋事故、防灾减灾、篮碳以及生物多样性保护等领域…

数据结构——第二章 线性表(1)——顺序结构

线性表1. 线性表1.1 线性表的定义1.1.1 访问型操作1.1.2 加工型操作1.2 线性表的顺序存储结构1.2.1 定义顺序表数据类型方法11.2.2 定义顺序表数据类型方法21.3 顺序表的基本操作实现1.3.1 顺序表的初始化操作1.3.2 顺序表的插入操作1.3.3 顺序表的删除操作1.3.4 顺序表的更新操…

Windows环境下使用Pycharm运行sh文件

博主在调试一些程序时&#xff0c;时常遇到 .sh文件&#xff0c;这是Linux中的shell脚本文件&#xff0c;那么这种文件在windows下如何运行呢&#xff0c;其实我们可以通过git来实现&#xff0c;接下来看我操作。 首先我们需要安装Git&#xff0c;关于其安装过程可以参考博主这…

wholeaked:一款能够追责数据泄露的文件共享工具

关于wholeaked wholeaked是一款功能强大的文件共享工具&#xff0c;该工具基于go语言开发&#xff0c;可以帮助广大系统管理员和安全研究人员在组织发生数据泄露的时候&#xff0c;迅速找出数据泄露的“始作俑者”。 wholeaked可以获取被共享的文件信息以及接收人列表&#x…

【云计算自学路线】

云计算包含的技术内容和涉及的方向比较多&#xff0c;一定要进行系统化的学习才能更好的掌握这门技术。 云计算作为互联网新技术领域&#xff0c;现阶段也是出于高速发展期&#xff0c;想学习加入云计算行业的小伙伴可以抓紧机会了&#xff0c;跟着小课一起来了解云计算以及它…

【PTA Advanced】1146 Topological Order(C++)

目录 题目 Input Specification: Output Specification: Sample Input: Sample Output: 思路 C 知识UP 代码 题目 This is a problem given in the Graduate Entrance Exam in 2018: Which of the following is NOT a topological order obtained from the given dire…

佳能镜头EOS系统EF协议逆向工程(四)常用指令

目录 EOS5000&#xff08;基础协议&#xff09; AE*记忆键 物镜38-76焦距76mm的帧值&#xff08;手动焦距&#xff09; 帧操作和解码命令 指令0x0A:请求物镜可用 指令0xA0、B0、B2、90和F0&#xff1a;光学特性和AF状态 指令0x80-0A:请求物镜的物理特性 指令0xC2&#…

(考研湖科大教书匠计算机网络)第四章网络层-第四节:IP数据报的发送和转发过程

获取pdf&#xff1a;密码7281专栏目录首页&#xff1a;【专栏必读】考研湖科大教书匠计算机网络笔记导航 文章目录一&#xff1a;概述二&#xff1a;举例三&#xff1a;路由器可以隔离广播域本节对应视频如下 【计算机网络微课堂&#xff08;有字幕无背景音乐版&#xff09;】&…

文华财经期货策略高胜率顶底反转指标公式,短线操盘量化CTA主图K线指标

​期货指标公式不是交易的圣杯&#xff0c;也不是期货亏损后的救命稻草。请理性运用指标公式&#xff0c;独立决策&#xff0c;盈亏自负。 什么是多头趋势行情&#xff1f; 多头趋势行情指的是市场单边多头行情。具体表现为上涨过程中出现连续上涨的高点与低点&#xff0c;只要…

3.4 ISIS和OSPF之间路由引入

实验目的掌握在IS-IS中引入OSPF路由的方法掌握在OSPF中引入IS-IS路由的方法实验拓扑ISIS和OSPF之间路由引入实验拓扑如图3-3所示: 图3-3:ISIS和OSPF之间路由引入 实验步骤IP地址的配置R1的配置 <Huawei>system-view [Huawei]undo info-center enable

Spring 框架源码(六) Bean的生命周期全流程源码解析

Spring框架作为Java王国的地基&#xff0c;我觉得它包含了很多精妙的设计&#xff0c;例如Bean工厂设计、Bean的生命周期、tx、aop、web、mvc等&#xff0c;最核心基本的Bean设计是Spring 的框架的灵魂&#xff0c;本文就Bean的生命周期全流程做源码程度上的解析&#xff0c;欢…

【surfaceflinger源码分析】surfaceflinger进程的消息驱动模型(二)

接着上篇文章中的两个新疑问: mEventTube是个什么玩意&#xff1f;MessageQueue::setEventConnection(…) 什么时候有谁调用的 &#xff1f; BitTube mEventTube的类型为class BitTube&#xff0c;BitTube从字面上的意思来看bit管道&#xff0c;bit隧道&#xff0c;应该是一…

20230216在Ubuntu18.04下查看硬盘信息

20230216在Ubuntu18.04下查看硬盘信息 2023/2/16 22:25 百度搜索&#xff1a;查看 HDD 缓存 ubuntu [BEGIN] 2023/2/16 22:10:24 rootrootrootroot-X99-Turbo:~$ rootrootrootroot-X99-Turbo:~$ rootrootrootroot-X99-Turbo:~$ cat /sys/block/sda/device/modelHUS726060ALE61…

VIVADO2022 sdk 工程创建流程

正点原子uart历程复现 create block design&#xff08;起名 为System&#xff09; -> open block design -> 号/IP catalog 中搜索zynq 双击打开&#xff0c; 将和pl相关的时钟都干掉 再auto 布线一下 把herarchy中的sources 中的system.bd右键、 无脑下一步导出 如…

赛狐ERP|亚马逊产品缺货怎么办?该如何补救?

由于物流时效的延长&#xff0c;运输成本的增加&#xff0c;亚马逊的仓储限制等各种原因&#xff0c;断货问题很常成为亚马逊卖家的普遍困扰。那么亚马逊产品缺货应该怎么办&#xff01;1、提高产品价格&#xff1a;除了卖自己的Listing此外&#xff0c;提高产品价格也是一种保…

基于微信小程序的智能招聘小程序

文末联系获取源码 开发语言&#xff1a;Java 框架&#xff1a;ssm JDK版本&#xff1a;JDK1.8 服务器&#xff1a;tomcat7 数据库&#xff1a;mysql 5.7/8.0 数据库工具&#xff1a;Navicat11 开发软件&#xff1a;eclipse/myeclipse/idea Maven包&#xff1a;Maven3.3.9 浏览器…

Cygwin安装与Mingw

共同点&#xff1a;window下编译环境 区别&#xff1a;cygwin(gnu windows)模拟Linux编译环境&#xff0c; mingw模拟window编译环境&#xff0c;生成.exe可执行文件 目录 Cygwin安装 一、官网下载 二、双击安装 三、选择安装路径后&#xff0c;到连接方式如图 四、添加连…

USB3.0移动硬盘启动Win7的方法(AHCI/AMD USB3.0/Win7)

古董电脑(intel处理器&#xff0c;无USB3.0接口)突然坏了&#xff0c;已经没有维修价值了&#xff0c;硬盘还是完好的。欲把硬盘拆下来&#xff0c;装到USB3.0硬盘盒上&#xff0c;然后在新电脑(AMD R5-4650G/A520)上从USB3.0硬盘盒上启动。 一、需要工具 SATA数据线PS/2鼠标…

合并两个有序数组-力扣88-java

一、题目描述给你两个按 非递减顺序 排列的整数数组 nums1 和 nums2&#xff0c;另有两个整数 m 和 n &#xff0c;分别表示 nums1 和 nums2 中的元素数目。请你 合并 nums2 到 nums1 中&#xff0c;使合并后的数组同样按 非递减顺序 排列。注意&#xff1a;最终&#xff0c;合…

【mac】在m2 mbp上通过Parallels Desktop安装ubuntu22.04

文章目录前言一、参考文章二、版本信息三、方法1:通过ubuntu官网提供的iso安装3.1 配置服务器3.2 安装图形界面四、方法2:通过Parallels Desktop提供的安装包五、 小工具5.1 调整应用栏图标大小5.2 ubuntu获取mac的剪切板5.3 调整terminal字体大小5.4 安装samba5.5 ubuntu连接m…