Created
February 7, 2019 05:05
-
-
Save monsterbrain/db61fc19b98f0b160a917dbf139a9f3f to your computer and use it in GitHub Desktop.
iframe is not supported by html2canvas. to convert iframe to image / base64, using iframe2image and html2canvas to save that image data.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8" /> | |
| <meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
| <title>Canvas to Image Test</title> | |
| <meta name="viewport" content="width=device-width, initial-scale=1"> | |
| <link rel="stylesheet" type="text/css" media="screen" href="main.css" /> | |
| <script src="html2canvas.js"></script> | |
| </head> | |
| <body> | |
| <div id="capture"> | |
| <img id="img" src="" alt=""> | |
| </div> | |
| <div> | |
| <h2>Hello world this is awesome</h2> | |
| <iframe id='frame' src="inner.html" | |
| style="width:1024px; height:473px; border:0; overflow:hidden;"> | |
| </iframe> | |
| </div> | |
| <button onclick="onBtnClick()">Click Me</button> | |
| <script src="domvas.js"></script> | |
| <script src="iframe2image.js"></script> | |
| <script> | |
| function onBtnClick(){ | |
| console.log('btn click'); | |
| var image = document.getElementById("img"); | |
| var inner = document.getElementById('frame'); | |
| // Get the image | |
| iframe2image(inner, function (err, img) { | |
| // If there is an error, log it | |
| if (err) { return console.error(err); } | |
| // Otherwise, add the image to dom | |
| image.src = img.src; | |
| html2canvas(document.querySelector("#capture")).then(canvas => { | |
| // getting the base 64 image converted data | |
| var jpegUrl = canvas.toDataURL("image/jpeg"); | |
| console.log('jpqgdata=' + jpegUrl); | |
| }); | |
| }); | |
| } | |
| </script> | |
| </body> | |
| </html> |
You better to try manual way to write iframes. Since its using canvas, we cant convert iframe contents into BLOB.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
any solution suggestions? I'm also having the same problem, because I need to render an iframe on a spotify card