Open zaghop opened 6 years ago
+1. Have the same issue. Very bad
+1. Have the same issue.
+1. Have the same issue.
it applies to 2.6.0 (latest at the time of writing) as well
I've resolved this bug on our company product. The real problem is a css font property you getting here:
function cloneStyle() { copyStyle(window.getComputedStyle(original), clone.style);
function copyStyle(source, target) {
target.fontStretch == '';
if (source.cssText) target.cssText = source.cssText;
else copyProperties(source, target);
target.fontStretch = 'normal';
// here's my fix
function copyProperties(source, target) {
util.asArray(source).forEach(function (name) {
target.setProperty(
name,
source.getPropertyValue(name),
source.getPropertyPriority(name)
);
});
}
}
If I don't do it such way, my font
css property become something like
font: 400 100% 14px/14px Arial, Helvetica, sans-serif;
Firefox & Chrome will warn you that whole font statement is wrong and no one of your font property except browser default will not be applied for svg that will become wrong canvas.
You can check it on your own if you set breakpoint to the if (source.cssText) target.cssText = source.cssText;
string.
It's not looks like a "silver bullet" so I'll wait for more elegant solution with community help.
@tsayen Considering how much a loss of functionality this is for Chrome users, what is the process for expediting a new release that fixes this?
The one-liner that @newmandani suggested seems fine as long as the fontStretch was originally 100% (also since no browsers support font-stretch right now, it's a fine bandaid for any case at worst).
This repo have the fix: https://github.com/MichalBryxi/dom-to-image
Also related: #220, #235
This is actually better fixed by copying the font itself over.
Expected behavior
An image is created that is identical to the DOM element being referenced
Actual behavior
Font styles (weights, size, etc...) seems to be reverting to the browser defaults.
Library version
2.5.2
Browsers