首页 前端知识 页面已存在的svg转canvas

页面已存在的svg转canvas

2024-08-05 23:08:47 前端知识 前端哥 988 782 我要收藏

前言

最近接到一个需求是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后某些图层的位置和大小会不准确。

转载请注明出处或者链接地址:https://www.qianduange.cn//article/14853.html
标签
评论
发布的文章

JQuery的选择器有哪些?

2024-08-14 22:08:43

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!