Question

我似乎能够创建画布，但是当我获得上下文时

  const resizeImage = async (maxSize: number) => {
    const image = originalImage;
    const id = positionId;
    const resizeCanvas = document.createElement('canvas');
    resizeCanvas.width = maxSize;
    resizeCanvas.height = maxSize;
    const ctx: CanvasRenderingContext2D = resizeCanvas.getContext('2D');
//         ^ Error
    ...

错误是

Type 'CanvasRenderingContext2D | ImageBitmapRenderingContext | WebGLRenderingContext | WebGL2RenderingContext | null' is not assignable to type 'CanvasRenderingContext2D'.
  Type 'null' is not assignable to type 'CanvasRenderingContext2D'.ts(2322)

Answer 1

该错误表示resizeCanvas.getContext('2D')可以返回null，但是您正在将其分配给类型为CanvasRenderingContext2D的变量（即，不能为null）。因此，在分配结果之前，您需要确保结果不为null。另外，我猜您想确保其类型为CanvasRenderingContext2D而不是ImageBitmapRenderingContext等。您可以这样做：

 const resizeImage = async (maxSize: number) => {
    const image = originalImage;
    const id = positionId;
    const resizeCanvas = document.createElement('canvas');
    resizeCanvas.width = maxSize;
    resizeCanvas.height = maxSize;
    const res = resizeCanvas.getContext('2D');
    if (!res || !(res instanceof CanvasRenderingContext2D)) {
        throw new Error('Failed to get 2D context');
    }
    const ctx: CanvasRenderingContext2D = res;

Answer 2

以下将起作用

const resizeImage = async (maxSize: number) => {
const image = originalImage;
const id = positionId;
const resizeCanvas = document.createElement('canvas');
resizeCanvas.width = maxSize;
resizeCanvas.height = maxSize;
const ctx = resizeCanvas.getContext('2D') as unknown as CanvasRenderingContext2D;

Answer 3

TYPO：

是getContext("2d")而不是"2D"，大小写很重要。

传递无效参数时，此方法将返回null。

const canvas = document.createElement('canvas');
const upperCased = canvas.getContext('2D');
const lowerCased = canvas.getContext('2d');

console.log( 'upper-cased', upperCased ) // null
console.log( 'lower-cased', lowerCased ) // { "drawImage":...

Answer 4

与其声明属性并在之后分配它，只需将其设为本地然后导出即可。当你在外面声明时，你需要先将它作废，canvas 不接受它。

所以改变这个：

/** Canvas 2d context */
  private context: CanvasRenderingContext2D;
  
  ngAfterViewInit() {
    this.context = (this.canvas.nativeElement as HTMLCanvasElement).getContext('2d');
 ...
 }

为此：

ngAfterViewInit() {
    setTimeout(() => {
      var canvasEl: HTMLCanvasElement = this.canvas.nativeElement;
      var cx = canvasEl.getContext('2d');
      this.method(cx); <== Pass it as Parameter
    }, 1);
  }

它不会给出关于画布为空的错误。希望它可以帮助。观察：这是为 ANGULAR 应用程序运行的。

React TypeScript：类型“ null”不可分配给类型“ CanvasRenderingContext2D”

4 个答案:

TYPO：