Canvas 改完宽度导出空白？同值赋值也会重置画布

图片预览正常，导出却得到透明或空白结果。若流程中重新设置过Canvas宽度，先检查操作顺序，再判断是否源图损坏或压缩质量太低。这是Canvas接入的排查方法，不是宣布Tooliva当前工具存在同类故障。

width不是一个无副作用的布局标签

MDN的width文档明确说明，设置该属性会清空后备位图，并把渲染上下文重置为默认状态，包括当前路径、fillStyle和globalCompositeOperation等。即便把width赋为原来的数值，这个重置仍会发生。

因此，“宽度数值没有变化”不代表“内容和绘图状态没变”。只恢复某个颜色设置，也不会自动把此前绘制的图片重新画回来。CSS显示宽度与Canvas位图尺寸属于不同检查项，不要为调整页面排版反复写入位图尺寸属性。

先把实际执行顺序写下来

对照下面两条概念流程，确认你的异步加载、响应式更新或导出函数实际走的是哪一条：

• 易丢内容：加载图片 → 绘制 → 设置width → 直接导出。
• 可核对的顺序：确定尺寸 → 配置所需绘图状态 → 等待有效源图 → 绘制 → 导出并检查结果。

第二条不是所有项目的现成代码。若尺寸稍后再次变化，仍需要恢复对应状态并重新绘制。图片加载回调与尺寸监听相互触发时，记录每次赋值的时间和调用位置，比只看最终宽高更有用。

保留源素材，再检查重绘

1. 保留源图片、目标宽高及需要恢复的绘图状态，不把唯一源数据只存于当前画布。
2. 记录最后一次尺寸赋值发生在绘制之前还是之后，包括同值赋值。
3. 在受控副本中按最终尺寸重绘，验证透明背景、合成方式和期望区域。
4. 导出后实际读取文件，核对尺寸、透明度与画面；文件存在或文件名正确不代表内容正确。

需要更改交付像素尺寸时，参照像素尺寸与DPI检查。把DPI标签改大，不会恢复被清空的像素。

不要把不同导出失败合并处理

如果实际抛出SecurityError，另查Canvas跨域污染；若只是尺寸赋值后失去内容，降低quality或改后缀不能恢复原绘图。跨域许可、编码类型和重绘顺序应分别保留证据。

可通过资源压缩工具的正常文件流程准备可比较的交付副本，但这不能证明原Canvas流程已修复。本文基于文档与顺序分析，没有执行浏览器Canvas实验，也不承诺每次空白都由width引起。