Skip to content

Images not being added in Chrome, but do in Firefox #834

@Eldzej

Description

@Eldzej

Trying to print a page with following settings

html2pdf()
            .set({
                margin: 0,
                filename: 'myfile.pdf',
                pagebreak: { mode: 'avoid-all' },
                html2canvas: {
                    allowTaint: false,
                    useCORS: false,
                    windowWidth: 1920,
                    imageTimeout: 0,
                    onclone: () => {
                        this.stylesTarget?.remove()
                    }
                },
                jsPDF: {
                    unit: 'px',
                    format: [1920, 1080],
                    hotfixes: ['px_scaling']
                }
            })
            .from('#my-element', 'element')
            .save()

In Firefox, everything works fine, but in Chrome/Safari, the images I have converted to Base64 (converted canvases) are not added.
In console in Firefox, I see the following

#1 666ms Added image data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABNoAAAGeCAYAAABCemyXAAAgAElEQVR4Xu3dz4scdhnH8ZnZtNqKCinYukT7Y5Ntwh6KRLemXgRvXjxYPPRSsQcv6l+hf4EnwYMH8Q/wYBUKLliV7GYxB0ua2VQbCNE/oKLb7Mw4YRtYXPewOw/Zz9O8CiKW9ptnXs9DZnlT6XDgDwIECBAgQIAAAQIECBAgQIAAAQIEFhYYLvyCBw
#1 669ms Added image data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAABNoAAAGeCAYAAABCemyXAAAgAElEQVR4XuzdB5gkV3kw6q7qnpmNSkRJq7gRZJCEpF0JBAhjokk2FlEmB2MMtrH9O93nXt//Xvv3/W2DAWNMFibb5GCyLUCytFqJIBDaqBwQoLxpZjrc7/RMS6PRptmd7jklvfs8PEja6Z5z3q+qTtVX53ynqPlDgAABAgQIECBAgAABAgQIECBAgM

And in result, the charts are visible

However, this is not shown in Chrome/Safari, and the images are not visible

Any help would be appreciated.

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