Dom-to-image: Image is often missing on first render on Safari iOS

[DanielStout5]

I'm using domtoimage.toPng(element) where element contains a few different elements, including a .png img that has partial transparency.

That img is missing from the resulting data URL on the first call on iPhones. Subsequent calls do include the img. There are two other img inside element that always show up in every toPng result, including the first one. Those other .pngs have transparency as well, but it isn't partial - they are either fully opaque text on a fully transparent background.

[cloydlau]

same problem!

[DanielStout5]

My fix was to stop using domtoimage and use html2canvas instead.

[sombek]

It was working fine with me on chrome, but on iphone usually it miss some pictures.
I changed domtoimage.toJpeg(element) to domtoimage.toPng(child)
I tested it on multiple mobiles, it seems working fine.

Try it from your side and let me know how it goes with you 👍

domtoimage.toPng(element)
const doc = new jsPDF("p", "mm", "a4");
doc.addImage(page, 'JPEG', 0, 0, 210, 297);

[sombek]

It was working fine with me on chrome, but on iphone usually it miss some pictures.
I changed domtoimage.toJpeg(element) to domtoimage.toPng(child)
I tested it on multiple mobiles, it seems working fine.

Try it from your side and let me know how it goes with you 👍

domtoimage.toPng(element)
const doc = new jsPDF("p", "mm", "a4");
doc.addImage(page, 'JPEG', 0, 0, 210, 297);

Update:
It is still there 🙃
I am planning to do something I will update you in couple of hours

[sombek]

Heey I think I workaround it -not 100% sure yet- 😂

I tried to run the converter function couple of times then take the last page.
I used this function as image generator

function generateImage() {
    return new Promise(resolve => {
        const doc = new jsPDF("p", "mm", "a4");
        const node = this.$refs.content;
        domtoimage.toPng(node)
            .then((page) => {
                doc.addImage(page, 'JPEG', 0, 0, 210, 297);
                return resolve(doc);
            })
    })
}

And use it like this:

generateImage().then(() => {
    console.log("first time")
    generateImage().then(() => {
        console.log("one more time to make sure ")
        generateImage().then((doc) => {
            console.log("okay now it should be fine")
            doc.save(`my_great_file.pdf`)
        })
    })
})

I just pushed this to our production, I hope it works fine with me.
*Note: it might take sometime, I add a loader just make it more user friendly

[DanielStout5]

I really recommend just using html2canvas - it's more customizable, faster, and reliable. No need to generate the image multiple times, all elements are included in the first one. (I'm unaffiliated with that library)

[mikerodham]

I really recommend just using html2canvas - it's more customizable, faster, and reliable. No need to generate the image multiple times, all elements are included in the first one. (I'm unaffiliated with that library)

I've just stopped using this because it's very unreliable on how it processes the image, text is weird and it's not supported on safari it seems. Shame.

Heey I think I workaround it -not 100% sure yet- 😂

I tried to run the converter function couple of times then take the last page.
I used this function as image generator

function generateImage() {
    return new Promise(resolve => {
        const doc = new jsPDF("p", "mm", "a4");
        const node = this.$refs.content;
        domtoimage.toPng(node)
            .then((page) => {
                doc.addImage(page, 'JPEG', 0, 0, 210, 297);
                return resolve(doc);
            })
    })
}

And use it like this:

generateImage().then(() => {
    console.log("first time")
    generateImage().then(() => {
        console.log("one more time to make sure ")
        generateImage().then((doc) => {
            console.log("okay now it should be fine")
            doc.save(`my_great_file.pdf`)
        })
    })
})

I just pushed this to our production, I hope it works fine with me.
*Note: it might take sometime, I add a loader just make it more user friendly

I've just leveraged this package in a similar way by calling it once, then a second time before returning the image to the user. Seems to work this way... however I don't expect this package to be updated any time soon so it'll do for now... 😬

[Nevoss]

Heey I think I workaround it -not 100% sure yet- 😂

I tried to run the converter function couple of times then take the last page.
I used this function as image generator

function generateImage() {
    return new Promise(resolve => {
        const doc = new jsPDF("p", "mm", "a4");
        const node = this.$refs.content;
        domtoimage.toPng(node)
            .then((page) => {
                doc.addImage(page, 'JPEG', 0, 0, 210, 297);
                return resolve(doc);
            })
    })
}

And use it like this:

generateImage().then(() => {
    console.log("first time")
    generateImage().then(() => {
        console.log("one more time to make sure ")
        generateImage().then((doc) => {
            console.log("okay now it should be fine")
            doc.save(`my_great_file.pdf`)
        })
    })
})

I just pushed this to our production, I hope it works fine with me.
*Note: it might take sometime, I add a loader just make it more user friendly

Did not work for me... 😞. maybe some one find another solution?

[hyl1374961656]

domtoimage(node).then(dataUrl => {
domtoimage(node).then(dataUrl1 => {
console.log(dataUrl1)
})
})
很蠢，但是可以解决问题

[shameersalim]

Running domtoimage multiple times does not work with ios 13

[eddsaura]

Still no solutions?

When I build my ionic app it doesn't work the first time, second time works flawlessly. It makes no sense.

There are no errors, I tried with try catch, no error neither... Idk

[haris-crewlogix]

This is a serious issue and needs to be addressed :( Stuck there....

[hyl1374961656]

html2canvas

[eddsaura]

html2canvas

For us it didn't work the same way, like the image was rescaled or something strange. We finally ended up launching 2 times the app at the very first time, hahaha I know...

[haris-crewlogix]

@eddsaura did you manage to solve the issue? Please share the approach with us as well :)

[christian-reichart]

Same problem! Seems to happen only on Safari on MacOS (not iOS)
I'm creating a GIF out of multiple images created by dom-to-image. The first render seems to miss the images included in my DOM, background color of my div is visible in the output.

[shameersalim]

The problem occurs on iOS as well.
I ended up using html2canvas.