Open
Description
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
captured image
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
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
Labels
No labels