画布打字稿错误

最后发布: 2018-07-06 20:00:04


问题

我有以下代码:

convertToDataURLviaCanvas(url, outputFormat){
    return new Promise( (resolve, reject) => {
      let img = new Image();
      img.crossOrigin = 'Anonymous';
      img.onload = function(){
        let canvas: any = document.createElement('CANVAS'),
        ctx = canvas.getContext('2d'),
        dataURL;
        canvas.height = this.height;
        canvas.width = this.width;
        ctx.drawImage(this, 0, 0);
        dataURL = canvas.toDataURL(outputFormat);
        //callback(dataURL);
        canvas = null;
        resolve(dataURL); 
      };
      img.src = url;
    });
  }

问题是this.height和this.width在Visual Studio代码中出现下划线,并且错误提示:La propiedad'width'不存在,提示为'HTMLElement'。 该代码有效,但我有这个烦人的红色下划线,是通过代码删除它们的一种方式,也许将某些类型的画布与画布中的任何其他东西都不同。

javascript typescript canvas
回答

我在Angular5中的打字稿也遇到了这个问题,在这种情况下我根本无法编译。 我通过使用必填字段创建一个新接口并将存在问题的对象强制转换为这样来解决该问题:

interface MyType extends HTMLElement 
{
    width: number;
    height: number;
}

let canvas: MyType = <MyType> document.createElement('CANVAS')

如果我还记得这应该解决问题


回答

出现错误是因为无法保证所分配的方法将具有与其定义的范围相同的上下文。 this理论上讲, this可以是任何东西。

您可以使用img.widthimg.height代替this来解决此this 这将导致img被分配给onload的方法捕获,并将始终引用该对象。