0
337
VistasProblema de captura de pantalla HTML iFrame a través de JavaScript
Estoy usando la biblioteca de JavaScript Html2Canvas para tomar una captura de pantalla de la representación del contenido en el iFrame.
El contenido del iFrame es el archivo Scorm/xAPI (src=folder/index.html) que se carga desde el mismo servidor, por lo que no tengo ningún problema de CORS. El archivo Scorm/xAPI es como las diapositivas de Power Point que están incrustadas en iFrame para reproducirlas en la página web.
El problema es que cuando tomo una captura de pantalla del iFrame, solo puedo capturar imágenes parciales porque el contenido tiene objetos flash / complementos de applets de Java. La biblioteca HTML2Canvas tiene algunas limitaciones y no admite los complementos Flash Objects / Java Applets.
<button id="btn-screenshot">Button To Take Screenshot</button> <iframe id="iframe" src="folder/index.html"></iframe> <img src="" id="result" /> <script> $(document).ready(function () { $(document).on('click', '#btn-screenshot', function () { let iframe = document.querySelector("#iframe").contentWindow.document.body; html2canvas(iframe).then(canvas => { let base64Canvas = canvas.toDataURL("image/png"); $('#result').attr('src',base64Canvas) }); }) }) </script> Este es el contenido de iFrame 
Este es el resultado de la captura de pantalla. 
1 Respuestas
Responde la pregunta0
Estaba enfrentando el mismo problema, todo lo que tengo que hacer es reemplazar toda la ruta relativa de las imágenes, el archivo css y js, luego funciona bien. Cambié estáticamente la ruta relativa de esos archivos de <link href="mobile/player.css" rel="stylesheet" type="text/css" /> a <link href="http://my-project.com/lms-365/mobile/player.css" rel="stylesheet" type="text/css" /> .
Si tiene acceso a los archivos scorm, puede hacerlo, si no, entonces tiene que usar regEx para eso.
**Puedes probar algo como esto: **
$html=` <img src="/relative/url/img.jpg" /> <form action="/"> <a href='/relative/url/'>Note the Single Quote</a> <img src="//site.com/protocol-relative-img.jpg" /> `; $base='https://example.com'; echo preg_replace('~(?:src|action|href)=[\'"]\K/(?!/)[^\'"]*~',"$base$0",$html);La salida es:
<img src="https://example.com/relative/url/img.jpg" /> <form action="https://example.com/"> <a href='https://example.com/relative/url/'>Note the Single Quote</a> <img src="//site.com/protocol-relative-img.jpg" />O.....
Puedes usar el elemento base para esto. El <base> es un elemento vacío que va en el <head> . El uso <base href="https://example.com/path/" /> indicará a todas las URL relativas en el documento que se refieran a https://example.com/path/ en lugar de la URL principal. Referencia para la base