页面已存在的svg转canvas

前言

最近接到一个需求是SVG导入到canvas画布的，首先想到的是利用第三方库例如 fabric.js 的loadURLFrom 方法和Canvg。 但是如果是外部的链接的话是可以，那么如果是页面已经存在的SVG呢？

举例：加载SVG渲染到页面，更换SVG图层的图片，然后SVG导入到CANVAS画布

此时第一个问题如何操作SVG图层里的图片？

解决方案：

1.加载外部的SVG到页面

           // 先创建一个盒子来承载SVG
            const svgUrl = 'yourSVGfile'
            const svgBox = document.createElement('div');
            document.body.appendChild(svgBox)

            let svgElement;
            // 通过XML请求解析加载SVG文件
            const xhr = new XMLHttpRequest();
            xhr.open('GET', svgUrl, true);
            xhr.onreadystatechange = () => {
                if (xhr.readyState === 4 && xhr.status === 200) {
                    svgElement = xhr.responseXML.documentElement;
                    svgElement.setAttribute('crossorigin', 'anonymous')
                    svgBox.appendChild(svgElement); // 最后添加到页面
                }
            };
            xhr.send();

2.修改SVG图层内的图片

// 创建一个函数来遍历SVG内的图层并且找到图片元素，更换href
// 我们替换图片需要传入要替换的图片，和节点的ID，这个id是PSD 的图层名称
const replaceImage = (img, id) =>{
    // 第一步我们已经渲染SVG到页面了，所以保存了SVG的DOM，这里直接使用
    const images = svgElement.getElementsByTagName('image');
        for (let i = 0; i < images.length; i++) {
            const image = images[i];
            const currentId = image.getAttribute('id');
            if (currentId === id) {
                // 找到你要替换的图层的id更换图片
                image.setAttribute('xlink:href', sourceImage);
            }
        }
}

3.修改后的SVG导入到CANVAS

// 使用facbric.js 或者canvg 都需要传入一个URL，所以我们需要生成一个临时的URL

// 传入我们要转换的为URL的文件，这里传入的就是SVG
const getBlobUrl = (svgElement) => {
 // SVG转换为XML字符串
        const xml = new XMLSerializer().serializeToString(svgElement)

        // 创建blob对象
        const blob = new Blob([xml], {type:'image/svg+xml;charset=utf-8'});
        return URL.createObjectURL(blob);
}

// 获取临时地址
const TempSvgUrl = getBlobUrl(svgElement);

// fabric 加载SVG
import { fabric } from 'fabric';
const myCanvas = new fabric.Canvas('canvas');
fabric.loadSVGFromURL(TempSvgUrl, (objects, options) => {
            URL.revokeObjectURL(TempSvgUrl) // 这里用完后就清除掉临时地址
            // 解析svg文件作为canvas对象添加到画布
            let obj = fabric.util.groupSVGElements(objects, options);
            obj.set({
                left: 0,
                top: 0
            })
            obj.hasControls = false;
            obj.padding = 0;
            myCanvass.add(obj);
            myCanvas.renderAll(); // 这里开始渲染 此时页CANVAS中应该已经看到SVG的图像了。
        })

// Canvg 加载SVG
import { Canvg } from 'canvg';

  const canvas = document.querySelector('canvas');
  const ctx = canvas.getContext('2d');

  v = await Canvg.from(TempSvgUrl);

  v.start(); // 开始渲染
  

总结

最初我在网上查找资料，找到一些方法比如使用 btoa(unescape(encodeURIComponent))，这种方法在我的场景下会提示文件字节太大，可能是因为SVG文件大最终转码成字符太大的原因。

canvg 和 fabric都可以实现SVG转CANVS，但是结果证明在我的场景下，fabric转CANVAS后的结果更理想，canvg转CANVAS后某些图层的位置和大小会不准确。