将svg图片改成jpg/png的file类型
const getImgFileUrl = useCallback(() => {
let con = containerRef.current as unknown as HTMLElement;
const svg = con.querySelector('svg') as SVGElement;
const image = new Image();
// 在Image对象加载完成后执行回调函数
image.onload = function () {
// 创建一个canvas元素
const canvas = document.createElement('canvas');
const ctx = canvas.getContext('2d') as CanvasRenderingContext2D;
// 设置canvas的尺寸与SVG容器相同
canvas.width = svg.getAttribute('width').replace('px', '');
canvas.height = svg.getAttribute('height').replace('px', '');
// 在canvas上绘制SVG图像
ctx.drawImage(image, 0, 0, canvas.width, canvas.height);
// 将canvas转换为DataURL
const dataUrl = canvas.toDataURL(`image/${imgType.toLowerCase()}`); // 或者 "image/jpeg"
// 将DataURL转换为Blob对象
const blob = dataURLtoBlob(dataUrl);
// 创建一个File对象
const file = new File([blob], `image.${imgType.toLowerCase()}`, {
type: `image/${imgType.toLowerCase()}`,
}); // 或者 "image/jpeg"
// 可以将file对象上传到服务器
getImgUrl(file);
};
const svgData = new XMLSerializer().serializeToString(con.querySelector('svg') as SVGElement);
image.src = 'data:image/svg+xml;charset=utf-8,' + encodeURIComponent(svgData);
}, [imgType]);