Асинхронная функция для создания dataURL - PullRequest
Новая
       18

Асинхронная функция для создания dataURL

0 голосов
/ 21 октября 2019

Я пытаюсь создать функцию JavaScript, которая будет возвращать dataURL из JPEG. Эта функция предназначена для многократного вызова при создании документа PDF в приложении Vue.js. Ниже приведен код, который мне удалось собрать вместе с разных веб-сайтов в поисках примеров кода для использования 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
}

Я пытался использовать метод обратного вызова, но независимо от того, как я это сделалВ конечном итоге я оказываюсь в том же состоянии, когда консоль отображает «конец функции» как ноль, а затем, через несколько миллисекунд, замечание о загрузке отображается с длинной строкой, которую я предполагаю как dataURL графика (jpg)

ОК. Я думал, что конструкция async / await - это то же самое, что и использование обещания ... но, чтобы быть в безопасности, я переписал свой код, используя обещание. пытаясь включить в pdf

В консоли я вижу: 

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/ ...

Моя интерпретация заключается в том, что в то время как результаты отличаются, я получаю объект обещания, который ожидает, затем я получаюданные изображения. Я все еще не впереди.

...