Tables where cell padding has been set to 0 lead to cropped/non-matching image
melink14 opened this issue · comments
Use case: description, code
In production, I have a large table and noticed that the bottom and left edges were cut off when saving to Png. Using fiddle I isolated the problem to setting the padding on table cells to 0.
In the fiddle the bottom edge is cut off and also the image is wider than the dom table so I guess there may be various small differences when padding is 0 in this case.
Seems related to #77 where the user also fixed the issue by adding padding. Tables naturally have 1px cell padding so this might not have been noticed in the general case.
Expected behavior
Image should be full table.
Actual behavior (stack traces, console logs etc)
Image doesn't match. Edges are cropped etc.
Library version
2.13.0
Browsers
- Chrome 108
@melink14 You can set the padding to 0.000001px and it will work as expected :) It's a browser bug that I need to figure out how to report.
Also, there will be a new release in the v2 chain tomorrow... just finalizing a bit of cleanup.
See https://jsfiddle.net/4n52yzcg/119 for what that looks like (preview)
domtoimage.toSvg(
document.getElementById('mywrap'),
{ onclone: node => node.querySelectorAll('th, td').forEach(el => el.style.padding = '0px') }
)
.then(function(dataUrl) {
var img = new Image();
document.getElementById('result').appendChild(img);
img.src = dataUrl;
})
.catch(function(e) {
console.log(e);
})@melink14 You can set the padding to
0.000001pxand it will work as expected :) It's a browser bug that I need to figure out how to report.
Thanks for the work around!
Updated the jsfiddle https://jsfiddle.net/h859jpcf/ to show the work-around, and also demo how use the onclone event to grab exactly what was cloned to pass to the SVG generator.