在Web Worker中绘制SVG到Offscreen Canvas时遇解码错误求助

问题原因 #

触发InvalidStateError: The source image could not be decoded的核心原因：

• 你使用的btoa(unescape(encodeURIComponent()))编码方式对部分特殊字符处理存在缺陷，生成的Data URI不符合SVG解析规范，导致后续解码失败。
• 通过fetch加载Data URI再转Blob的流程完全冗余，反而增加了解码异常的概率。

修复方案 #

直接将SVG文本转为Blob，跳过Data URI转换步骤，让createImageBitmap直接加载SVG Blob。同时必须确保SVG本身包含标准XML命名空间，这是SVG能被正确解析的前提。

修正后的Worker代码 #

self.onmessage = async event => {
    const { imageSVG, width, height } = event.data;

    try {
        // 初始化Offscreen Canvas
        const offscreen = new OffscreenCanvas(width, height);
        const ctx = offscreen.getContext('2d');
        
        // 将SVG文本直接封装为Blob，指定正确的MIME类型
        const svgBlob = new Blob([imageSVG], { type: 'image/svg+xml' });
        // 直接用createImageBitmap加载SVG Blob，避免Data URI的编码问题
        const img = await createImageBitmap(svgBlob);

        ctx.drawImage(img, 0, 0, width, height);

        // 转换为JPEG格式并返回主线程
        const jpegBlob = await offscreen.convertToBlob({
            type: 'image/jpeg',
            quality: 1.0
        });
        postMessage({ blob: jpegBlob });
    }
    catch(error) {
        postMessage(`Error: ${error}`);
    }
};

关键注意点 #

• 传入的imageSVG必须包含完整的SVG根元素，且带有标准命名空间：<svg xmlns="http://www.w3.org/2000/svg" ...>，缺失命名空间会直接导致SVG无法被解码。
• 若SVG引用了外部资源（如字体、图片），需要将这些资源内联为Data URI，否则Web Worker环境无法加载外部资源，仍会触发解码失败。

内容的提问来源于stack exchange，提问作者Derek Johnson