能否使用可输出图片的JS/HTML对应的Data URI替代SVG Data URI？

完全可以实现，你可以把包含JS动态生成图片逻辑的代码编码为对应格式的Data URI，两种成熟实现方案如下：

方案1：封装完整HTML+JS逻辑到data:text/html URI #

这是兼容性最好的方案，你可以把所有HTML结构、JS生成图片的逻辑全部打包到该URI中，无需依赖任何外部资源。
如果代码包含特殊字符，建议先将完整HTML代码做Base64编码后拼接前缀，格式为：
data:text/html;base64,Base64编码后的完整HTML代码

示例逻辑结构参考：

<!DOCTYPE html>
<html>
<body>
  <canvas id="renderCanvas"></canvas>
  <script>
    // 你的自定义图片生成逻辑
    const canvas = document.getElementById('renderCanvas')
    const ctx = canvas.getContext('2d')
    canvas.width = 300
    canvas.height = 300
    ctx.fillStyle = '#2196F3'
    ctx.fillRect(0, 0, 300, 300)
    ctx.fillStyle = 'white'
    ctx.font = 'bold 30px sans-serif'
    ctx.fillText('动态生成图片', 30, 160)

    // 生成图片资源，可直接导出或展示
    const generatedImg = new Image()
    generatedImg.src = canvas.toDataURL('image/png')
    document.body.appendChild(generatedImg)
  </script>
</body>
</html>

将以上代码做Base64编码后拼接前缀，直接在浏览器地址栏访问、嵌入iframe、img标签（部分场景支持）都可正常运行生成图片。

方案2：直接使用data:text/javascript URI加载执行逻辑 #

如果不需要额外HTML结构，也可以直接将JS逻辑编码为对应格式的URI，通过动态创建script标签加载执行：

const dynamicScript = document.createElement('script')
// 支持明文拼接或Base64编码两种格式
dynamicScript.src = 'data:text/javascript;base64,Base64编码后的JS代码'
document.body.appendChild(dynamicScript)

注意事项 #

• 优先使用Base64编码格式，可避免特殊字符转义问题，兼容性更高
• Data URI默认继承加载它的上下文的源，跨场景使用时注意同源策略限制
• 生成的图片资源可通过canvas.toDataURL()直接转成你之前使用的data:image/xxx格式，用法完全一致

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