用于创建dataURL的异步函数

Question

我正在尝试创建一个JavaScript函数，该函数将从JPEG返回dataURL。在Vue.js应用程序中创建pdf文档时，应多次调用此函数。以下是我设法从各个网站上拼凑的代码，以查找供jsPDF使用的代码示例。

async loadImg (url) {
    var dataURL = null
    var toDataURL = async function (url) {
        var img = new Image()
        img.onError = function () {
          alert('Cannot load image: "' + url + '"')
        }
        img.onload = async function () {
          var canvas = document.createElement('canvas')
          var context = canvas.getContext('2d')
          canvas.height = this.naturalHeight
          canvas.width = this.naturalWidth
          context.drawImage(this, 0, 0)
          dataURL = canvas.toDataURL('image/jpeg')
          console.log('onload ' + dataURL)
        }
        img.src = url
    }
    await toDataURL(url)
    console.log('end of function ' + dataURL)
    return dataURL
}

我已经尝试过使用回调方法，但是无论我做了什么，最终我最终都处于相同的状态，控制台将'函数结束'显示为空，然后在几毫秒后显示了onload注释。一个长字符串，我认为是图形的数据URL（jpg）

确定，我认为异步/等待结构与使用promise ..相同，但是为了安全起见，我使用promise重写了代码

toDataURL (url) {
  return new Promise(function (resolve, reject) {
      var img = new Image()
    img.onError = function () {
      reject(Error('Cannot load image: "' + url + '"'))
    }
    img.onload = async function () {
      var canvas = document.createElement('canvas')
      var context = canvas.getContext('2d')
      canvas.height = this.naturalHeight
      canvas.width = this.naturalWidth
      context.drawImage(this, 0, 0)
  resolve(canvas.toDataURL('image/jpeg'))
    }
    img.src = url
  })
}

// in the function to create the pdf
imageData = toDataURL(url).then(function (response) {
  console.log('Success!', response)
}, function (error) {
  console.error('Failed!', error)
})
}

主要尝试在pdf中包含三个jpg

在控制台中，我看到：

Report.vue?./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options:277 Promise {<pending>}
Report.vue?./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options:277 Promise {<pending>}
Report.vue?./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options:277 Promise {<pending>}
Report.vue?./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options:284 841.89 595.28
Report.vue?./node_modules/babel-loader/lib!./node_modules/vue-loader/lib??vue-loader-options:272 Success! data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAMCAgICAgMCAgIDAwMDBAYEBAQEBAgGBgUGCQgKCgkICQkKDA8MCgsOCwkJDRENDg8QEBEQCgwSExIQEw8QEBD/2wBDAQMDAwQDBAgEBAgQCwkLEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBD/wAARCALaBEcDASIAAhEBAxEB/8QAHgAAAAcBAQEBAAAAAAAAAAAAAAIDBAUGBw ...

There are two additional Success! data:image/ ...

我的解释是，结果有所不同，因为我得到了一个promise对象，该对象待处理然后得到图像数据。我仍然遥遥无期。

Answer 1

toDataURL完成后，您只希望img.onload解决。为此，您需要在该回调周围包装一个Promise。试试这个：

async loadImg (url) {
  const dataURL = await new Promise((resolve, reject) => {
    const img = new Image()
    img.onError = function (err) {
      reject(err);
    }
    img.onload = async function () {
      const canvas = document.createElement('canvas')
      const context = canvas.getContext('2d')
      canvas.height = this.naturalHeight
      canvas.width = this.naturalWidth
      context.drawImage(this, 0, 0)
      const dataURL = canvas.toDataURL('image/jpeg')
      console.log('onload ' + dataURL)
      resolve(dataURL);
    }
    img.src = url
  });

  console.log('end of function ' + dataURL)
  return dataURL
}