JS实现canvas、svg元素编码并保存到本地

公共方法：

// 将图片列表以压缩包的形式下载到本地（该方法在下面会用到）
// imageList为图片的编码列表，
const downloadImgZip = (imageList: any[]) => {
    const imgUrlList = imageList.map((v: any) => {
        return {
            name: v.name,
            base64: v.src.slice(22)
        }
    });

    data2JSzip(imgUrlList);

    function data2JSzip(base64Arr: { name: string, base64: string }[]) {
        // 初始化事件
        // @ts-ignore
        var zip = new JSZip();
        // 遍历数据
        base64Arr.map(function (obj) {
            // 往zip包里面不断塞png文件，使用上面保存的 name 作为文件名
            // 后面的 { base64: true } 记得设置，意思为允许 base64 的数据
            zip.file(`${obj.name}.png`, obj.base64, { base64: true });
        });
        zip
            .generateAsync({
                type: "blob",
            })
            .then(function (content: any) {
                // 下载后的压缩包文件名
                var filename = `VISC.zip`;
                // 创建隐藏的可下载链接
                var eleLink = document.createElement("a");
                eleLink.download = filename;
                eleLink.style.display = "none";
                // 下载内容转变成blob地址
                eleLink.href = URL.createObjectURL(content);
                // 往 body 加入 a 标签
                document.body.appendChild(eleLink);
                // 触发点击
                eleLink.click();
                // 然后移除
                document.body.removeChild(eleLink);
            });
    }
}

canvas下载：

const canvas: any = mergeCanvas(document.querySelectorAll(`#editChart canvas`));
downloadImgZip([canvas.toDataURL()]);

svg下载：

import { encode } from 'js-base64';

const svg: any = document.querySelector(`#${id} svg`);
const s = newXMLSerializer().serializeToString(svg);
const src = `data:image/svg+xml;base64,${encode(s)}`;
const img = new Image();
img.src = src;
img.onload = () => {
    const canvas = document.createElement('canvas');
    canvas.width = img.width;
    canvas.height = img.height;
    const context: any = canvas.getContext('2d');
    context.drawImage(img, 0, 0);
    const ImgBase64 = canvas.toDataURL('image/png');
    downloadImgZip([ImgBase64]);
}