html2canvas 1.4.1捕获含base64 SVG背景元素截图异常求助

使用html2canvas 1.4.1库，通过传入className捕获页面元素并保存为Blob格式时，发现带有background-image: url(data:image/svg+xml;base64,...)的SVG背景元素显示异常，但PNG背景元素不受影响。试过dom-to-image库，但运行速度太慢，不适合当前项目。

相关代码 #

function captureImg(className) {
    const bannerElement = document.querySelector('.' + className);
    return html2canvas(bannerElement, {
        scale: 2,
        backgroundColor: null,
    }).then(canvas => {
        return new Promise((resolve, reject) => {
            canvas.toBlob(blob => {
                if (blob) {
                    const file = new File([blob], 'banner-screenshot.png', {
                        type: 'image/png'
                    });
                    resolve(file);
                } else {
                    reject(new Error('Failed to convert canvas to blob'));
                }
            }, 'image/png');
        });
    }).finally(() => {

    }).catch(error => {
        console.error('Error capturing the banner:', error);
    });
}

function captureImgNow() {
    captureImg('basic-box').then(file => {
        const formData = new FormData();
        formData.append('file_img', file);
        formData.append('error_now', error_now);
        formData.append('user_learn_id', user_learn_id);
        formData.append('lesson_id', lesson_id);
        formData.append('detail_id', detail_id);
        formData.append('type', 'wrong');
        formData.append('max_error', max_error);
        $.ajax({
            url: '/save-user-note-exam-failed',
            method: 'POST',
            contentType: 'application/json',
            data: formData,
            contentType: false,
            processData: false,
            cache: false,
            success: function (response) {
                console.log('captureImgNow');
            },
            error: function (xhr) {
            }
        });
    })
}

效果对比 #

• 期望效果：
• 实际结果：

相关CSS截图 #

测试图片验证 #

测试图片标签代码：

<img width="200px" height="200px" style="z-index: 1000; position: absolute; top: 50%; left: 50%;" src="<%= item.image_background_gray == null ? item.image_background : item.image_background_gray%>" alt="test">

• 测试图片期望效果：
• 测试图片实际结果：

1. 转换SVG Base64为Blob URL #

html2canvas对内嵌base64的SVG背景支持不佳，把这些base64转成Blob URL就能解决大部分显示问题：

先写工具函数处理转换：

function svgBase64ToBlobUrl(base64Str) {
    const svgRaw = atob(base64Str.replace(/^data:image\/svg\+xml;base64,/, ''));
    const blob = new Blob([svgRaw], { type: 'image/svg+xml' });
    return URL.createObjectURL(blob);
}

修改captureImg函数，截图前替换SVG背景，截图后恢复原样式：

function captureImg(className) {
    const bannerElement = document.querySelector('.' + className);
    // 记录被修改元素的原始样式
    const styleBackup = [];
    // 筛选所有带SVG base64背景的元素
    const svgBgElements = bannerElement.querySelectorAll('[style*="data:image/svg+xml;base64"]');

    svgBgElements.forEach(el => {
        const originalBg = el.style.backgroundImage;
        styleBackup.push({ el, originalBg });
        // 提取base64内容并转换为Blob URL
        const base64Match = originalBg.match(/data:image\/svg\+xml;base64,([^"]+)/);
        if (base64Match) {
            const blobUrl = svgBase64ToBlobUrl(base64Match[1]);
            el.style.backgroundImage = `url(${blobUrl})`;
        }
    });

    return html2canvas(bannerElement, {
        scale: 2,
        backgroundColor: null,
        useCORS: true // 开启CORS支持，确保Blob URL能正常加载
    }).then(canvas => {
        // 恢复元素原始样式并释放Blob URL
        styleBackup.forEach(({ el, originalBg }) => {
            el.style.backgroundImage = originalBg;
            const currentUrl = el.style.backgroundImage.match(/url\(([^)]+)\)/);
            if (currentUrl?.[1].startsWith('blob:')) {
                URL.revokeObjectURL(currentUrl[1]);
            }
        });

        return new Promise((resolve, reject) => {
            canvas.toBlob(blob => {
                blob ? resolve(new File([blob], 'banner-screenshot.png', { type: 'image/png' })) : reject(new Error('Canvas转Blob失败'));
            }, 'image/png');
        });
    }).catch(error => {
        console.error('截图出错:', error);
        // 出错时也要恢复原始样式
        styleBackup.forEach(({ el, originalBg }) => el.style.backgroundImage = originalBg);
    });
}

2. 检查SVG代码合法性 #

如果转换后仍有问题，需验证SVG本身的语法：

• 确保所有SVG标签闭合完整
• 特殊字符（如<、>）已转义
• 避免使用canvas不支持的SVG内部CSS属性

3. 保留原AJAX逻辑 #

captureImgNow函数无需修改，直接调用修改后的captureImg即可。

内容的提问来源于stack exchange，提问作者a canh sad chim