A few images on our 4-map display pages don't exist for a time period when selected from a dropdown, but others do:
The console log reports the inability to get the image but doesn't affect the page's functionality.
And in many cases, our users still would like to take screenshots with the other maps.
Incorrect attempted fix
A user discovered that dom-to-image will fail and throw an error with images that don't exist. I then read that this is the default behavior if the imagePlaceholder is undefined. So, I specified a blank image for the imagePlaceholder option to dom-to-image thinking that would cause the error to be resolved.
We've specified blank images to be used on the page in case the image isn't available so the page doesn't throw an unrecoverable error and stops working for the user.
Actual behavior (stack traces, console logs etc)
Of course, specifying a blank image file still caused the error as it wasn't a data URL. And upon discovering the actual solution, I realized I was confusing our use of a blank image file with a data URL and then at last understood what the documentation was specifying for the imagePlaceholder option.
Suggested modifications to code/docs
Since I was confusing our other blank image files solution with what dom-to-image was asking, I spent a few hours of investigation, debugging, trial and error, and deduction, finally discovered that this needed to be a base64 encoded image string (which I should've realized upon reflection that this is really what a data URL is). Once I assigned such a string for a blank image, dom-to-image worked as it was coded. So, I recommend that either such a string be the default instead of undefined or at least recommend a string be included in the github documentation as well as in the comment section of dom-to-image that describes the imagePlaceholder option. In all fairness, I probably should've realized what was being asked for from the beginning as I've worked with data URLs before via the HTML canvas element on a few coding projects. But I do believe an example data URL in the documentation that someone could use for the imagePlaceholder option could save someone else quite a bit of time who isn't as familiar with data URLs and expects dom-to-image to work out of the box without issues.
Use case: description, code
A few images on our 4-map display pages don't exist for a time period when selected from a dropdown, but others do:
The console log reports the inability to get the image but doesn't affect the page's functionality. And in many cases, our users still would like to take screenshots with the other maps.
Incorrect attempted fix
A user discovered that dom-to-image will fail and throw an error with images that don't exist. I then read that this is the default behavior if the imagePlaceholder is undefined. So, I specified a blank image for the imagePlaceholder option to dom-to-image thinking that would cause the error to be resolved. We've specified blank images to be used on the page in case the image isn't available so the page doesn't throw an unrecoverable error and stops working for the user.
Actual behavior (stack traces, console logs etc)
Of course, specifying a blank image file still caused the error as it wasn't a data URL. And upon discovering the actual solution, I realized I was confusing our use of a blank image file with a data URL and then at last understood what the documentation was specifying for the imagePlaceholder option.
Suggested modifications to code/docs
Since I was confusing our other blank image files solution with what dom-to-image was asking, I spent a few hours of investigation, debugging, trial and error, and deduction, finally discovered that this needed to be a base64 encoded image string (which I should've realized upon reflection that this is really what a data URL is). Once I assigned such a string for a blank image, dom-to-image worked as it was coded. So, I recommend that either such a string be the default instead of undefined or at least recommend a string be included in the github documentation as well as in the comment section of dom-to-image that describes the imagePlaceholder option. In all fairness, I probably should've realized what was being asked for from the beginning as I've worked with data URLs before via the HTML canvas element on a few coding projects. But I do believe an example data URL in the documentation that someone could use for the imagePlaceholder option could save someone else quite a bit of time who isn't as familiar with data URLs and expects dom-to-image to work out of the box without issues.
What I ended up doing:
`var placeholder = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==";
domtoimage.toPng(document.getElementById('contents'),{ imagePlaceholder:placeholder,`
BTW, domtoimage solved an issue we were having with html2canvas and we've since switched to using domtoimage in our pages.
Library version
2.6.0
Browsers
Chrome Version 69.0.3497.100 (Official Build) (32-bit) Firefox Version 62.0 (32-bit)