项目中使用svg格式的字符串转换图片并把图片插入到word和pdf文档

最新推荐文章于 2024-06-25 14:37:48 发布
最新推荐文章于 2024-06-25 14:37:48 发布
阅读量4.9k 收藏 1
点赞数 1
文章标签： java svg 图片 word pdf
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/fenfenguai/article/details/78376695
版权 
在用Highcharts做图表展示的时候使用到的功能。提供前端页面以及Java后台对svg格式的字符串转换为具体的图片
废话不多了直接上干货

主要代码 web端

<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"></meta>
    <title>日报警量</title>


    <script th:src="@{/highcharts/highcharts.js}"></script>
    <script th:src="@{/highcharts/modules/series-label.js}"></script>
    <script th:src="@{/highcharts/modules/exporting.js}"></script>
    <script th:src="@{/jquery/jquery-1.8.3.js}" type="text/javascript"></script>
    <script th:src="@{/highcharts/canvasjs/canvg.js}" type="text/javascript"></script>
    <script th:src="@{/highcharts/canvasjs/rgbcolor.js}" type="text/javascript"></script>
</head>
<body>

 <form th:id="submit">
     <input th:type="hidden" th:name="svg_data_rbjl"/>
     <input th:type="hidden" th:name="svg_data_container_xzddd"/>
     <input th:type="hidden" th:name="svg_data_container_common_dmhs"/>
     <input th:type="hidden" th:name="svg_data_container_common_lkhs"/>
     <input th:type="hidden" th:name="svg_data_container_common_szddd"/>
     <input th:type="hidden" th:name="svg_data_container_common_xzddd"/>
     <input th:type="hidden" th:name="type"/>

 </form>
<div>
    <input th:type="button" th:value="导出word文档" onclick="exportObj('WORD');"/> |
    <input th:type="button" th:value="导出pdf文档" onclick="exportObj('PDF');"/>
</div>
<div id="container" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
<hr/>
<div id="container_xzddd" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
<hr/>
<div id="container_common_dmhs" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
<hr/>
<div id="container_common_lkhs" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
<hr/>
<div id="container_common_szddd" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
<hr/>
<div id="container_common_xzddd" style="min-width: 310px; height: 400px; margin: 0 auto"></div>

<script type="text/javascript">
    //日报警量
    $.post("/getData_rbjl",{},function(data){
        if(data.success){
            Highcharts.chart('container', {
                chart: {
                    type: 'line'
                },
                title: {
                    text: data.title
                },
                subtitle: {
                    // text: 'Source: WorldClimate.com'
                },
                xAxis: {
                    //categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
                    categories:data.categories
                },
                yAxis: {
                    title: {
                        //text: 'Temperature (°C)'
                        text: ''
                    },
                    //tickPositions: [0, 1000, 2000, 3000,4000,5000]//Y坐标的刻度
                    tickPositions: data.tickPositions//Y坐标的刻度

                },
                plotOptions: {
                    line: {
                        dataLabels: {
                            enabled: true
                        },
                        enableMouseTracking: false
                    }
                },

                series:data.series
            });
        }

    })

    //测试-下堵点
    $.post("/getData_xzddd",{},function(data){
        if(data.success){
            Highcharts.chart('container_xzddd', {
                chart: {
                    type: 'line'
                },
                title: {
                    text: data.title
                },
                subtitle: {
                    // text: 'Source: WorldClimate.com'
                },
                xAxis: {
                    //categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
                    categories:data.categories
                },
                yAxis: {
                    title: {
                        //text: 'Temperature (°C)'
                        text: ''
                    },
                    //tickPositions: [0, 1000, 2000, 3000,4000,5000]//Y坐标的刻度
                    tickPositions: data.tickPositions//Y坐标的刻度

                },
                plotOptions: {
                    line: {
                        dataLabels: {
                            enabled: true
                        },
                        enableMouseTracking: false
                    }
                },
                series:data.series
            });
        }

    })

    //测试-红色
    $.post("/getData_common",{type:"dmhs"},function(data){
        if(data.success){
            Highcharts.chart('container_common_dmhs', {
                chart: {
                    type: 'line'
                },
                title: {
                    text: data.title
                },
                subtitle: {
                    // text: 'Source: WorldClimate.com'
                },
                xAxis: {
                    //categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
                    categories:data.categories
                },
                yAxis: {
                    title: {
                        //text: 'Temperature (°C)'
                        text: ''
                    },
                    //tickPositions: [0, 1000, 2000, 3000,4000,5000]//Y坐标的刻度
                    tickPositions: data.tickPositions//Y坐标的刻度

                },
                plotOptions: {
                    line: {
                        dataLabels: {
                            enabled: true
                        },
                        enableMouseTracking: false
                    }
                },
                series:data.series
            });
        }

    })

    //测试-蓝色
    $.post("/getData_common",{type:"lkhs"},function(data){
        if(data.success){
            Highcharts.chart('container_common_lkhs', {
                chart: {
                    type: 'line'
                },
                title: {
                    text: data.title
                },
                subtitle: {
                    // text: 'Source: WorldClimate.com'
                },
                xAxis: {
                    //categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
                    categories:data.categories
                },
                yAxis: {
                    title: {
                        //text: 'Temperature (°C)'
                        text: ''
                    },
                    //tickPositions: [0, 1000, 2000, 3000,4000,5000]//Y坐标的刻度
                    tickPositions: data.tickPositions//Y坐标的刻度

                },
                plotOptions: {
                    line: {
                        dataLabels: {
                            enabled: true
                        },
                        enableMouseTracking: false
                    }
                },
                series:data.series
            });
        }

    })

    //测试-上堵点
    $.post("/getData_common",{type:"szddd"},function(data){
        if(data.success){
            Highcharts.chart('container_common_szddd', {
                chart: {
                    type: 'line'
                },
                title: {
                    text: data.title
                },
                subtitle: {
                    // text: 'Source: WorldClimate.com'
                },
                xAxis: {
                    //categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
                    categories:data.categories
                },
                yAxis: {
                    title: {
                        //text: 'Temperature (°C)'
                        text: ''
                    },
                    //tickPositions: [0, 1000, 2000, 3000,4000,5000]//Y坐标的刻度
                    tickPositions: data.tickPositions//Y坐标的刻度

                },
                plotOptions: {
                    line: {
                        dataLabels: {
                            enabled: true
                        },
                        enableMouseTracking: false
                    }
                },
                series:data.series
            });
        }

    })

    //测试-下堵点
    $.post("/getData_common",{type:"xzddd"},function(data){
        if(data.success){
            Highcharts.chart('container_common_xzddd', {
                chart: {
                    type: 'line'
                },
                title: {
                    text: data.title
                },
                subtitle: {
                    // text: 'Source: WorldClimate.com'
                },
                xAxis: {
                    //categories: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']
                    categories:data.categories
                },
                yAxis: {
                    title: {
                        //text: 'Temperature (°C)'
                        text: ''
                    },
                    //tickPositions: [0, 1000, 2000, 3000,4000,5000]//Y坐标的刻度
                    tickPositions: data.tickPositions//Y坐标的刻度

                },
                plotOptions: {
                    line: {
                        dataLabels: {
                            enabled: true
                        },
                        enableMouseTracking: false
                    }
                },
                series:data.series
            });
        }

    })


    function exportObj(type) {

        var svg_data_rbjl ="";//日报警量
        var svg_data_container_xzddd = "";//下匝道报警量
        var svg_data_container_common_dmhs = "";//通用 测试-红色 日报警量
        var svg_data_container_common_lkhs = "";//通用 测试-蓝色 日报警量
        var svg_data_container_common_szddd = "";//通用 上匝道 日报警量
        var svg_data_container_common_xzddd = "";//通用 下匝道 日报警量
        var type = type;
        $.each(Highcharts.charts,function () {
            if(this.renderTo.id=="container"){
                svg_data_rbjl = this.getSVG();
            }else if(this.renderTo.id == "container_xzddd"){
                svg_data_container_xzddd = this.getSVG();
            }else if(this.renderTo.id == "container_common_dmhs"){
                svg_data_container_common_dmhs = this.getSVG();
            }else if(this.renderTo.id == "container_common_lkhs"){
                svg_data_container_common_lkhs = this.getSVG();
            }else if(this.renderTo.id == "container_common_szddd"){
                svg_data_container_common_szddd = this.getSVG();
            }else if(this.renderTo.id == "container_common_xzddd"){
                svg_data_container_common_xzddd = this.getSVG();
            }
        })

        $("#submit").attr("action","/export");
        $("#submit").attr("method","post");

        $("input[name='svg_data_rbjl']").val(svg_data_rbjl);//日报警量
        $("input[name='svg_data_container_xzddd']").val(svg_data_container_xzddd);//下匝道报警量
        $("input[name='svg_data_container_common_dmhs']").val(svg_data_container_common_dmhs);//通用 测试-红色 日报警量
        $("input[name='svg_data_container_common_lkhs']").val(svg_data_container_common_lkhs);//通用 测试-蓝色 日报警量
        $("input[name='svg_data_container_common_szddd']").val(svg_data_container_common_szddd);//通用 上匝道 日报警量
        $("input[name='svg_data_container_common_xzddd']").val(svg_data_container_common_xzddd);//通用 下匝道 日报警量
        $("input[name='type']").val(type);
        $("#submit").submit();

    }
</script>
</body>
</html>

主要代码 后端

  package com.splearn.svgtopng.web;

import com.lowagie.text.*;
import com.lowagie.text.pdf.BaseFont;
import com.lowagie.text.pdf.PdfWriter;
import com.lowagie.text.rtf.RtfWriter2;
import com.splearn.svgtopng.anylize.HighchartsDataUtils;
import com.splearn.svgtopng.common.SvgPngConverter;
import org.apache.batik.transcoder.TranscoderException;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
import org.springframework.web.bind.annotation.ResponseBody;

import javax.servlet.ServletOutputStream;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.*;
import java.net.URLEncoder;
import java.util.ArrayList;
import java.util.HashMap;
import java.util.List;
import java.util.Map;

/**
 * Description( Hightcharts 图表数据导出并生成word 的demo)
 * author: gaoxueyong
 */
@Controller
public class IndexController {


    @RequestMapping("/index")
    public String index() {
        return "index";
    }


    @RequestMapping( value = "/getData_rbjl", method = RequestMethod.POST)
    @ResponseBody
    public Map<String,Object> getHighchartsData_rbjl() throws IOException {

        String file_path = "D:\\idea_workspace\\GitHub\\SvgtoPng\\src\\main\\java\\com\\splearn\\svgtopng\\anylize\\test_data.txt";
        Map<String,Object> result = new HashMap<String,Object>();
        result = HighchartsDataUtils.alarm_cnt_ts_rbjl(file_path);
        result.put("title","日报警量");
        return result;
    }


    @RequestMapping( value = "/getData_xzddd", method = RequestMethod.POST)
    @ResponseBody
    public Map<String,Object> getHighchartsData_xzddd() throws IOException {

        String file_path = "D:\\idea_workspace\\GitHub\\SvgtoPng\\src\\main\\java\\com\\splearn\\svgtopng\\anylize\\test_data.txt";
        Map<String,Object> result = new HashMap<String,Object>();
        result = HighchartsDataUtils.alarm_cnt_ts_xzddd(file_path,"测试-下堵点");
        result.put("title","测试-下堵点");
        return result;
    }

    @RequestMapping( value = "/getData_common", method = RequestMethod.POST)
    @ResponseBody
    public Map<String,Object> getHighchartsData_common(HttpServletRequest request, HttpServletResponse response) throws IOException {

        Map<String,Object> result = new HashMap<String,Object>();
        String file_path = "D:\\idea_workspace\\GitHub\\SvgtoPng\\src\\main\\java\\com\\splearn\\svgtopng\\anylize\\test_data.txt";

        String type  = request.getParameter("type");//dmhs  lkhs szddd xzddd
        List<Integer> tick_positions_list = new ArrayList<Integer>();
        if("dmhs".equals(type)){

            tick_positions_list = new ArrayList<Integer>();
            tick_positions_list.add(0);
            tick_positions_list.add(200);
            tick_positions_list.add(400);
            tick_positions_list.add(600);
            tick_positions_list.add(800);
            tick_positions_list.add(1000);
            result = HighchartsDataUtils.alarm_cnt_ts_common(file_path,tick_positions_list,"测试-红色");
        }else if("lkhs".equals(type)){

            tick_positions_list = new ArrayList<Integer>();
            tick_positions_list.add(0);
            tick_positions_list.add(1000);
            tick_positions_list.add(2000);
            tick_positions_list.add(3000);
            tick_positions_list.add(4000);
            tick_positions_list.add(5000);
            result = HighchartsDataUtils.alarm_cnt_ts_common(file_path,tick_positions_list,"测试-蓝色");
        }else if("szddd".equals(type)){

            tick_positions_list = new ArrayList<Integer>();
            tick_positions_list.add(0);
            tick_positions_list.add(100);
            tick_positions_list.add(200);
            tick_positions_list.add(300);
            tick_positions_list.add(400);
            tick_positions_list.add(500);
            tick_positions_list.add(600);
            result = HighchartsDataUtils.alarm_cnt_ts_common(file_path,tick_positions_list,"测试-上堵点");
        }else if("xzddd".equals(type)){

            tick_positions_list = new ArrayList<Integer>();
            tick_positions_list.add(0);
            tick_positions_list.add(5);
            tick_positions_list.add(10);
            tick_positions_list.add(15);
            tick_positions_list.add(20);
            result = HighchartsDataUtils.alarm_cnt_ts_common(file_path,tick_positions_list,"测试-下堵点");
        }

        return result;
    }


    @RequestMapping( value = "/export",method = RequestMethod.POST)
    public void convertToPng(HttpServletRequest request, HttpServletResponse response) throws IOException, DocumentException, com.itextpdf.text.DocumentException {

        long start  = System.currentTimeMillis();
        Map<String,Object> ret_map = new HashMap<String, Object>();
        ret_map.put("success",false);
        ret_map.put("msg","生成Word失败!");
        try {

            List<String> pic_path_list = new ArrayList<String>();

            //日报警量
            String svg_data_rbjl = request.getParameter("svg_data_rbjl");
            //System.out.println("svg_data_rbjl"+svg_data_rbjl);
            String png_path = "D:\\export\\svg_data_rbjl.png";
            //生成图片
            SvgPngConverter.convertToPng(svg_data_rbjl,png_path);
            pic_path_list.add(png_path);

            //下匝道报警量
            String svg_data_container_xzddd = request.getParameter("svg_data_container_xzddd");
            //System.out.println("svg_data_rbjl"+svg_data_rbjl);
            png_path = "D:\\export\\svg_data_container_xzddd.png";
            //生成图片
            SvgPngConverter.convertToPng(svg_data_container_xzddd,png_path);
            pic_path_list.add(png_path);

            //通用 测试-红色 日报警量
            String svg_data_container_common_dmhs = request.getParameter("svg_data_container_common_dmhs");
            //System.out.println("svg_data_rbjl"+svg_data_rbjl);
            png_path = "D:\\export\\svg_data_container_common_dmhs.png";
            //生成图片
            SvgPngConverter.convertToPng(svg_data_container_common_dmhs,png_path);
            pic_path_list.add(png_path);

            //通用 测试-蓝色 日报警量
            String svg_data_container_common_lkhs = request.getParameter("svg_data_container_common_lkhs");
            //System.out.println("svg_data_rbjl"+svg_data_rbjl);
            png_path = "D:\\export\\svg_data_container_common_lkhs.png";
            //生成图片
            SvgPngConverter.convertToPng(svg_data_container_common_lkhs,png_path);
            pic_path_list.add(png_path);

            //通用 上匝道 日报警量
            String svg_data_container_common_szddd = request.getParameter("svg_data_container_common_szddd");
            //System.out.println("svg_data_rbjl"+svg_data_rbjl);
            png_path = "D:\\export\\svg_data_container_common_szddd.png";
            //生成图片
            SvgPngConverter.convertToPng(svg_data_container_common_szddd,png_path);
            pic_path_list.add(png_path);

            //通用 下匝道 日报警量
            String svg_data_container_common_xzddd = request.getParameter("svg_data_container_common_xzddd");
            //System.out.println("svg_data_rbjl"+svg_data_rbjl);
            png_path = "D:\\export\\svg_data_container_common_xzddd.png";
            //生成图片
            SvgPngConverter.convertToPng(svg_data_container_common_xzddd,png_path);
            pic_path_list.add(png_path);


            //写入doc

            List<String> list_content = new ArrayList<String>();

            list_content.add("    本周（2017/10/02 - 2017/10/08）平台总体报警数量 7960，上周（2017/09/25 - 2017/10/01）平台总体报警数量 26607，环比下降 70.08%。    ");
            list_content.add("     \uF06C\t测试-红色本周平台总体报警数量 2591，上周平台总体报警数量 3195，环比下降  18.90%。");
            list_content.add("     \uF06C\t测试-上堵点本周平台总体报警数量 992，上周平台总体报警数量 2330，环比下降  57.42%。");
            list_content.add("     \uF06C\t测试-蓝色本周平台总体报警数量 4365，上周平台总体报警数量 21071，环比下降 79.28%。");
            list_content.add("     \uF06C\t测试-下堵点本周平台总体报警数量 12，上周平台总体报警数量 11，环比上升 9.09%。 ");

            String type = request.getParameter("type");
            String base_path =  request.getContextPath()+"/temp/";
            String file_path = "";
            File file = new File(base_path);
            if(!file.exists()){
                file.mkdir();
            }

            String file_name =  "日报警量.doc";
            if(type.equals("PDF")){
                file_name=  "日报警量.pdf";
            }
            file_path = base_path+file_name;

            //输入流
            InputStream fin = null;
            //输出流
            ServletOutputStream out = response.getOutputStream();

            response.setCharacterEncoding("utf-8");
            response.setContentType("multipart/form-data");
            // 设置浏览器以下载的方式处理该文件名
            response.setHeader("Content-Disposition", "attachment;filename=" .concat(String.valueOf(URLEncoder.encode(file_name, "UTF-8"))));
            //生成临时文件
            createWordORPDF(file_path,list_content,pic_path_list,type);
            //读取临时文件
            fin = new FileInputStream(file_path);
            byte[] buffer = new byte[512];  // 缓冲区
            int bytesToRead = -1;
            // 通过循环将读入的Word文件的内容输出到浏览器中
            while((bytesToRead = fin.read(buffer)) != -1) {
                out.write(buffer, 0, bytesToRead);
            }
            //删除临时文件
            File temp_file = new File(file_path);
            if(temp_file.exists()){
                temp_file.delete();
            }
            if(fin!=null){

                fin.close();
            }
            if(out!=null){

                out.close();

            }



            ret_map.put("success",true);
            ret_map.put("msg","生成Word成功! 耗时："+((System.currentTimeMillis()-start)/1000)+"秒");
        } catch (IOException e) {
            ret_map.put("msg","生成Word出现异常!原因："+e.getMessage());
            e.printStackTrace();
        } catch (TranscoderException e) {
            ret_map.put("msg","生成Word出现异常!原因："+e.getMessage());
            e.printStackTrace();
        }finally {
           // return  ret_map;
        }

    }


    public void createWordORPDF(String path,List<String> list_content,List<String> pic_path_list,String type) throws IOException, DocumentException{
            BaseFont bfChinese = BaseFont.createFont("STSong-Light", "UniGB-UCS2-H", BaseFont.NOT_EMBEDDED);

            Document doc = new Document(PageSize.A4, 20, 20, 20, 20);

            if("WORD".equals(type)){
                RtfWriter2.getInstance(doc, new FileOutputStream(path));
            }else if("PDF".equals(type)){
                PdfWriter.getInstance(doc, new FileOutputStream(path));
            }
            doc.open();

            //标题字体
            Font titleFont = new Font(bfChinese,20,Font.BOLD);
            String doctitle=  "总体分析";
            // 标题
            Paragraph title = new Paragraph(doctitle, titleFont);
            title.setAlignment(Element.ALIGN_CENTER);
            doc.add(title);


        for(String content:list_content){

            //正文字体风格
            Font contextFont = new Font(bfChinese,10,Font.NORMAL);
            Paragraph context = new Paragraph(content,contextFont);
            context.setAlignment(Element.ALIGN_LEFT);
            //段间距
            context.setSpacingBefore(3);

            //内容
            doc.add(context);

            //换行
            // document.add(new Paragraph("\n"));
        }

        //插如图片
        Image img = null;
        for(String pic_path:pic_path_list){

            // 图片
            img = Image.getInstance(pic_path);
            //img = Image.getInstance(svg_data.getBytes());
            float heigth = img.getHeight();
            float width = img.getWidth();
            int percent = getPercent(heigth, width);
            img.setAlignment(Image.MIDDLE);
            img.scalePercent(percent + 3);// 表示是原来图像的比例;
            doc.add(img);
        }
        doc.close();


    }


    public static int getPercent(float h, float w) {
        int p = 0;
        float p2 = 0.0f;
        p2 = 530 / w * 100;
        p = Math.round(p2);
        return p;
    }

}

页面展示效果
生成WORD效果
生成PDF效果
具体代码：
https://github.com/wahnn/SvgtoPng
https://gitee.com/wahnn/SvgtoPng/tree/master
参考过一些网络资源如：
http://blog.csdn.net/zwx19921215/article/details/34442593

朽木要自雕
关注
  • 1
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
svg-to-json:将SVG字符串转换为JSON
05-15
#SVG到JSON一种将SVG字符串转换为JSON数据并可选地呈现统计信息的方法。 #Usage创建新实例，提供svg字符串，还可以选择传入options 。 var svg_json = new SVGToJSON ( svg [ , options ] ) ; #API ## Object.json SVGToJSON()返回一个对象。 OBJ.json是主要的JSON数据。 它是所有SVG标签的数组。 var svg_json = new SVGToJSON ( svg ) ; svg_json = { json : [ ... ] } ## Object.json [I]中的每个标签Object.json有四个值。 var first_tag = svg_json . json [ 0 ] ; first_tag = { attrs : { "h
svg文件转标签形式（字符串）。MultipartFile转File
qq_37337660的博客
01-23 2136
svg转string 直接存库。
探索如何将html和svg导出为图片
最新发布
2401_83384536的博客
06-25 990
解决了在firefox浏览器上foreignObject标签为空的问题后，自然会怀疑之前使用img结合canvas导出图片时foreignObject标签为空会不会也是因为这个问题，同时了解了一下dom-to-image库的实现原理，发现它也是通过将dom节点添加到svg的foreignObject标签中实现将html转换成图片的，那么就很搞笑了，我本身要转换的内容就是一个嵌入了foreignObject标签的svg，使用dom-to-image转换，它会再次把传给它的svg添加到一个foreignObje
将前端svg图片存为字符串，供world模板使用
qfashly的博客
03-09 2705
转载请注明：https://blog.csdn.net/qfashly/article/details/79498524 最近由于业务需要，需要将前端查询的数据在浏览器上以图片的形式展示，然后回传到后台供导出world使用；如果将图片存为文件形式，则性能和效率太差，所以使用highcharts.js将数据渲染成图片，再使用js将svg图片传回，使用Base64将svg转换成String，供导出w...
SVG路径字符串格式
打杂人
12-17 1141
命令 名称 参数 M 移动到（moveTo） (x y)+ Z 闭合路径（closepath） (none) L 直线（lineTo） (x y)+ H 水平直线 x+ V 垂直直线 y+ C 曲线（curveto） (x1 y1 x2 y2 x y)+ S 平滑曲线 (x2...
svg字符串在react中的使用
qq_41662017的博客
10-25 771
需求：svg字符串在react中不用dangerouslySetInnerHTML如何呈现 const img = '字符串'; <img src={`data:image/svg+xml;utf8,${encodeURIComponent(img)}`/>
Python3.7将普通图片(png)转换为SVG图片格式(网站logo图标)动起来
09-17
本文将详细介绍如何使用Python 3.7将PNG格式的普通图片转换为SVG格式，并进一步探讨如何使这些SVG图标具备动画效果，从而为网站增添更多的活力与互动性。 #### 一、Python与图像处理基础 在开始介绍具体的转换过程...
convert-svg-image:将 svg 字符串转换为任何图像
06-07
然后，在JavaScript代码中，你可以使用以下方式将SVG字符串转换为PNG图片： ```javascript const convertSvgImage = require('convert-svg-image'); const svgString = '<svg width="100" height="100">...
Android 中使用svg图片
01-20
为了在Android中使用SVG，可以将SVG文件转换为Android支持的Vector Drawable格式。有一些在线工具，如[https://editor.method.ac/](https://editor.method.ac/) 和 [http://svg.zhangningning.com.cn/]...
Android把svg图片转为jpg保存到相册图库
08-30
在Android开发中，SVG（Scalable Vector Graphics）是一种用于描述二维图形的矢量图格式，它可以无限放大而不失真，但原生的Android系统并未内置SVG图片的查看支持。因此，当用户需要将SVG图片保存到相册或图库时，...
.net 将SVG标签代码转成图片格式
06-05
总结来说，使用.NET和SVG.dll库在VS2012中进行SVG到PNG的转换是一个简单的过程，主要包括导入SVG库、创建SVG文档实例、设置图像尺寸、渲染SVG到Bitmap，最后保存Bitmap为PNG文件。这个功能对于.NET开发者在处理SVG...
SVG字符串直接保存为png图片
Dxy1239310216的博客
07-07 900
采集到的SVG图片数据是字符串，我想直接将SVG xml字符串转换成图片，而不是保存一下再转。
获取Highcharts图片流(svg)通过java2word插入到word文档里
qq_26477105的专栏
05-15 3066
前段时间经理让我做个导出功能，我找了很多东西，后来发现java2word操作最简单，但是有个很大的问题就是只支持window系统，还有就是要安装一个Java2Word.exe的文件，安装完后步如下： 1).先安装.exe文件(在文件中有此文件),把java2word.jar复制到lib目录下 2).安装好后，如果系统是32位的，那么在C:\Windows\System32 中有一个jacob.dll
html div 转换图片,Javascript – 将带有SVG的HTML div转换为图像
weixin_42393526的博客
05-31 316
我想你正在处理一些svg到位图转换的边缘情况.我不确定html2canvas使用哪种方法,但它肯定缺少这里的东西.我编写了一个函数来处理一些在调用html2canvas之前可以使用的边缘情况,因为它能够毫无问题地绘制位图.// without converting the svg to pnghtml2canvas(contentDiv, {onrendered: function(can) {d...
svg-blob怎么将svg字符串保存为.svg图片
weixin_35749786的博客
02-10 487
要将SVG字符串保存为.svg图片，你可以使用SVG-Blob库。 你可以这样做： 安装SVG-Blob：npm install svg-blob 在你的代码中引入SVG-Blob：import { SVGBlob } from 'svg-blob' 使用SVGBlob类的toBlob()方法将SVG字符串转换为Blob对象： const svgString = '<svg xml...
SVG或PNG图片颜色修改：JS 动态更改svg格式字符串的颜色、svg格式字符串转url、使用svg加载器svg-sprite-loader动态改变svg颜色、使用drop-shadow修改图片颜色
icemwj的博客
07-14 2548
SVG或PNG图片颜色修改：JS 动态更改svg格式字符串的颜色、svg格式字符串转url、使用svg加载器svg-sprite-loader动态改变svg颜色、使用drop-shadow修改图片颜色
java处理word公式（wmf格式转换成svg）（svg格式转换成png）
gaoxiang24的博客
02-10 3464
wmf格式转换成svg把wmf格式转成svg格式，这样就能在浏览器中显示了需要第三方jar包：wmf2svg-0.9.6.jar//wmf格式的图片转换成svg格式 private void convert(String file,String dest) throws Exception{ InputStream in = new FileInputStream(...
【ChatGPT】Spire.Doc 插入SVG图形到Word文档
bill.zou的专栏
03-11 438
接下来，我们还调整了图形的大小，使其适合文档中的显示。最后，我们将文档保存到磁盘上的文件中，以便在Word中打开和查看。请注意，为了使用Spire.Doc组件，你需要先安装该组件，并将其添加到你的项目中。你可以在Spire.Doc的官方网站上找到更多关于该组件的信息和使用方法。要在Word文档中插入SVG图形，可以使用Spire.Doc组件来实现。在上面的示例代码中，我们首先创建一个新的Word文档，并向其中添加一个段落。方法传入SVG文件路径并创建一个DocPicture对象。
java svg 转pdf_Java PDF转HTML、Word、图片、SVG、XPS、 PDF/A等格式
weixin_30616309的博客
02-16 263
这篇文章介绍如何在Java应用程序中将PDF转换为HTML、Word、图片、SVG、XPS、PDF/A等格式。本文所使用的PDF组件：Free Spire.PDF for JavaFree Spire.PDF for Java是一个免费Java PDF组件，支持创建PDF文档、操作现有PDF文档，以及将PDF文件转换为其他文件格式，同时也支持将其他文件格式如XPS转换为PDF格式。使用以下代码前，...
js 将字符串转换为SVG图片
12-20
可以使用不同的方法将字符串转换为SVG图片。以下是两种常见的方法： 1. 使用SVGToJSON库将SVG字符串转换为JSON数据，并可选地呈现统计信息。首先，你需要创建一个SVGToJSON实例，提供SVG字符串和可选的选项。然后，...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值