You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
#1 0ms Starting document clone with size 1920x955 scrolled to 0,0 html2canvas.min.js:20:191994
#1 162ms Unable to access cssRules property DOMException: CSSStyleSheet.cssRules getter: Not allowed to access cross-origin stylesheet
createStyleClone https://www.pangram-world.com/scripts/html2canvas.min.js:20
createElementClone https://www.pangram-world.com/scripts/html2canvas.min.js:20
cloneNode https://www.pangram-world.com/scripts/html2canvas.min.js:20
appendChildNode https://www.pangram-world.com/scripts/html2canvas.min.js:20
cloneChildNodes https://www.pangram-world.com/scripts/html2canvas.min.js:20
cloneNode https://www.pangram-world.com/scripts/html2canvas.min.js:20
appendChildNode https://www.pangram-world.com/scripts/html2canvas.min.js:20
cloneChildNodes https://www.pangram-world.com/scripts/html2canvas.min.js:20
cloneNode https://www.pangram-world.com/scripts/html2canvas.min.js:20
fn https://www.pangram-world.com/scripts/html2canvas.min.js:20
Js https://www.pangram-world.com/scripts/html2canvas.min.js:20
e https://www.pangram-world.com/scripts/html2canvas.min.js:20
e https://www.pangram-world.com/scripts/html2canvas.min.js:20
a https://www.pangram-world.com/scripts/html2canvas.min.js:20
a https://www.pangram-world.com/scripts/html2canvas.min.js:20
Js https://www.pangram-world.com/scripts/html2canvas.min.js:20
<anonymous> https://www.pangram-world.com/scripts/html2canvas.min.js:20
convertToImage https://www.pangram-world.com/scripts/symbolsLatex.js:82
renderEquation https://www.pangram-world.com/scripts/symbolsLatex.js:37
html2canvas.min.js:20:192835
#1 393ms Document cloned, element located at -9999,675.2999877929688 with size 169.43333435058594x35.01666259765625 using computed rendering html2canvas.min.js:20:191994
#1 393ms Starting DOM parsing html2canvas.min.js:20:191994
#1 428ms Starting renderer for element at -9999,675.2999877929688 with size 170x36 html2canvas.min.js:20:191994
#1 430ms Canvas renderer initialized (170x36) with scale 1 html2canvas.min.js:20:191994
#1 449ms Finished rendering html2canvas.min.js:20:191994
Source map error: Error: request failed with status 404
Resource URL: https://www.pangram-world.com/style/bootstrap.css
Source Map URL: bootstrap.css.map```
I'm using this HTML <head>
```<!-- Bootstrap CSS -->
<link rel="stylesheet" href="style/bootstrap.css">
<link rel="stylesheet" href="style/styles.css">
<link rel="stylesheet" href="style/base.css">
<link rel="stylesheet" href="style/cards.css">
<link rel="stylesheet" href="style/symbols.css">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap" rel="stylesheet">
<!-- ... favicon ... -->
<link rel="icon" type="image/x-icon" href="images/favicon.ico">
<link rel="icon" type="image/png" sizes="16x16" href="images/favicon-16x16.png">
<link rel="icon" type="image/png" sizes="32x32" href="images/favicon-32x32.png">
<link rel="apple-touch-icon" sizes="180x180" href="images/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="192x192" href="images/android-chrome-192x192.png">
<link rel="icon" type="image/png" sizes="512x512" href="images/android-chrome-512x512.png">
<script src="scripts/main.js" defer></script>
<script src="scripts/bootstrap.bundle.js"></script>
<script src="https://kit.fontawesome.com/18fe617275.js" crossorigin="anonymous"></script>
<script src="https://polyfill.io/v3/polyfill.min.js?features=es6"></script>
<script id="MathJax-script" async src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"></script>
<script src="scripts/html2canvas.min.js"></script>
And this is the script (at least part of it) that html2canvas is linked:
function convertToImage() {
const mathContainer = document.getElementById('mathContainer');
// Temporarily position the mathContainer off-screen
mathContainer.style.position = 'absolute';
mathContainer.style.left = '-9999px';
mathContainer.style.visibility = 'visible';
// Render the image with html2canvas
html2canvas(mathContainer, {
backgroundColor: background === 'transparent' ? 'rgba(0,0,0,0)' : 'white',
}).then(canvas => {
// Now that the image is rendered, reset the mathContainer's style
mathContainer.style.position = '';
mathContainer.style.left = '';
mathContainer.style.visibility = 'hidden';
// Set the source of the result image and display it
const resultImage = document.getElementById('resultImage');
resultImage.src = canvas.toDataURL('image/png');
resultImage.style.display = 'block'; // Show the image
resultImage.style.margin = 'auto'; // Center the image if needed
// Create the download link
createDownloadLink(canvas.toDataURL('image/png'));
// Create and display the copy button
createCopyButton(canvas.toDataURL('image/png'));
});
}
But I can not seem to work out what the difference is between Chromium and Firefox. I tried two Firefox browsers with the same issue. I have a live site working of it here: https://www.pangram-world.com/latex.html
You can just copy and paste any LaTeX equation in: F_{d} = 6\pi\eta rv
You can try between Chromium and Firefox to see the rendered difference. I really want to solve this!
reacted with thumbs up emoji reacted with thumbs down emoji reacted with laugh emoji reacted with hooray emoji reacted with confused emoji reacted with heart emoji reacted with rocket emoji reacted with eyes emoji
-
vs
The error on Firefox is:
And this is the script (at least part of it) that html2canvas is linked:
But I can not seem to work out what the difference is between Chromium and Firefox. I tried two Firefox browsers with the same issue. I have a live site working of it here: https://www.pangram-world.com/latex.html
You can just copy and paste any LaTeX equation in: F_{d} = 6\pi\eta rv
You can try between Chromium and Firefox to see the rendered difference. I really want to solve this!
Beta Was this translation helpful? Give feedback.
All reactions