Angular创建Canvas时Document is not defined错误的解决方法

问题原因 #

你启用了SSR（服务器端渲染），组件代码会在Node.js服务器环境和浏览器环境各执行一次。Node环境中不存在浏览器特有的document对象，所以服务器端执行到document.createElement('canvas')时会抛出错误。你加的await无效，因为document.createElement是同步方法，问题核心是环境不兼容。

解决方案 #

1. 用Angular工具函数判断浏览器环境 #

Angular提供了isPlatformBrowser工具，用来区分当前代码运行在浏览器还是服务器端，只在浏览器环境执行Canvas相关逻辑：

• 先导入依赖：

  import { Inject, PLATFORM_ID } from '@angular/core';
  import { isPlatformBrowser } from '@angular/common';
  

• 在组件构造函数注入PLATFORM_ID：

  constructor(@Inject(PLATFORM_ID) private platformId: Object) {}
  

• 修改overlayImage方法，添加环境判断：

  async overlayImage() {
    // 非浏览器环境直接返回，跳过Canvas逻辑
    if (!isPlatformBrowser(this.platformId)) {
      return null;
    }
  
    // 这里放你的Canvas合成逻辑
    const canvas = document.createElement('canvas');
    // 加载图片、绘制等后续代码...
  }
  

2. 限制初始化时的方法调用 #

如果overlayImage是在组件初始化钩子（比如ngOnInit）中调用的，也要加上环境判断，避免服务器端触发：

ngOnInit() {
  if (isPlatformBrowser(this.platformId)) {
    this.overlayImage();
  }
}

3. 图片加载的额外处理 #

服务器端同样无法处理浏览器的Image对象，所以图片加载逻辑也要放在浏览器环境判断内，确保只在前端执行：

async loadImage(src: string): Promise<HTMLImageElement> {
  if (!isPlatformBrowser(this.platformId)) {
    return Promise.resolve(new Image());
  }
  return new Promise((resolve, reject) => {
    const img = new Image();
    img.onload = () => resolve(img);
    img.onerror = reject;
    img.src = src;
  });
}

内容的提问来源于stack exchange，提问作者Todd Davis