使用PreloadJS预加载图片后克隆报错，如何获取Base64 URL？

问题场景 #

使用PreloadJS预加载图片后，获取到的<img>元素src为Blob格式（如blob:http://localhost:8080/xxx），调用cloneNode(true)克隆该元素并添加到容器时，出现资源找不到的错误：

blob:http://localhost:8080/70b2d643-5a19-43a3-8f69-708eff4bca9e:1
GET blob:http://localhost:8080/70b2d643-5a19-43a3-8f69-708eff4bca9e net::ERR_FILE_NOT_FOUND

相关代码：
预加载配置：

this.m_queue.loadFile({id: 'logo', src: 'res/img/logo/logo.png'});

获取预加载资源：

const PreloadedAssets = {
    logo: null,

    initializeMisc(loadQueue) {
        PreloadedAssets.logo = loadQueue.getResult('logo');
        console.log(PreloadedAssets.logo); // 输出为<img src="blob:...">
    }
}

克隆图片的代码：

let logo = PreloadedAssets.logo.cloneNode(true);
logo.style.transition = 'opacity 0.5s';
logo.style.opacity = '0';
logo.style.position = 'absolute';
logo.style.left = `${ProjectSettings.centerX(logo.offsetWidth)}px`;
logo.style.top = `${ProjectSettings.centerY(logo.offsetHeight) - 200}px`;
this.container.appendChild(logo);

错误原因 #

Blob URL是浏览器为临时Blob资源生成的专属URL，仅在当前文档上下文且Blob资源未被释放时有效。PreloadJS内部可能会在预加载完成后清理Blob缓存，或者克隆元素引用的URL绑定的原Blob资源被回收，导致克隆元素无法访问该URL，从而出现404错误。

解决方案：将Blob图片转为Base64 DataURL #

Base64是内嵌的图片数据，不存在临时URL失效的问题，克隆后可正常使用。在预加载完成后，将Blob格式的图片转换为Base64格式即可：

修改initializeMisc方法，添加转换逻辑：

const PreloadedAssets = {
    logo: null,

    initializeMisc(loadQueue) {
        const blobImg = loadQueue.getResult('logo');
        // 创建Canvas用于转换图片格式
        const canvas = document.createElement('canvas');
        canvas.width = blobImg.width;
        canvas.height = blobImg.height;
        const ctx = canvas.getContext('2d');
        // 将Blob图片绘制到Canvas
        ctx.drawImage(blobImg, 0, 0);
        // 导出为Base64格式的DataURL（可指定格式，默认是image/png）
        const base64Url = canvas.toDataURL('image/png');
        // 创建新的Image元素，赋值Base64 URL
        const base64Img = new Image();
        base64Img.src = base64Url;
        // 同步原图片的宽高属性
        base64Img.width = blobImg.width;
        base64Img.height = blobImg.height;
        // 替换为Base64格式的图片
        PreloadedAssets.logo = base64Img;
    }
}

之后再使用cloneNode(true)克隆PreloadedAssets.logo，就不会出现资源找不到的问题了。

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