I'm new to react js, can able to code basics. My goal is to take a screenshot of the target URL. I have googled almost and none worked for me.
Tried html2canvas, phantom, web shot but not working.
<html>
<div id="target">
hello
</div>
<script type="text/javascript" src="html2canvas.min.js"></script>
<script type="text/javascript">
var canvas = document.getElementById("target");
var img = canvas.toDataURL("image/png");
document.write('<img src="'+img+'"/>');
</script>
</html>
Output for the above snipet : canvas.toDataURL is not a function
I have a bunch of code written in js for other functionalities and I expect this functionality to be included in my script.So that I shouldn't run it externally unlike phantomjs.Finally, I link this script in all my HTML pages.
input:
output: it should be captured and save the screenshot as an image in my local.
Thanks in advance.
I'm new to react js, can able to code basics. My goal is to take a screenshot of the target URL. I have googled almost and none worked for me.
Tried html2canvas, phantom, web shot but not working.
<html>
<div id="target">
hello
</div>
<script type="text/javascript" src="html2canvas.min.js"></script>
<script type="text/javascript">
var canvas = document.getElementById("target");
var img = canvas.toDataURL("image/png");
document.write('<img src="'+img+'"/>');
</script>
</html>
Output for the above snipet : canvas.toDataURL is not a function
I have a bunch of code written in js for other functionalities and I expect this functionality to be included in my script.So that I shouldn't run it externally unlike phantomjs.Finally, I link this script in all my HTML pages.
input: https://google.
output: it should be captured and save the screenshot as an image in my local.
Thanks in advance.
Share Improve this question edited Oct 15, 2019 at 9:22 Gomathimeena Subburayan asked Oct 15, 2019 at 7:46 Gomathimeena SubburayanGomathimeena Subburayan 5052 gold badges10 silver badges21 bronze badges 6- 1 Show us what you have tried with code, it's easier to help that way. This site isn't about just providing full working solutions - see stackoverflow./help/how-to-ask – TommyBs Commented Oct 15, 2019 at 7:58
- @TommyBs updated my post.can you help to sort the problem? – Gomathimeena Subburayan Commented Oct 15, 2019 at 8:07
- Did you try with phantom js? phantomjs/screen-capture.html – Rebai Ahmed Commented Oct 15, 2019 at 8:11
- @AhmedRebai yes it worked but is there any way to take the screenshot without using phantomjs. I have a bunch of code written in js and i expect this functionality to be included in my script .so that I shouldn't run it externally. – Gomathimeena Subburayan Commented Oct 15, 2019 at 8:17
- Like you have included html2canvas, you can include phantomjs instead, can you share with me where it should be included? – Rebai Ahmed Commented Oct 15, 2019 at 8:21
2 Answers
Reset to default 3Check this example using html2canvas in jsfiddle. it may work for you
<div id="app"></div>
class TodoApp extends React.Component {
render() {
const test = () => {
html2canvas(document.querySelector("#app"))
.then(function (canvas) {
document.body.appendChild(canvas);
var base64URL = canvas.toDataURL('image/jpeg').replace('image/jpeg', 'image/octet-stream');
console.log(base64URL, payload)
});
}
return (
<button onClick={test}>Button</button>
)
}
}
ReactDOM.render(<TodoApp />, document.querySelector("#app"))
You can try this:
window.onbeforeunload=function(event){
if(typeof event=='undefined'){ event=window.event; }
if(event){
var page = require('webpage').create();
page.open('https://www.google./', function() {
page.render('google.png');
phantom.exit();
});
}
}