HTML5 Canvas导出图片为DataURL需确保图片加载完成、Canvas尺寸匹配且跨域设置正确；调用toDataURL可指定格式与质量，如JPEG支持压缩参数，PNG不支持。
HTML5 中通过 Canvas 处理图片并导出为 DataURL 是常见需求，核心在于正确加载图片、绘制到 Canvas、再调用 toDataURL() 方法。关键点是确保图片已完全加载，且 Canvas 尺寸与绘制内容匹配，否则可能导出空白或截断图像。
图片必须完全加载后再绘制
直接将 <img alt="HTML5 图片资源通过 Canvas 处理并导出为 DataURL" > 元素赋值给 Canvas 会失败，因为图片异步加载，需监听 load 事件：
- 使用
img.onload = () => { ctx.drawImage(img, 0, 0); }确保绘制时机正确 - 若图片来自跨域资源（如 CDN），需设置
img.crossOrigin = "anonymous"，否则toDataURL()会因安全限制抛错 - 避免在未加载完成时调用
drawImage，此时 Canvas 内容为空，导出的 DataURL 也是透明图
Canvas 尺寸需显式设置，不能只靠 CSS
Canvas 的绘图区域由 width 和 height 属性决定，CSS 缩放仅影响显示，不改变实际像素尺寸：
htmlppt.skill
下载
把任意文章或文档内容转换成精美的全屏翻页 HTML 演示文件（幻灯片风格）。当用户发来一篇文章、文档链接、Markdown 内容、或粘贴的文本，并且希望生成演示用的 HTML 时触发。支持任意内容来源：iWiki 链接、KM 链接、本地文件路径、直接粘贴的文本。生成的 HTML 文件保存到本地工作区，并通过企微直接发送给用户。触发词示例：帮我把这篇文章做成PPT、转成演示文档、生成HTML幻灯片、做个演示、转成可以演示的格式、article to deck、make a slide。
- 设置
canvas.width = img.naturalWidth;和canvas.height = img.naturalHeight;可保持原始分辨率 - 若需缩放处理，应修改 Canvas 的
width/height属性，再调用drawImage指定目标尺寸，而非依赖 CSS - 忽略此步易导致导出图像模糊、拉伸或只有左上角一部分
导出 DataURL 时指定格式和质量
toDataURL() 默认输出 image/png，但支持 JPEG 和 WebP，并可控制压缩质量：
立即学习“前端免费学习笔记（深入）”；
-
canvas.toDataURL("image/jpeg", 0.9)输出高质量 JPEG，节省体积 - WebP 格式（
"image/webp"）在支持浏览器中提供更优压缩，但需兼容性兜底 - 质量参数仅对 JPEG/WebP 生效，PNG 不支持，传入会被忽略
完整示例：加载、处理、导出
以下代码实现图片加载、灰度处理、导出为 JPEG：
const img = new Image();
img.crossOrigin = "anonymous";
img.src = "photo.jpg";
img.onload = () => {
const canvas = document.createElement("canvas");
const ctx = canvas.getContext("2d");
canvas.width = img.naturalWidth;
canvas.height = img.naturalHeight;
ctx.drawImage(img, 0, 0);
// 灰度处理（可选）
const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
const data = imageData.data;
for (let i = 0; i < data.length; i += 4) {
const avg = (data[i] + data[i+1] + data[i+2]) / 3;
data[i] = data[i+1] = data[i+2] = avg;
}
ctx.putImageData(imageData, 0, 0);
const dataUrl = canvas.toDataURL("image/jpeg", 0.85);
console.log(dataUrl); // data:image/jpeg;base64,...
};
