本文详细介绍如何在 firefox 扩展等纯前端、无服务端环境中离线集成 canvg，通过构建 umd 版本并直接引入 html 或 js 脚本，实现 svg 渲染到 canvas 的完全离线支持。
本文详细介绍如何在 firefox 扩展等纯前端、无服务端环境中离线集成 canvg，通过构建 umd 版本并直接引入 html 或 js 脚本，实现 svg 渲染到 canvas 的完全离线支持。
Canvg 是一个功能强大的开源库，可将 SVG 内容解析并渲染至 HTML5
✅ 正确构建离线可用的 Canvg
官方 GitHub 仓库不直接提供预编译的 UMD 文件，需手动构建：
- 下载源码：前往 Canvg 发布页，选择最新稳定版，下载 Source code (zip)（非 npm package 或 tar.gz）；
-
解压并安装依赖：
unzip canvg-*.zip cd canvg-* yarn install # 或 npm install（确保已安装 Node.js ≥16）
-
构建 UMD 包：
npm start # 此命令会触发构建流程，输出 dist/umd.js
构建成功后，dist/umd.js 即为可在任意浏览器中直接使用的离线脚本（约 300–400 KB，含所有依赖如 stackblur、rgbcolor、canvg 核心逻辑）。
Alibabacloud Sdk Client Initialization For Java下载在 Java 中初始化和管理阿里云 SDK客户端。包括单例模式、线程安全、endpoint 与 region 配置、VPC 终端节点、同步与异步等。
✅ 在 HTML 中离线使用（推荐用于测试与扩展内容脚本）
将生成的 dist/umd.js 复制到你的项目目录（如 lib/canvg.min.js），然后在 HTML 中按如下方式引入：
<meta charset="utf-8"><title>Canvg Offline Demo</title><svg id="source-svg" width="200" height="200" xmlns="http://www.w3.org/2000/svg"><circle cx="100" cy="100" r="50" fill="steelblue"></circle></svg><canvas id="target-canvas" width="200" height="200"></canvas><!-- 离线引入：无需 CDN，无网络请求 --><script src="./dist/umd.js"></script><script>
// 使用全局 canvg 对象（UMD 暴露为 window.canvg）
const svg = document.getElementById('source-svg').outerHTML;
const canvas = document.getElementById('target-canvas');
canvg(canvas, svg, {
ignoreMouse: true,
ignoreAnimation: true,
useCORS: false // 离线环境必须设为 false
});
</script>
⚠️ 注意事项：
- 不要直接引用 src/ 下的 ES 模块文件（如 index.ts），它们需构建器处理，无法被浏览器原生执行；
- Firefox 扩展中，若在 content-script 中使用，请确保 manifest.json 已声明 dist/umd.js 为 content_scripts.js 资源之一，或通过 chrome.runtime.getURL() 加载（Firefox 使用 browser.runtime.getURL()）；
- 若需减小体积，可使用 npm run build:umd:min（部分版本支持）生成压缩版 dist/umd.min.js；
- 避免使用 import canvg from 'canvg' —— 这是 ESM 语法，在无模块打包器的离线环境中无效。
✅ 验证与调试技巧
- 查看控制台是否报错 ReferenceError: canvg is not defined：说明 UMD 脚本未正确加载或执行顺序错误（确保 <script> 在 DOM 元素之后或使用 defer）；</script>
- 检查 window.canvg 是否存在：打开开发者工具控制台输入 typeof canvg，应返回 "function"；
- 参考官方离线测试页：test/browser/index.html（构建后可直接双击打开）——这是最权威的离线用法示例。
综上，Canvg 完全支持离线运行，关键在于获取正确的 UMD 构建产物，并避免依赖任何动态加载或服务端解析逻辑。对于浏览器扩展开发而言，这不仅满足安全沙箱要求，也显著提升启动性能与可靠性。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
