使用库 dom-to-image 按顺序返回 promise 结果

Question

使用dom-to-image library，我们可以使用 Promises 转换图像。

使用示例，从DOM对象到PNG图片的转换：

var node = document.getElementById('my-node');

domtoimage.toPng(node)
    .then(function (dataUrl) {
        var img = new Image();
        img.src = dataUrl;
        document.body.appendChild(img);
    })
    .catch(function (error) {
        console.error('oops, something went wrong!', error);
    });

在幕后，toPng 方法是一个 Promise 对象的链：

/**
 * @param {Node} node - The DOM Node object to render
 * @param {Object} options - Rendering options, @see {@link toSvg}
 * @return {Promise} - A promise that is fulfilled with a PNG image data URL
 * */
function toPng(node, options) {
    return draw(node, options || {})
        .then(function (canvas) {
            return canvas.toDataURL();
        });
}

我想根据 Node 数组转换图像，然后按顺序获取这些图像。问题是当我调用toPng() 时，异步处理时间随 DOM 目标复杂性的函数而变化。所以它会在复杂度较低的页面之前返回，而不是按顺序返回页面。

let pages = document.querySelectorAll('.page');

pages.forEach(page => {
  let dataUrl = convertToPng(page.firstElementChild);
});

function convertToPng(page) {
  domtoimage.toPng(page)
    .then(function (dataUrl) {
      console.log(page); // prints pages randomly (e.g. page3, page1, page2) 
    })
}

一个可能的解决方案是使用 Promise.all() 方法并使用 forEach() 方法附加所有 Promise。但在这种情况下，我使用的是外部库，我不知道如何处理才能首先获取 page1，然后是 page 2，依此类推...

Answer 1

据我了解，您可以使用Promise.all。像这样的东西：

let pages = document.querySelectorAll('.page');

Promise.all(Array.prototype.slice.call(pages,0)
.map(page =>domtoimage.toPng(page))
).then(pages=>{.... your handler....});

有关 Promise.all 的更多信息，您可以从 MDN 获得

Answer 2

使用async/await：

HTML：

<div class="page">Hello 1</div>
<div class="page">Hello 2</div>
<div class="page">Hello 3</div>
<div class="page">Hello 4</div>

JS (JSFiddle Link)：

let pages = document.querySelectorAll('.page');

async function getPageUrls() {
    for (let page of pages) {
        const url = await convertToPng(page);
        console.log(url);
    }
}

async function convertToPng(page) {
    return await domtoimage.toPng(page);
}

getPageUrls();

基于 OP 示例 (JSFiddle)：

let pages = document.querySelectorAll('.page');

for (let page of pages) {
    convertToPng(page);
}

async function convertToPng(page) {
    const dataUrl = await domtoimage.toPng(page);
    console.log(dataUrl);
}

getPageUrls();

使用此解决方案，代码执行将停止，直到convertToPng 在每次迭代中产生结果。

Answer 3

链接promise以使其按顺序运行的最简单方法是使用Array#reduce

pages.reduce((promise, page) => 
    promise.then(() => convertToPng(page.firstElementChild)),
    Promise.resolve() // this starts the chain
);

正如你在评论wait until page1 is complete, before beginning with the next page中所说的那样

不过，我觉得只有输出顺序很重要，在这种情况下，@VasylMoskalov 的答案更合适

正如@Keith 在评论中指出的那样——convertToPng 不返回任何东西（更不用说承诺了）

function convertToPng(page) {
//vvvvvv important you return the promise here
  return domtoimage.toPng(page)
    .then(function (dataUrl) {
      console.log(page); // prints pages randomly (e.g. page3, page1, page2) 
    })
}