Div Screenshot with Javascript and html2canvas.js partially working
Question
Am trying to capture screenshot of an image inside div elements and everything works fine as long as there is static image inside the div elements as per code below. it displays the right base64 image conversion
<div class="container_im" id="container_im">
<img src="screenshot.jpg">
</div><br>
Here is my issue. Now Am trying to upload image from a file input and display it on a preview inside the div elements and then capture the uploaded image as screenshot. The Image is showed on the preview but when I try to capture it as screenshot, its not displaying the right base64 image conversion .
Is the problem because of the fact the uploaded image is not loaded first as the page loads
here is the code below
<div class="container_im" id="container_im">
<img id="output"/>
</div><br>
<input type="file" accept="image/*" onchange="loadFile(event)">
<script>
var loadFile = function(event) {
var output = document.getElementById('output');
output.src = URL.createObjectURL(event.target.files[0]);
};
</script>
here is the entire code
<html><head>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script type="text/javascript" src="http://localhost/angle/online/offline2Copy/file/html2canvas.js"></script>
</head>
<body>
<div class="container_im" id="container_im">
<img src="screenshot.jpg">
</div><br>
or
<div class="container_im" id="container_im">
<img id="output"/>
</div><br>
<input type="button" id="but_screenshot" value="Take screenshot" class="testbn"><br>
<p id="demo_pic"></p>
<script type="text/javascript">
$(document).ready(function() {
$(".testbn").click(function() {
html2canvas(document.getElementById("container_im")).then(function(canvas) {
var tt= document.body.appendChild(canvas);
var dataURL = canvas.toDataURL();
alert(dataURL);
document.getElementById("demo_pic").innerHTML = dataURL;
});
});
});
</script>
<input type="file" accept="image/*" onchange="loadFile(event)">
<script>
var loadFile = function(event) {
var output = document.getElementById('output');
output.src = URL.createObjectURL(event.target.files[0]);
};
</script>
</body></html>
1 answers
solution1
1 ACCPTED 2018-08-14 23:29:28
The output of canvas.toDataURL() must be set as the src attribute of an image.
You can not just add it to a <p> .
It should work if you change your <p id="demo_pic"></p> to an image, eg <img id="demo_pic"></img> and then set document.getElementById("demo_pic").src = dataURL .
Here is a working fiddle.
http://jsfiddle.net/2pha/32o6es8a/
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.