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