在视频addEventListener中调用另一个方法

Question

我是Web开发的新手，正在Ionic 4 + Angular 5中构建应用程序。我正在选择一个视频文件，并将其与缩略图一起上传。我能够生成缩略图。但是问题是我不确定如何在video addeventlistener loadeddata内部调用方法。当我直接在事件侦听器内部调用外部方法(this.convertB64ToBlob())时，出现错误消息this.convertB64ToBlob is not a function。请让我知道是否还有另一种直接调用外部方法的方法。谢谢。

// method to get thumbnail from video tag

getThumbnail(blob, filesize, filetype, filename) {
    var time = 15;
    var scale = 1;

    this.cdRef.detectChanges();
    const myVideo = this.elementRef.nativeElement.querySelector('#myVideo');
    var output = document.getElementById('output');
    myVideo.addEventListener('loadedmetadata', function () {

      this.currentTime = time;

    }, false);


    myVideo.addEventListener('loadeddata', function () {

      var canvas = document.createElement("canvas");
      canvas.width = myVideo.videoWidth * scale;
      canvas.height = myVideo.videoHeight * scale;
      canvas.getContext('2d').drawImage(myVideo, 0, 0, canvas.width, canvas.height);

      var img = document.createElement("img");
      img.setAttribute("id", "thumbImg");
      img.src = canvas.toDataURL();
      output.appendChild(img);
      this.fImgPath = canvas.toDataURL().split(',')[1];
      console.log('my video path: '+this.fImgPath);
      const tblob = this.convertB64ToBlob(this.fImgPath);
      this.getToken(blob, tblob, filesize, filetype, filename);

    }, false); 

    //myVideo.loadeddata = this.setImage.bind(myVideo, blob, filesize, filetype, filename);


  }

Answer 1

将所有function()引用转换为Arrow函数语法，以便将this的范围限制在页面上。

// method to get thumbnail from video tag

getThumbnail(blob, filesize, filetype, filename) {
  var time = 15;
  var scale = 1;

  this.cdRef.detectChanges();
  const myVideo = this.elementRef.nativeElement.querySelector('#myVideo');
  var output = document.getElementById('output');
  myVideo.addEventListener('loadedmetadata', () => {

    this.currentTime = time;

  }, false);


  myVideo.addEventListener('loadeddata', () => {

    var canvas = document.createElement("canvas");
    canvas.width = myVideo.videoWidth * scale;
    canvas.height = myVideo.videoHeight * scale;
    canvas.getContext('2d').drawImage(myVideo, 0, 0, canvas.width, canvas.height);

    var img = document.createElement("img");
    img.setAttribute("id", "thumbImg");
    img.src = canvas.toDataURL();
    output.appendChild(img);
    this.fImgPath = canvas.toDataURL().split(',')[1];
    console.log('my video path: ' + this.fImgPath);
    const tblob = this.convertB64ToBlob(this.fImgPath);
    this.getToken(blob, tblob, filesize, filetype, filename);

  }, false);

  //myVideo.loadeddata = this.setImage.bind(myVideo, blob, filesize, filetype, filename);


}