I am trying to use html2canvas as part of a script (see below). The script has been designed to be injected via the console as part of an experiment and so a script containing the CDN is being appended to the head.
Unfortunately, I keep receiving the error 'html2canvas is not defined'. Does anyone have an idea what might be causing the issue? Thank you in advance for any support you can provide.
$('head').append(`<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.0/html2canvas.min.js" integrity="sha512-UcDEnmFoMh0dYHu0wGsf5SKB7z7i5j3GuXHCnb3i4s44hfctoLihr896bxM0zL7jGkcHQXXrJsFIL62ehtd6yQ==" crossorigin="anonymous"
referrerpolicy="no-referrer"></script>`);
html2canvas(document.querySelector("body")).then(canvas => {
document.querySelector("#capture-box").appendChild(canvas)
}when you do
$('head').append(`<script src="https://cdnjs.cloudflare.com/ajax/libs/html2canvas/1.4.0/html2canvas.min.js" integrity="sha512-UcDEnmFoMh0dYHu0wGsf5SKB7z7i5j3GuXHCnb3i4s44hfctoLihr896bxM0zL7jGkcHQXXrJsFIL62ehtd6yQ==" crossorigin="anonymous"
referrerpolicy="no-referrer"></script>`);
it dynamically adds* the script to head
*just adds, script is not loaded / executed.
before it could download and execute and set window.html2canvas your next line of code got executed. and it didnt find html2canvas so it failed
solution:
if you are running it via console. wait for script to load then run next set of code