Multiple document.getElementById() in array?

[matthew2564]

I am trying to send multiple document elements to the .toPng() function at the same time, I was wondering if anyone has achieved this and might be able to provide guidance.

let myArray =  [document.getElementById('element1'), document.getElementById('element2')];
domToImage.toPng(myArray).then((data) => {
  // do whatever
})

However, i get this error: TypeError: node.cloneNode is not a function at makeNodeCopy (dom-to-image.js:191) at t.invoke (polyfills.js:3) at Object.onInvoke (core.js:4760) at t.invoke (polyfills.js:3) at r.run (polyfills.js:3) at polyfills.js:3 at t.invokeTask (polyfills.js:3) at Object.onInvokeTask (core.js:4751) at t.invokeTask (polyfills.js:3) at r.runTask (polyfills.js:3)

[xgui3783]

I assume you'd do something like:

let myArray = [
  document.getElementById('element1'),
  document.getElementById('element2')
]
Promise.all( myArray.map(node => domToImage.toPng(node)))
  .then(dataArray => {
    dataArray[0]
    dataArray[1]
    // etcc
  })

[venkat4541]

In this context, since I implemented the same for my project, leaving my code for anyone. Below code captures different HTML elements based on provided id's and downloads the images as png files.

import * as domtoimage from 'dom-to-image'; // Don't forget: npm install dom-to-image
import { saveAs } from 'file-saver'; // Don't forget: npm install file-saver

 public download() {
        const domArray= ['div1', 'div2', 'div3'];
        domArray.map((target) => {
            domtoimage.toBlob(document.getElementById(target), {
                quality: 1,
                bgcolor: 'white',
                cacheBust: true
            }).then(function (blob) {
                saveAs(blob, 'screenshot.png');
            });
        });
    }

• div1, div2, div3 are id's of different html elements. Have as many as you want.
• Above code tested and worked with Angular 4

P.S. @matthew2564 Please close this issue as this is not an issue with dom-to-image.