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

Fix inline image issues #822

Merged
merged 3 commits into from
Feb 4, 2022
Merged

Fix inline image issues #822

merged 3 commits into from
Feb 4, 2022

Conversation

croqaz
Copy link
Contributor

@croqaz croqaz commented Feb 2, 2022

This PR fixes 2 issues:

  • fix img.complete being false, which breaks inline image feature completely EDIT: this solution was not good, see the comments
    It seems that immediately after you set image.crossOrigin = 'anonymous' the image becomes "not loaded yet", which breaks the logic. It's easy to check just by adding a quick console.log('IMAGE:', img, img.complete, img.naturalWidth, img.naturalHeight) just before this if condition:

    if (image.complete && image.naturalWidth !== 0) recordInlineImage();
    else image.onload = recordInlineImage;

    I moved that logic just before we call toDataURL() just like this article says: https://developer.mozilla.org/en-US/docs/Web/HTML/CORS_enabled_image

  • remove srcset which overwrites the src and breaks restoring images that have srcset

ping @Mark-Fenng because you have the context of this feature from previous PR.

Reverted image crossOrigin change
@Yuyz0112 Yuyz0112 merged commit ef0e331 into rrweb-io:master Feb 4, 2022
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 this pull request may close these issues.

3 participants