Closed matthew2564 closed 5 years ago
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
})
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');
});
});
}
P.S. @matthew2564 Please close this issue as this is not an issue with dom-to-image.
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.
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)