Skip to content

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

Open
@CNOliverZhang

Description

@CNOliverZhang

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

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions