drawImage九参数重载是Canvas实现精确裁剪与缩放的核心方法：通过sx/sy、sWidth/sHeight指定源区域，dx/dy、dWidth/dHeight控制目标绘制位置与尺寸，支持等比缩放、居中裁剪及高性能批量处理。
drawImage 的九参数重载是 Canvas 中实现精确图像裁剪与缩放的核心方法，它不依赖额外 canvas 或临时图像对象，直接在目标画布上完成“源区域提取 + 目标区域绘制 + 可选缩放”的三步操作，性能高效、控制精细。
九参数语法与各参数含义
调用形式为：
ctx.drawImage(image, sx, sy, sWidth, sHeight, dx, dy, dWidth, dHeight)
- sx, sy：源图像中裁剪起始点的横纵坐标（以像素为单位，从图像左上角开始）
- sWidth, sHeight：从源图像中裁剪出的矩形区域宽高（可小于、等于或大于原始图像尺寸；超出部分会被截断）
- dx, dy：该裁剪区域在目标 canvas 上绘制的左上角位置
- dWidth, dHeight：绘制到目标 canvas 上时的最终显示宽高（支持等比/非等比缩放）
高效裁剪的关键技巧
真正提升效率的不是“用不用九参数”，而是如何避免重复计算和冗余操作：
-
复用 Image 对象：确保
image已加载完成（监听load事件），避免每次绘制都触发解码 -
预计算裁剪参数：对固定裁剪逻辑（如头像圆形裁切、图标网格提取），提前算好
sx, sy, sWidth, sHeight，避免运行时反复解析 -
利用 dWidth/dHeight 实现无损缩放：若需保持清晰度，让
dWidth / sWidth === dHeight / sHeight，避免浏览器插值模糊 -
跳过透明区域优化（进阶）：结合
getImageData()分析 Alpha 通道，动态调整sWidth/sHeight边界，减少无效像素绘制（适用于 UI 图标批处理）
常见裁剪场景示例
从大图中提取 100×100 像素区域，并等比放大 2 倍绘制到 (50, 30)：
Wechat Article Html
下载
将 Markdown 文章转换为微信公众号兼容的纯 HTML 格式。当用户要求"转成微信格式"、"生成公众号文章 HTML"、"排版到微信草稿箱"、"微信粘贴格式"时触发。输出带内联样式的纯 HTML，微信编辑器可直接渲染，无需额外适配。支持标题、段落、列表、粗体、行内代码、表格、引用块、代码块、配图的完整转换。
立即学习“前端免费学习笔记（深入）”；
ctx.drawImage(img, 200, 150, 100, 100, 50, 30, 200, 200);
实现“居中裁切”：取原图中心 300×300 区域，铺满 600×400 的目标区域（拉伸）：
const cx = (img.width - 300) / 2; const cy = (img.height - 300) / 2; ctx.drawImage(img, cx, cy, 300, 300, 0, 0, 600, 400);
注意事项与性能提示
- 若
sWidth或sHeight为 0，整个调用被忽略，不报错也不绘制 - 源坐标超出图像边界时，canvas 自动截断（如
sx = -10，则实际从 0 开始裁；sx = img.width + 5则无内容可裁） - 频繁调用时，避免在循环内重复创建
Image或读取img.width/height——缓存它们 - 移动端要注意：某些旧 Android WebView 对非整数
dx/dy的渲染有偏移，建议四舍五入到整数
不复杂但容易忽略
