使用svg绘制后下载svg内部嵌套image图片问题

luckum

于 2024-01-25 10:16:40 发布

阅读量423

点赞数 8

文章标签： javascript 开发语言 ecmascript

本文链接：https://blog.csdn.net/luckum/article/details/135699306

版权

svg里面包裹image标签，需求是将此svg转换为普通图片类型并将其下载到本地

1. 首先image图片地址转换为base64格式的才可以

传入图片路径转为图片

const getImageUrlBase64 = (url) => {
        const img = new Image();
        img.crossOrigin = 'anonymous';//处理跨域，后端也要设置跨域处理才行
        img.src = url;
        img.onload = () => {
            console.log("成功")
            toBase64(img);
        }
    }
    getImageUrlBase64("./images/1/1.png")
 const toBase64 = (img) => {
        var canvas = document.createElement("canvas");
        canvas.width = 842;
        canvas.height = 595;
        var context = canvas.getContext("2d");
        context.fillStyle = "#fff"; // 设置保存后的PNG 是白色的
        context.fillRect(0, 0, 842, 595);
        context.drawImage(img, 0, 0, 842, 595);  //进行绘制图片
        var url = canvas.toDataURL("image/jpeg"); // 得到的base64编码
        newImgUrl = url;
        // console.log(newImgUrl, 'newImgUrlnewImgUrl')
        //var demoImg = document.getElementById("demoImg");
        //demoImg.setAttribute("href", newImgUrl)
    }

2.完成的html例子如下


<!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>Document</title>
</head>
<body>
     <svg width="842" height="595" version="1.1" xmlns:svgjs="http://svgjs.dev/svgjs" id="svgColumn" viewBox="0 0 842 595">
        <image id="demoImg" width="842" height="595" href="./images/1/1.png" x="0" y="0">              </image>
        <text dominant-baseline="central" text-anchor="start" id="page1" x="160.00" y="194.00"
          class="normal_text" svgjs:data="{&quot;leading&quot;:&quot;1.3&quot;}">
        <tspan class="simkai_font" font-size="18.00" font-weight="900" id="fromjz1Name">
背景图片上的文字1
        </tspan>
        <tspan class="simkai_fontstu" font-size="16.00" font-weight="900" id="fromjz1Title">背景图片上的文字1
         </tspan>
        </text>
   </svg>
    <button id="download">下载按钮</button>
</body>
<script>
 传入图片路径转为图片
const getImageUrlBase64 = (url) => {
        const img = new Image();
        img.crossOrigin = 'anonymous';//处理跨域，后端也要设置跨域处理才行
        img.src = url;
        img.onload = () => {
            console.log("成功")
            toBase64(img);
        }
    }
 getImageUrlBase64("./images/1/1.png")
 let newImgUrl = '';
 const toBase64 = (img) => {
        var canvas = document.createElement("canvas");
        canvas.width = 842;
        canvas.height = 595;
        var context = canvas.getContext("2d");
        context.fillStyle = "#fff"; // 设置保存后的PNG 是白色的
        context.fillRect(0, 0, 842, 595);
        context.drawImage(img, 0, 0, 842, 595);  //绘制图片
        var url = canvas.toDataURL("image/jpeg"); // 得到的base64编码
        newImgUrl = url;
        // console.log(newImgUrl, 'newImgUrlnewImgUrl')
        var demoImg = document.getElementById("demoImg");
        demoImg.setAttribute("href", newImgUrl)
    }
    let downEle = document.getElementById(`download`);
    downEle.addEventListener("click", function () {
        downloadpng();
    })
    function downloadpng() {
       let rootNode = document.getElementById('svgColumn');
       console.log(rootNode,'rootNode')
       const {width,height} = rootNode.getBoundingClientRect();
       console.log(width,height,'width==heught')
       covertSVGImage(rootNode,'test',width,height,'jpeg')
    }
   function covertSVGImage(node, name, width, height, type='png'){
       console.log('serializer','serializer')
      let serializer = new XMLSerializer();
      let source = '<?xml version="1.0" standalone="no"?>\r\n' + serializer.serializeToString(node);
      let image = new Image();
      let canvas = document.createElement('canvas');
      canvas.width = width;
      canvas.height = height;
      let context = canvas.getContext('2d');
      context.fillStyle = '#fff';
      context.fillRect(0, 0, width, height);
      image.src = 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(source);
     console.log(image.src,'image.src')
     image.onload = function() {
    context.drawImage(image, 0, 0,width,height);
    let a = document.createElement('a');
    a.download = `${name}.${type}`;
    a.href = canvas.toDataURL(`image/${type}`);
    a.click();
  };
  }
</script>
</html>

3.因为图片需要跨域，在本地建了一个服务server.js 用git bash运行node server

内容如下

const http = require('http');
const fs = require('fs');
const path = require('path');
const url = require('url');

// 定义静态文件目录路径
const staticDirPath = './www'; // 这里假设静态文件存放在当前项目根目录下的 public 文件夹中
// 处理HTTP GET请求并返回对应的静态文件内容
function handleRequest(req, res) {
    const fileUrl = req.url; // 获取客户端发送过来的URL地址
    if (fileUrl === '/') {
        // 如果请求的是根路径（/）则默认返回index.html页面
        return sendFileContent(res, 'index.html', 'text/html');
    } else {
        // 否则按照URL地址去查找相应的静态文件并返回
        return sendFileContent(res, fileUrl);
    }
}

// 向客户端发送指定文件的内容
function sendFileContent(res, fileName, contentType = 'application/octet-stream') {
    const parsedUrl = url.parse(fileName, true); // true表示将查询字符串解析为对象
    const fileNames = parsedUrl.pathname; // 获取路径部分
    const filePath = path.join(__dirname, staticDirPath, fileNames); // 构造完整的文件路径
    console.log(filePath)
    try {
        const data = fs.readFileSync(filePath); // 同步读取文件内容
        res.writeHead(200, { 'Content-Type': contentType }); // 设置响应头部信息
        res.end(data); // 将文件内容作为响应体发送给客户端
    } catch (err) {
        console.error(`Error reading file ${fileName}:`, err);
        res.statusCode = 404; // 若无法找到文件则返回404错误状态码
        res.end();
    }
}

// 创建HTTP服务器并监听3000端口
const server = http.createServer((req, res) => {
    handleRequest(req, res);
}).listen(3000, () => {
    console.log('Static resource container is running on port 3000...');
});