解决使用svg绘制后下载图片以及下载svg内部嵌套image图片失败的问题。

在使用svg进行图形绘制之后，可能需要下载已经绘制的svg图片，我们可能会遇到以下两种情况：
情况1：

    <svg width="640" height="400" xmlns="http://www.w3.org/2000/svg" id="svgColumn">
        <text x="200" y="20" font-size="20">SVG 华东地区手机12个月的数据 柱状图</text>
        <line x1="20" y1="380" x2="620" y2="380" stroke="black" stroke-width="1.5" />
        <line x1="20" y1="380" x2="20" y2="1" style="stroke: black; stroke-width: 1.5" />
        <path d="M600 360 L620 380 L600 400 Z" style="stroke: black; stroke-width: 1" />
        <path d="M1 20 L20 1 L40 20 Z" style="stroke: black; stroke-width: 1" />
    </svg>
1
2
3
4
5
6
7

情况2：

    <svg width="640" height="400" xmlns="http://www.w3.org/2000/svg" id="svgColumn">
        <text x="200" y="20" font-size="20">SVG 华东地区手机12个月的数据 柱状图</text>
        <line x1="20" y1="380" x2="620" y2="380" stroke="black" stroke-width="1.5" />
        <line x1="20" y1="380" x2="20" y2="1" style="stroke: black; stroke-width: 1.5" />
        <path d="M600 360 L620 380 L600 400 Z" style="stroke: black; stroke-width: 1" />
        <path d="M1 20 L20 1 L40 20 Z" style="stroke: black; stroke-width: 1" />
        <image id="demoImg" width="250" href="./2ad33d6ed244630e8526343c390156e5.jpeg">
        </image>
    </svg>
1
2
3
4
5
6
7
8
9

第一种是svg内部都是使用svg的方法进行绘制的，我们可以直接通过canvas的方法进行绘制下载，方法如下

    let downEle = document.getElementById(`download`);

    downEle.addEventListener("click", function () {
        downloadpng();
    })

    function downloadpng() {
        let rootNode = document.getElementById(`svgColumn`);
        var serializer = new XMLSerializer();
        var source =
            '\r\n' +
            serializer.serializeToString(rootNode);

        var image = new Image();
        image.src =
            "data:image/svg+xml;charset=utf-8," + encodeURIComponent(source);

        image.onload = () => {
            var canvas = document.createElement("canvas");
            canvas.width = 640;
            canvas.height = 500;
            var context = canvas.getContext("2d");
            context.fillStyle = "#fff"; //设置背景
            context.fillRect(0, 0, 640, 500);
            context.drawImage(image, 0, 0, 640, 500, 0, 0, 640, 500);   //进行绘制图片
            var url = canvas.toDataURL("image/jpeg"); // 这就是得到的base64编码
            var pngName = `${this.phaseId}`;
            var a = document.createElement("a");
            a.download = '测试名字' + ".jpeg";
            a.href = url;
            a.click();
        };
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33

第二种情况是在svg内部嵌套了一个image的图片，此时则无法使用第一种方法直接进行下载，下载的图片无内嵌图片，后来通过调查发下，需要把image引入的图片的路径更改微base64的方法后，再进行下载则可以实现，并解决问题。方法如下。

   let newImgUrl = ''

    //图片转化base64
    const toBase64 = (img) => {
        var canvas = document.createElement("canvas");
        canvas.width = 250; 
        canvas.height = 250;
        var context = canvas.getContext("2d");
        context.fillStyle = "#fff"; // 设置保存后的PNG 是白色的
        context.fillRect(0, 0, 250, 250);
        context.drawImage(img, 0, 0, 250, 250);  //进行绘制图片
        var url = canvas.toDataURL("image/jpeg"); // 这就是得到的base64编码
        newImgUrl = url;
        console.log(newImgUrl,'newImgUrlnewImgUrl')
        var demoImg = document.getElementById("demoImg");         

        demoImg.setAttribute("href",newImgUrl)
    }


    //传入路径转化成图片
    const getImageUrlBase64 = (url) => {
        const img = new Image();
        img.crossOrigin = 'anonymous';//处理跨域，后端也要设置跨域处理才行
        img.src = url;
        img.onload = () => {
            toBase64(img);
        }
    }


    getImageUrlBase64("./2ad33d6ed244630e8526343c390156e5.jpeg")  //传入需要更改的路径
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32

通过此种方法就可以解决svg内部嵌套image图片下载异常的问题了。

完成的html例子如下，本地调试的话，可以把html文件单独放在文件夹内，内嵌一张自己的图片，打开vscode 使用 Open with live server插件即可进行调试使用。

DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Documenttitle>
head>

<body>
    <svg width="640" height="400" xmlns="http://www.w3.org/2000/svg" id="svgColumn">
        <text x="200" y="20" font-size="20">SVG 华东地区手机12个月的数据 柱状图text>
        <line x1="20" y1="380" x2="620" y2="380" stroke="black" stroke-width="1.5" />
        <line x1="20" y1="380" x2="20" y2="1" style="stroke: black; stroke-width: 1.5" />
        <path d="M600 360 L620 380 L600 400 Z" style="stroke: black; stroke-width: 1" />
        <path d="M1 20 L20 1 L40 20 Z" style="stroke: black; stroke-width: 1" />
        <image id="demoImg" width="250" href="./2ad33d6ed244630e8526343c390156e5.jpeg">
        image>
    svg>

    <button id="download">下载按钮button>
body>

<script>
    let downEle = document.getElementById(`download`);

    downEle.addEventListener("click", function () {
        downloadpng();
    })

    function downloadpng() {
        let rootNode = document.getElementById(`svgColumn`);
        var serializer = new XMLSerializer();
        var source =
            '\r\n' +
            serializer.serializeToString(rootNode);

        var image = new Image();
        image.src =
            "data:image/svg+xml;charset=utf-8," + encodeURIComponent(source);

        image.onload = () => {
            var canvas = document.createElement("canvas");
            canvas.width = 640;
            canvas.height = 500;
            var context = canvas.getContext("2d");
            context.fillStyle = "#fff"; //设置背景
            context.fillRect(0, 0, 640, 500);
            context.drawImage(image, 0, 0, 640, 500, 0, 0, 640, 500);   //进行绘制图片
            var url = canvas.toDataURL("image/jpeg"); // 这就是得到的base64编码
            var pngName = `${this.phaseId}`;
            var a = document.createElement("a");
            a.download = '测试名字' + ".jpeg";
            a.href = url;
            a.click();
        };
    }

    let newImgUrl = ''

    //图片转化base64
    const toBase64 = (img) => {
        var canvas = document.createElement("canvas");
        canvas.width = 250; 
        canvas.height = 250;
        var context = canvas.getContext("2d");
        context.fillStyle = "#fff"; // 设置保存后的PNG 是白色的
        context.fillRect(0, 0, 250, 250);
        context.drawImage(img, 0, 0, 250, 250);  //进行绘制图片
        var url = canvas.toDataURL("image/jpeg"); // 这就是得到的base64编码
        newImgUrl = url;
        console.log(newImgUrl,'newImgUrlnewImgUrl')
        var demoImg = document.getElementById("demoImg");         

        demoImg.setAttribute("href",newImgUrl)
    }
    //传入路径转化成图片
    const getImageUrlBase64 = (url) => {
        const img = new Image();
        img.crossOrigin = 'anonymous';//处理跨域，后端也要设置跨域处理才行
        img.src = url;
        img.onload = () => {
            toBase64(img);
        }
    }
    getImageUrlBase64("./2ad33d6ed244630e8526343c390156e5.jpeg")  //传入需要更改的路径
script>

html>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89

文件夹截图：
在这里插入图片描述
效果图：

下载的效果图：
在这里插入图片描述

如有问题请评论沟通

相关阅读:
视觉-相机、镜头选择
 学习网络编程No.10【深入学习HTTPS】
python+vue_django编程语言在线学习平台
 爬虫业务为什么一定要用住宅代理辅助
 VUE3学习
 URLDNS反序列化链学习
 React中setState方法详细讲解
 前端经典面试题 | 闭包的作用和原理
 coco格式转yolo格式，标注软件是旷世labelbee
Socks5代理与IP代理：网络安全与爬虫中的应用
原文地址：https://blog.csdn.net/m54584mnkj/article/details/127921046