Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

text-shadow blur-radius doesn't match scale. #2123

Open
2 tasks done
CNOliverZhang opened this issue Feb 16, 2020 · 1 comment · May be fixed by #3083
Open
2 tasks done

text-shadow blur-radius doesn't match scale. #2123

CNOliverZhang opened this issue Feb 16, 2020 · 1 comment · May be fixed by #3083

Comments

@CNOliverZhang
Copy link

Please make sure you are testing with the latest release of html2canvas.
Old versions are not supported and issues reported for them will be closed.

Please follow the general troubleshooting steps first:

  • You are using the latest version
  • You are testing using the non-minified version of html2canvas and checked any potential issues reported in the console

Bug reports:

I' m using the latest version and the bug is confirmed on Chromium, while other browsers were not tested.

When scale is set, and the element to be rendered into the canvas contains texts which has text-shadow with blur, the blur-radius doesn't scale with the element.

Sample of the bug:

appearance in the web page

TIM截图20200216225115

captured image

Shanghai_watermarked

If you look carefully you can find shadow blur but it dosen' t appeare as its expected size.

sample code

let watermark = document.getElementById('watermark')
  html2canvas(document.getElementById('watermark-container'), {
  scale: scale,
  backgroundColor: null
}).then(canvas => {

Sample of my fixture

I scaled the blur of the text-shadow manually and the captured image appeared as I expected.

captured image

Shanghai_watermarked

sample code

let watermark = document.getElementById('watermark')
let shadow = watermark.style['text-shadow'].split(' ')
//scaling the shadow blur manually 
shadow[shadow.length - 1] = shadow[shadow.length - 1].slice(0, -2) * scale + 'px'
watermark.style['text-shadow'] = shadow.join(' ')
//finished scaling
html2canvas(document.getElementById('watermark-container'), {
  scale: scale,
  backgroundColor: null
}).then(canvas => {

Specifications:

  • html2canvas version tested with: 1.0.0.rc5
  • Browser & version: Chromium (Electron built-in, the latest version)
  • Operating system: Windows 10
@batiste
Copy link

batiste commented Jun 24, 2023

I have the same issue.

batiste pushed a commit to batiste/html2canvas that referenced this issue Jun 24, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging a pull request may close this issue.

2 participants